百度地圖API:利用瓦片生成工具,自定義背景圖片

       參考酸奶小妹的博文《【百度地圖API】如何製做一張魔獸地圖!!——CS地圖也能夠,哈哈哈》 (http://www.cnblogs.com/milkmap/archive/2011/05/27/2060021.html)。html

       及博文 《百度地圖:新的瓦片生成工具來了》 連接:http://blog.csdn.net/bq_cui/article/details/9396703,開發的工具下載地址:http://blog.csdn.net/bq_cui/article/details/47372005api

1、製做地圖的準備工做函數

  其實,你只須要準備一些地圖的瓦片圖,就能夠了。工具

  用切片工具,把一張完整的圖片(最好大一些,清楚一些),切成小片,可以使用 TileCutter工具。ui

2、瞭解百度地圖API的地圖圖層接口url

構造函數 描述
TileLayer([opts:TileLayerOptions]) 建立一個地圖圖層實例。

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

使用這個接口,就能夠將切好的地圖瓦片鋪在原有的百度地圖上。 .net

複製代碼
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;
}
複製代碼

3、限制地圖的顯示級別code

  若是,你只切了1-4級的地圖,那麼你的魔獸地圖應該只能顯示1-4級。htm

  因此,要對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

相關文章
相關標籤/搜索