使用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]]}}]}

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的處理(其中lineList數組為我存放polyline，pointList數組為我存放的marker的點)

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,完成重載!

 

寫的比較粗略，大佬勿噴！