百度地图渲染wkt格式网格数据

百度地图渲染wkt格式的网格数据

1.渲染百度地图

先引入百度地图的源文件，我们公司要求使用内网部署的百度地图，所以没有下载百度地图的相关依赖，不过api都和官网一致，直接参照官网的方法使用即可。

相关配置的引入：

<script src="http://内网地址/baidumap/bmapgl/api/booter.js"></script>
<script src="http://内网地址/dugis-baidu/gateway/jsapi/api.js"></script>
<script src="http://内网地址/dugis-baidu/gateway/index/config.js"></script>

渲染的时候直接在提前定义好的容器中进行渲染就可以

<div id="allmap" style="overflow: hidden; zoom: 1; position: relative">
   <div
     id="map"
     style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out"
   ></div>
 </div>

_bdmap = new BMap.Map('map')  //初始化并本地存储地图实例
var city = that.EPARCH_CN  	  //获取当前地市
if (city != '') {
  _bdmap.centerAndZoom(city, 11)  //以地市为中心，对地图初始的中心及缩放进行设置
} else {
  var poi = new BMap.Point(116.307852, 40.057031)
  _bdmap.centerAndZoom(poi, 16)
}
_bdmap.enableScrollWheelZoom(true)  //设置地图可以滚轮缩放

2.处理网格数据

本次需求所需要渲染的是wkt格式的网格数据，主要涉及到两种格式的数据一种是MULTIPOLYGON类型，一种是POLYGON类型，关于wkt数据解释可以参照这篇文章：空间数据WKT与WKB格式介绍

通过接口获取网格的相关数据：

MULTIPOLYGON(((113.297190672205 40.1458806791381,113.311479996012 40.1459097428838,113.316227228923 40.1546210317700,113.321506280472 40.1756981983826,113.307286457393 40.1834647931305,113.289412636889 40.1887173055036,113.26990116888 40.1932128909093,113.2302311683 40.1341417786344,113.24568979115 40.1171106450653,113.277535961627 40.1164616094776,113.283997819806 40.1149283043700,113.28416620992 40.1126402117416,113.291718810027 40.1111827682567,113.308299697194 40.1305859575177,113.309862599563 40.1340745240044,113.311430112319 40.1373033141446,113.297631682839 40.1386841774183,113.297190672205 40.1458806791381)))

关于这种数据的处理方式，我现在用的一般是两种方式
1.通过js方法进行解析

		var testPolygon = []
        for (var i = 0; i < polygons.length; i++) { //这边polygons是通过接口获取的多个区域的数组， 遍历后对每个区域的数据进行解析
          var polygon1 = polygons[i].coordinate
          var polygon1Pts = ''
          var polygon1PtsArr = []
          if (polygon1.indexOf('MULTIPOLYGON') != -1) {
            polygon1Pts = polygon1.split('(((')[1].split(')))')[0]
            polygon1PtsArr = polygon1Pts.split(')),((')
            polygon1PtsArr.forEach((item, index) => {
              polygon1PtsArr[index] = item.split(',')
              polygon1PtsArr[index].forEach((itm, idx) => {
                polygon1PtsArr[index][idx] = itm.split(' ')
              })
              let itemP = {
                ...polygons[i],
                point: polygon1PtsArr[index],
              }
              testPolygon.push(itemP)
            })
          }else {
            polygon1Pts = polygon1.split('((')[1].split('))')[0]
            polygon1PtsArr = polygon1Pts.split('),(')
            polygon1PtsArr.forEach((item, index) => {
              polygon1PtsArr[index] = item.split(',')
              polygon1PtsArr[index].forEach((itm, idx) => {
                polygon1PtsArr[index][idx] = itm.split(' ')
              })
              let itemP = {
                ...polygons[i],
                point: polygon1PtsArr[index],
              }
              testPolygon.push(itemP)
            })
          }
        }

2.vue等框架使用terraformer-wkt-parser依赖进行解析（推荐）

npm i -S terraformer-wkt-parser

import WKT from 'terraformer-wkt-parser'
var geojson = WKT.parse(wktData);

3.区域渲染

获取到的wkt数据经过上面的方法处理后就会变成一目了然的由经纬度的点组成的数组或是terraformer-wkt-parser所解析出来的GeoJson数据。
数据结构经过调整后，使用拿到的数据进行渲染就可以了

//overlays为经过处理后的区域数据，需要先遍历所有的区域，
//再遍历其中所有的点，使用new BMap.Point生成一个百度地图的点
//然后用new BMap.Polygon将所有生成的点整合成一个多边形区域
//最后使用前面定义的百度地图实例_bdmap完成渲染
overlays.forEach((item, index) => {
  let points = []
  item.point.forEach((itm) => {
    points.push(new BMap.Point(itm[0], itm[1]))
  })
  var polygon = new BMap.Polygon(points, styleOptions) //创建多边形
  _bdmap.addOverlay(polygon)
})

其他渲染方式：

使用高度支持百度地图的mapvgl中的平面图层PolygonLayer来渲染数据，具体渲染方式参照官网即可。这种方式的方便之处在与可以直接使用terraformer-wkt-parser解析出来的数据进行渲染，不需要对数据进行进一步的处理。

但是经过这种方式渲染出来的图层并不能进行像百度地图一样的编辑区域，所以有修改需求的小伙伴们推荐使用上面的渲染方式。

4.注意地图坐标系

我这次做需求主要遇到了两种不同的坐标系，我使用的这个百度地图是bd09坐标系的，也有wgs84坐标系的百度地图，拿到数据后要和后端核对是哪个坐标系的数据，可以在这个工具上根据实际情况看看渲染出来的坐标是否准确：地图坐标系转换
如果需要进行两种坐标的转换，参照这个wgs84转gcj02转百度地图bd09

分享结束，有写的不好或者错误的地方请大家多多指正，感谢耐心阅读！

引用文章：
https://www.jianshu.com/p/6b9c4b596dba
https://baijiahao.baidu.com/s?id=1713780383353656668&wfr=spider&for=pc