baidu地图API叠加自定义图层（三）- 通过切片实现图层叠加

在前两文中描述了通过叠加Geoserver WMS服务、通过代理层实现WMS服务的本地缓存,本文将讲述通过切片的方式，按百度地图的规则进行切图，按百度瓦片的XYZ规则进行图层叠加。

切片工具源码已在github共享，地址如下：https://github.com/michael-laoyu/MapTileGenerator 。 记得点STAR！

使用说明：

设置mapConfig.json，根据配置项请求WMS服务进行切片，支持多线程方式。2016/8/2进行了完善，改进了多线程部分，增加了切片的进度事件。

瓦片规则

瓦片存储路径：程序目录\Tiles\Zoom\x_y.png

Paste_Image.png

Paste_Image.png

前端页面访问

将生成的切片拷贝到Web站点下，前端页面通过URL链接访问，参考如下：

      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);
                }
                //根据瓦片的文件路径拼接URL
                var url = '/szgas_jd_tiles/' + zoom + '/' + x + '_' + y + '.png';
                return url;
            }
        }
        map.addTileLayer(tileLayer);
    }

小结

本文是百度地图的最后一篇，分别讲述了不同的几种思路，实际应用应根据业务场景相互结合。

推荐

F3Earth是一群志同道合的伙伴发起的国产Web 3D Engine项目，github地址：https://github.com/f3earth/f3earth ， 目前正在开发中，DEMO已初具功能，期待更多朋友的参与。