百度地图API：利用瓦片生成工具，自定义背景图片

时间：2022-08-24 18:54:39

参考酸奶小妹的博文《【百度地图API】如何制作一张魔兽地图！！——CS地图也可以，哈哈哈》 （http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html）。

及博文 《百度地图：新的瓦片生成工具来了》 链接：http://blog.csdn.net/bq_cui/article/details/9396703，开发的工具下载地址：http://blog.csdn.net/bq_cui/article/details/47372005。

一、制作地图的准备工作

　　其实，你只需要准备一些地图的瓦片图，就可以了。

　　用切片工具，把一张完整的图片（最好大一些，清楚一些），切成小片，可使用 TileCutter工具。

二、了解百度地图API的地图图层接口

构造函数 描述
TileLayer([opts:TileLayerOptions]) 创建一个地图图层实例。

接口地址：http://openapi.baidu.com/map/classReference.html#anchor6_TileLayer

使用这个接口，就可以将切好的地图瓦片铺在原有的百度地图上。　


var tileLayer = new BMap.TileLayer();

tileLayer.getTilesUrl = function(tileCoord, zoom) {

    var x = tileCoord.x;

    var y = tileCoord.y;

    var url = 'images/tiles/' + zoom + '/tile' + x + '_' + y + '.png';

    return url;

}

三、限制地图的显示级别

　　如果，你只切了1-4级的地图，那么你的魔兽地图应该只能显示1-4级。

　　所以，要对map的显示做一个限制。看下面源代码第一行。

　　还需要规定出自定义地图类型，看源代码第二行。

　　第三行，添加的鱼骨控件，只会显示1-4级哟~因为在第一行控制了minZoom和maxZoom。

var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});

var map = new BMap.Map('container', {mapType: MyMap});

map.addControl(new BMap.NavigationControl());

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

我是采用的

1.利用TileCutter工具将原始图片切为1-5级，原始图片所在级别为2级。

2.直接修改了离线API的js

改为：Uc.getTilesUrl=function(a,b,c){var x=a.x,y=a.y,e=1,z=b;return "tiles/"+z+"/"+x+"/tile"+x+"_"+y+".png";};

3.替换瓦片地图文件夹images/tiles/XXX

相关文章