如何自定义地图图层
1个回答
2017-04-03 · 互联网+时代高效组织信息化平台
关注
展开全部
麻点图”实现原理:
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);
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);
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询