使用vue-baidu-map解析geojson

安装vue-baidu-map

[vue-baidu-map官网](https://dafrok.github.io/vue-baidu-map/#/zh/index)

npm install vue-baidu-map --save

全局引入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你申请的AK'
})

vue代码

<baidu-map
   		class="allMap"
	   	v-if="lookMap"
	   	:center="map.center"
	   	:zoom="map.zoom"
	   	:scroll-wheel-zoom="true">
	<bm-marker
	     v-for="(item, index) in pointList"
	     :key="index"
	     :position="{lng: item[1], lat: item[0]}">
	</bm-marker>
	<bm-polyline
	     v-for="(item, index) in lineList"
	     :key="index + '-' + index"
	     :path="item"
	     stroke-color="blue"
	     :stroke-opacity="0.5"
	     :stroke-weight="2"></bm-polyline>
</baidu-map>

js代码

this.lineList = []
this.pointList = []
let jsonArr = []
   try {
     jsonArr = JSON.parse(row.scPhotoJson).features
     this.lookMap = true
     for (let i = 0; i < jsonArr.length; i++) {
            const type = jsonArr[i].geometry.type
            switch (type) {
              case 'LineString':
                let arr = []
                for (let j = 0; j < jsonArr[i].geometry.coordinates.length; j++) {
                  const item = jsonArr[i].geometry.coordinates[j]
                  let obj1 = {
                    lng: item[0][1],
                    lat: item[0][0]
                  }
                  let obj2 = {
                    lng: item[1][1],
                    lat: item[1][0]
                  }
                  let obj3 = [obj1, obj2]
                  arr.push(obj3)
                }
                this.lineList = arr
                break
              case 'MultiPoint':
                this.pointList = jsonArr[i].geometry.coordinates
                break
            }
          }
          this.map.center = {
            lng: this.pointList[0][1],
            lat: this.pointList[0][0]
          }
   } catch (e) {
          jsonArr = []
          this.$message.error('json格式有误!')
}

其中仅仅只是做了marker和polyline, 其他的可以按照此法进行解析.

gejson数据

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"LineString","coordinates":[[[31.148260581906463,121.67195994909487],[31.086599467631498,121.76969558858048]],[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.19918663281803,121.60168550904932]],[[31.19918663281803,121.60168550904932],[31.148260581906463,121.67195994909487]],[[31.086599467631498,121.76969558858048],[31.270543099071627,121.73454489397504]],[[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048]],[[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]],[[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487]],[[31.04759406186183,121.59196584343134],[31.119065864225043,121.58791448558134]],[[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134]]]}},{"type":"Feature","properties":{},"geometry":{"type":"MultiPoint","coordinates":[[31.19918663281803,121.60168550904932],[31.270543099071627,121.73454489397504],[31.148260581906463,121.67195994909487],[31.119065864225043,121.58791448558134],[31.086599467631498,121.76969558858048],[31.04759406186183,121.59196584343134]]}}]}

效果

遇到的问题

因为我的地图为弹框,所以当我的弹框显示的时候,只出现点绘制,但是线(方形)并没有绘制出来,当你再次拖拽地图时又会重新绘制为一个正确的图形,并且开始的点似乎还和经纬度对应不上.

错误的图

正确的图

解决方案

当我弹框显示的时候,我再次加载一下地图即可(在vue中可以使用v-if),因为v-if可以重新创建dom,完成重载!