百度地图自定义图层详解+相关工具使用说明

说明：本文所使用工具及代码下载地址：https://download.csdn.net/download/sparrowflying/10386424

本文分为几个部分：

1、基础知识——百度地图坐标系（摘自百度地图官网）

2、百度地图自定义图层api说明，或参考百度地图官方示例。

3、获取百度地图原图

4、自定义图层图片处理

5、获取百度自定义图层图块与代码

若对自定义图层原理已有了解，可直接跳到第3步；若已有合适的自定义图层图片，可直接跳到第5步。

1、基础知识——百度地图坐标系（摘自百度地图官网）

在使用自定义方式叠加图层之前，您需要先了解百度地图的地图坐标系。 百度地图坐标系涉及：

经纬度球面坐标系统

经纬度球面坐标系统

图块编号系统

XY经纬度球面坐标系统

经纬度是一种利用三维空间的球面来定义地球上的空间的球面坐标系，它能够标示地球上任何一个位置。

通过伦敦格林尼治天文台原址的经线为0度经线，从0度经线向东、向西各分180度。赤道为0度纬线，赤道以北的纬线称为北纬、以南的称为南纬。

在百度地图中，东经和北纬用正数表示，西经和南纬用负数表示。例如北京的位置大约是北纬39.9度，东经116.4度，那么用数值标示就是经度116.6，纬度39.9。

在百度地图中，习惯经度在前，纬度在后，例如：

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标，经度在前，纬度在后

XY墨卡托平面坐标系统

由于百度地图是显示在平面上的，因此在地图内部系统中需要将球面坐标转换为平面坐标，这个转换过程称为投影。

百度地图使用的是墨卡托投影。墨卡托平面坐标如下图所示，平面坐标与经纬度坐标系的原点是重合的。

XY图块编号系统

百度地图在每一个级别将整个地图划分成若干个图块，通过编号系统将整个图块整合在一起以便显示完整的地图。当地图被拖动或者级别发生变化时，地图API将会根据平面坐标计算出当前视野内所需显示的图块的编号。

百度地图图块编号规则如下图所示：

从平面坐标原点开始的右上方向的图块编号为0,0，以此类推。在最低的缩放级别（级别 1）中，整个地球由4张图块组成。随着级别的增长，地图所使用的图块个数也随之增多。

2、百度地图自定义图层api说明，或参考 百度地图官方示例 。

定义取图规则

TileLayer实例的getTilesUrl方法告诉API取图规则。

getTilesUrl方法的参数包括tileCoord和zoom，其中tileCoord为图块的编号信息，zoom为图块的级别，每当地图需要显示特定级别的特定位置的图块时就会自动调用此方法，并提供这两个参数。

使用者需要告知API特定编号和级别所对应的图块的地址，这样API就能正常显示自定义的图层了。

var map = new BMap.Map('map',{minZoom:10,maxZoom:18});//创建地图，设置缩放级别范围
map.addControl(new BMap.NavigationControl()); //添加地图控件
map.centerAndZoom(new BMap.Point(116.332782, 40.007978), 16); //设置地图显示的中心点
var tileLayer = new BMap.TileLayer(); //创建一个地图图层实例
tileLayer.getTilesUrl = function(tileCoord, zoom) { //向地图返回地图图块的网址
    var x = tileCoord.x;
    var y = tileCoord.y;
    return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
map.addTileLayer(tileLayer); //添加自定义图层到地图

代码很简单，只要正确的引入地图图块即可。

3、获取百度地图原图

要想用自定义图块完美覆盖百度地图图块，首先你需要得到百度地图原图。这里采用【水经注万能地图下载器】下载。

（1）双击 sgwn.exe 打开软件

（2）选择 【电子.百度】。

（3）拖动到你想要添加自定义图层的区域，选中下载区域，双击开始下载

（4）在新建任务对话框中设置好存储目录、任务名称和需要下载的地图级别。点击确定

（5）下载完成后在弹出框中点击是，导出图片，导出类型为拼接。

（6）得到不同级别下的百度地图原图

4、自定义图层图片处理

这里选取上一步中得到的缩放级别为18的天坛拼接图，在PS中打开，将自定义的天坛图（该图是调试时随机下载的）缩放到与百度原图同样大小，去除多余部分，得到18级的自定义天坛图，保存图片（tiantan.png）。

5、获取百度自定义图层图块与代码

网上的百度地图瓦片工具有很多，这里采用 TileCutter。

（1）打开TileCutter，选取需要切图的图片，下一步

（2）选择输出路径，下一步

（3）选择输出类型。下一步

（4）选择中心点坐标（因软件拖动不方便，此处我选择在坐标拾取网页选取中心点）。下一步

（5）设置需要切图的级别。下一步

（6）图层设置。下一步

（7）开始切图

（8）完成。