在前兩文中描述了通過(guò)疊加Geoserver WMS服務(wù)、通過(guò)代理層實(shí)現(xiàn)WMS服務(wù)的本地緩存,本文將講述通過(guò)切片的方式,按百度地圖的規(guī)則進(jìn)行切圖,按百度瓦片的XYZ規(guī)則進(jìn)行圖層疊加。
切片工具源碼已在github共享,地址如下:https://github.com/michael-laoyu/MapTileGenerator 。 記得點(diǎn)STAR!
使用說(shuō)明:
設(shè)置mapConfig.json,根據(jù)配置項(xiàng)請(qǐng)求WMS服務(wù)進(jìn)行切片,支持多線程方式。2016/8/2進(jìn)行了完善,改進(jìn)了多線程部分,增加了切片的進(jìn)度事件。
瓦片規(guī)則
瓦片存儲(chǔ)路徑:程序目錄\Tiles\Zoom\x_y.png
Paste_Image.png
Paste_Image.png
前端頁(yè)面訪問(wèn)
將生成的切片拷貝到Web站點(diǎn)下,前端頁(yè)面通過(guò)URL鏈接訪問(wèn),參考如下:
var tileLayer = new BMap.TileLayer({ isTransparentPng: true });
tileLayer.getTilesUrl = function (tileCoord, zoom) {
if (zoom >= 10) {
var x = tileCoord.x;
var y = tileCoord.y;
if (x < 0) {
x = 'M' + (-x);
}
if (y < 0) {
y = 'M' + (-y);
}
//根據(jù)瓦片的文件路徑拼接URL
var url = '/szgas_jd_tiles/' + zoom + '/' + x + '_' + y + '.png';
return url;
}
}
map.addTileLayer(tileLayer);
}
小結(jié)
本文是百度地圖的最后一篇,分別講述了不同的幾種思路,實(shí)際應(yīng)用應(yīng)根據(jù)業(yè)務(wù)場(chǎng)景相互結(jié)合。
推薦
F3Earth是一群志同道合的伙伴發(fā)起的國(guó)產(chǎn)Web 3D Engine項(xiàng)目,github地址:https://github.com/f3earth/f3earth , 目前正在開(kāi)發(fā)中,DEMO已初具功能,期待更多朋友的參與。