开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

简介: 原文:【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛。常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现)。今天我们来学习,当地图上有大量标注,比如600万个的时候,我们如何用“麻点图”来实现标注的展示。
+关注继续查看
原文:【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

摘要:自定义地图图层的用途十分广泛。常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现)。今天我们来学习,当地图上有大量标注,比如600万个的时候,我们如何用“麻点图”来实现标注的展示。

----------------------------------------------------------------------------------------------------------

“麻点图”展示图,如下图所示:

 

 

“麻点图”实现原理

1、将麻点做在同一张图片上,然后利用自定义图层接口,将麻点图贴在地图底图上;

2、然后利用热区接口,使鼠标放在热点上,有文字显示。

3、可以自己加上信息窗口等覆盖物,让热区hotspot看起来像标注marker一样。

 

 

根据地图级别确定图块总面积

一个图块是256*256的图片构成的。

当地图为1级时,整个地图由4张图片构成,如下图(中心点为0,0):

 

所以图层的长宽为512*512。如下图:

 

将此图裁成4块,贴到地图底图上。

 

 

 

同理,其他地图级别、图块数量和图块总面积的关系如下表:

地图级别    图块数量            图块总面积        备注

1             2*2=4              512*512          2^1=2, 2^2=4, 256*2=512

2             4*4=16            1024*1024      2^2=4, 4^2=16, 256*4=1024

3             8*8=64            4096*4096      2^3=8, 8^2=64, 256*8=2046

4             16*16=256       ……

zoom       (2^zoom)^2      (256*(zoom^2))^2

 

 

以zoom=3为例,制作热区

使用自定义图层的方法,将麻点图贴到地图上。

var tileLayer = new BMap.TileLayer({isTransparentPng: true});
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}

 

然后为每一个麻点添加一个热区。(示例中只添加了可视区域内的21个麻点)

//创建热区
var p1 = new BMap.Point(-53.278572,36.83958);
var h1 = new BMap.Hotspot(p1, {text: "第1个点"});
map.addHotspot(h1);

 

最终效果图:(用此方法,可以添加600万个以上的热区哦~)



 

 

 

 

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热区+自定义图层</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="map" style="width:400px;height:300px"></div>
<div id="info" style="width:400px;height:800px"></div>
<script type="text/javascript">
var tileLayer = new BMap.TileLayer({isTransparentPng: true});
tileLayer.getTilesUrl
= function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
var map = new BMap.Map('map');
map.addTileLayer(tileLayer);
//map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(0, 0), 3);

//点击获取屏幕经纬度
map.addEventListener("click",function(e){
document.getElementById(
"info").innerHTML += e.point.lng + "," + e.point.lat + "</br>";
});

//创建热区
var p1 = new BMap.Point(-53.278572,36.83958);
var h1 = new BMap.Hotspot(p1, {text: "第1个点"});
map.addHotspot(h1);

var p2 = new BMap.Point(-14.717837,35.647352);
var h2 = new BMap.Hotspot(p2, {text: "第2个点"});
map.addHotspot(h2);

var p3 = new BMap.Point(9.713773,36.126444);
var h3 = new BMap.Hotspot(p3, {text: "第3个点"});
map.addHotspot(h3);

var p4 = new BMap.Point(43.564799,30.699049);
var h4 = new BMap.Hotspot(p4, {text: "第4个点"});
map.addHotspot(h4);

var p5 = new BMap.Point(30.024388,29.418746);
var h5 = new BMap.Hotspot(p5, {text: "第5个点"});
map.addHotspot(h5);

var p6 = new BMap.Point(29.141318,18.90614);
var h6 = new BMap.Hotspot(p6, {text: "第6个点"});
map.addHotspot(h6);

var p7 = new BMap.Point(37.677664,17.781705);
var h7 = new BMap.Hotspot(p7, {text: "第7个点"});
map.addHotspot(h7);

var p8 = new BMap.Point(21.488043,10.607121);
var h8 = new BMap.Hotspot(p8, {text: "第8个点"});
map.addHotspot(h8);

var p9 = new BMap.Point(16.189621,15.225979);
var h9 = new BMap.Hotspot(p9, {text: "第9个点"});
map.addHotspot(h9);

var p10 = new BMap.Point(11.77427,14.939957);
var h10 = new BMap.Hotspot(p10, {text: "第10个点"});
map.addHotspot(h10);

var p11 = new BMap.Point(11.77427,20.855394);
var h11 = new BMap.Hotspot(p11, {text: "第11个点"});
map.addHotspot(h11);

var p12 = new BMap.Point(-10.596843,8.562041);
var h12 = new BMap.Hotspot(p12, {text: "第12个点"});
map.addHotspot(h12);

var p13 = new BMap.Point(-27.669534,21.131844);
var h13 = new BMap.Hotspot(p1, {text: "第13个点"});
map.addHotspot(h13);

var p14 = new BMap.Point(-36.20588,23.866825);
var h14 = new BMap.Hotspot(p14, {text: "第14个点"});
map.addHotspot(h14);

var p15 = new BMap.Point(-15.600908,-23.866825);
var h15 = new BMap.Hotspot(p15, {text: "第15个点"});
map.addHotspot(h15);

var p16 = new BMap.Point(-4.709708,-10.024106);
var h16 = new BMap.Hotspot(p16, {text: "第16个点"});
map.addHotspot(h16);

var p17 = new BMap.Point(19.427545,-4.145408);
var h17 = new BMap.Hotspot(p17, {text: "第17个点"});
map.addHotspot(h17);

var p18 = new BMap.Point(47.09708,-13.50419);
var h18 = new BMap.Hotspot(p18, {text: "第18个点"});
map.addHotspot(h18);

var p19 = new BMap.Point(55.633426,-8.854941);
var h19 = new BMap.Hotspot(p19, {text: "第19个点"});
map.addHotspot(h19);

var p20 = new BMap.Point(-57.105209,2.370216);
var h20 = new BMap.Hotspot(p20, {text: "第20个点"});
map.addHotspot(h20);

var p21 = new BMap.Point(-48.274507,-4.736327);
var h21 = new BMap.Hotspot(p21, {text: "第21个点"});
map.addHotspot(h21);

var p22 = new BMap.Point(-56.222139,-30.699049);
var h22 = new BMap.Hotspot(p22, {text: "第22个点"});
map.addHotspot(h22);
</script>
</body>
</html>



 

 

附录:

获取地图上的经纬度

可以使用以下代码获取地图上任意点的经纬度。

//点击获取屏幕经纬度
map.addEventListener("click",function(e){
document.getElementById("info").innerHTML += e.point.lng + "," + e.point.lat + "</br>";
});

 

 

 

大量标注会使地图变慢,如何解决?

标注数据量请控制在150个以内,以保持各个浏览器都能高性能地展示地图;标注数量在260以内,可以使用自定义覆盖物实现;标注数量大于300个,建议尝试marker聚合,或者数据抽希,或者热区。

Marker聚合:http://tieba.baidu.com/f?kz=1031097376 
数据抽希:比如有10个marker,选择其中6个做为显示点。
热区:如本例。

建议不要一次在地图上添加过多的marker,而是先把point存储在数据库里,当需要显示某个marker是,再addOverlay。如《显示可视区域内的标注》;http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html

 

 

-----------------------------------------------------------------------------------------

关于屏幕像素,图块图号,经纬度之间的转换,请查看此篇文章《百度地图API详解之地图坐标系统》http://www.cnblogs.com/jz1108/archive/2011/07/02/2095376.html

 

涉及到以下坐标系:

  • 经纬度:通过经度(longitude)和纬度(latitude)描述的地球上的某个位置。
  • 平面坐标:投影之后的坐标(用x和y描述),用于在平面上标识某个位置。
  • 像素坐标:描述不同级别下地图上某点的位置。
  • 图块坐标:地图图块编号(用x和y描述)。
  • 可视区域坐标:地图可视区域的坐标系(用x和y描述)。
  • 覆盖物坐标:覆盖物相对于容器的坐标(用x和y描述)。

 

计算方式:

  var lngLat = e.point;  
  var lngLatStr = "经纬度:" + lngLat.lng + ", " + lngLat.lat;
  
  var worldCoordinate = projection.lngLatToPoint(lngLat);
  var worldCoordStr = "<br />平面坐标:" + worldCoordinate.x + ", " + worldCoordinate.y;
  
  var pixelCoordinate = new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() - 18)), 
                                       Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() - 18)));
  var pixelCoordStr = "<br />像素坐标:" + pixelCoordinate.x + ", " + pixelCoordinate.y;
  
  var tileCoordinate = new BMap.Pixel(Math.floor(pixelCoordinate.x / 256),
                                 Math.floor(pixelCoordinate.y / 256));
  var tileCoordStr = "<br />图块坐标:" + tileCoordinate.x + ", " + tileCoordinate.y;
  
  var viewportCoordinate = map.pointToPixel(lngLat);
  var viewportCoordStr = "<br />可视区域坐标:" + viewportCoordinate.x + ", " + viewportCoordinate.y;
  
  var overlayCoordinate = map.pointToOverlayPixel(lngLat);
  var overlayCoordStr = "<br />覆盖物坐标:" + overlayCoordinate.x + ", " + overlayCoordinate.y;

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【C 语言】二级指针作为输入 ( 自定义二级指针内存 | 二级指针排序 | 抽象业务逻辑函数 )(一)
【C 语言】二级指针作为输入 ( 自定义二级指针内存 | 二级指针排序 | 抽象业务逻辑函数 )(一)
36 0
上云双引擎(上)- 如何从单台ECS转换成业务高可用架构
背景 传统的互联网业务,无论是APP应用还是web应用,很多中小型企业对于云服务还是处于一个“懵懂”时期,基本上所有的应用部署都依然延用的线下的那一套,例如数据库自建,中间件自建,存储自建;如果业务都是单点部署,不管是数据安全、还是业务的稳定性,都难以得到保障。
2181 0
HTML5调用百度地图API进行地理定位实例
自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发。虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情。今天为大家带来的是使用HTML5调用百度地图API进行地理定位实例。请看下面代码:
            
1685 0
【百度地图API】如何制作公交线路的搜索?如331路
原文:【百度地图API】如何制作公交线路的搜索?如331路 摘要:   从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ -------------------------------------------------------...
1684 0
【百度地图API】自定义可编辑的交通路线
原文:【百度地图API】自定义可编辑的交通路线 任务描述:   我想自己绘制一条从地铁站出口到天安门的道路,而且还需要根据我的喜好来改变这条路线。   如何实现:   鼠标左击地图,绘制路线;双击后,绘制结束;绘制结束后,路线可编辑。
892 0
如何利用【百度地图API】进行定位?非GPS定位
原文:如何利用【百度地图API】进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你。你能很容易使用以下代码进行定位! ------------------------------------------------------------------------------- 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。
1020 0
【百度地图API】如何制作商圈地图?行政地图?
原文:【百度地图API】如何制作商圈地图?行政地图? 摘要:   想要显示某一个区域,并且鼠标放上去,该区域就会变色。这时,你就需要巧用多边形覆盖物,和它的鼠标事件了!   快来看看去哪儿网的实例吧:http://hotel.
1833 0
CSS自定义鼠标指针样式
原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。
880 0
百度地图开发1

最近自己想研究下地图,本来想研究g

1580 0
百度地图开发1
最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注! 一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http:
1801 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载