使用vue-baidu-map解析geojson

这是后台给我的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]]}}]}

View Code

html代码:

<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, 其他的可以按照此法进行解析.

根据后台提供的geojson可以得到如图所示:

 

 其中遇到的问题有:

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

这是错误的图:

 

 点都已经发生了偏移

这是正确的图:

 

 

解决方法:

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

来源：https://www.icode9.com/content-4-609951.html