最近参与了一个IOT环境项目，需要对某个城市的某几个区域做环境监控与治理，其中就用到了地图叠加层的功能，粗看很复杂，其实很简单，先来看一下效果，然后再来讲一下如何实现的：
中间的黄色轮廓线包括的几块区域就是通过gis坐标和百度的叠加层来实现的，来简单说一下实现的步骤吧：
首先需要有每块区域的坐标集合，这个主要是由工程队施工人员，在当地采集坐标，采集后会生成相应的文件给到开发人员
这些文件主要为如下：
其中这个红框内的文件是我们最需要的文件，他是一个shp文件，轮廓文件，开发人员需要转换为一个jsonlist，才可以使用，
那么如何转换呢，首先，要有个知识点需要说明，就是工程队测量的坐标系，可能并不是我们真正要使用的经纬度，因为不同坐标系的规范导致地图坐标显示不正确，所以需要转换坐标系为国标（也就是1984）
这时需要下载并且安装 ArcGis 这个软件，专门用于处理地图的，安装完毕后，如下，然后打开红框中的ArcMap
参考如下图，按照层级打开ArcToolBox，这时一个工具箱，里面有坐标系的转换工具
首先使用“Define Projecttion” ，用于定义一个工程，其实就相当于是eclipse中的一个工程，然后又相关的操作都根据这个工程来就行
如上图，选择一个shp文件，然后就会自动生成他自己的坐标系，导入后，默认识别
导入后的效果如下
这个时候我们可以进行转换一下，双击project
第一栏选择刚刚导入的porject，然后选择一个输出的目录，最后就是你想要转换的坐标系，完了之后，点击OK生成
最后到输出的目录去看一下，文件都在里面
此时，我们只需要把shp文件在转换为程序可识别的文件即可，那么对于程序来讲，可以识别的就是json，所以，我们来转换一下，先打开 http://mapshaper.org/ 这个网站，这是专门用于转换坐标的。
首先选择一个shp文件，就是我们刚刚生成的，，导入后入下图：
选择右上角的 export 导出，选择geojson即可，然后下载到本地，再导入到自己的工程中去使用
选择右上角的 export 导出，选择geojson即可，然后下载到本地，再导入到自己的工程中去使用，看一下这个json文件吧：
其实就是一个json对象里包含了坐标的json数组
接下来的工作就是通过js来渲染图层了
最终效果获取了某个地区进行了渲染如下：
这仅仅只是截取了某个array进行的展示，如果显示全部，还需对json进行循环，这边就省略了，代码参考如下，其中包含了一些百度地图的相关api：
var china = new BMap.Polygon([], {
strokeColor : "orange",
strokeWeight : 2,
strokeOpacity : 0.5,
fillOpacity: 0.1,
strokeStyle: "solid",
fillColor: "red"
}); //创建多边形
$.ajax({
url: "${ctx}/resources/module/script/dashboard/china.json",
type: ‘GET‘,
async: true
}).done(function (res) {
var pointArray = res.geometries[0].coordinates[0];
var convertor = new BMap.Convertor();
var realPointArray = [];
for (var i = 0 ; i < pointArray.length ; i ++) {
var obj = pointArray[i];
var mapPoint = new BMap.Point(obj[0], obj[1])
var pointArr = [];
pointArr.push(mapPoint);
realPointArray.push(mapPoint);
}
china.setPath(realPointArray);
})
map.addOverlay(china);
原文地址：https://www.cnblogs.com/leechenxiang/p/9560111.html