使用vue-baidu-map解析geojson

2020-01-09 17:03:10 阅读：403 来源： 互联网

标签：baidu map vue jsonArr geometry coordinates let 121.76969558858048 type

这是后台给我的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,完成重载!

标签：baidu,map,vue,jsonArr,geometry,coordinates,let,121.76969558858048,type
来源： https://www.cnblogs.com/zaijin-yang/p/12172346.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用vue-baidu-map解析geojson