loca高德地图如何将后端传来的点位数据转换成geojson格式

以下例子取自
https://lbs.amap.com/demo/loca-v2/demos/cat-scatter/sz-road
黄色呼吸点的使用

从官网复制代码时用的是他自带的geojson,用自己的数据是需要将url换成data

     var geoLevelE = new Loca.GeoJSONSource({
          // data: [],  
          url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/sz_road_E.json',
      });

打开后发现里面的格式是这样的(内容较长,只截取部分)

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [113.806374, 22.764264]
            },
            "properties": {
                "name": "大兴二路与向兴路路口",
                "value": 22.36232917,
                "level": "B",
                "month": 202005
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [113.80241, 22.748657]
            },
            "properties": {
                "name": "沙井北环路与福和路路口",
                "value": 45.18932661,
                "level": "C",
                "month": 202005
            }
        },
       ]
     }

而一般我们从后端拿到的接口数据是这样的

 {
      "id": 1,
      "name": "点位1",
      "lng": 121.6942,
      "lat": 29.6162,
    },
    {
      "id": 2,
      "name": "点位2",
      "lng": 121.6312,
      "lat": 29.5922,
    },

接下来就是将我们的json用js代码转换一下格式
根据上面的地址里的geojson格式一步一步改变我们自己的格式,注意每一个字段都要对上,不然点位可能就显示不出来。

        var features = [];
        this.stationList.forEach((i) => {    //stationList是我们从后端调接口得到的json数组
          if (i.lng != null && i.lat != null) {
            var feature = {};
            feature.type = "Feature";
            feature.properties = {
              name: i.name,
              value: 95,  //随便写
              level: "E",  //随便写
              month: 202005, //随便写
            };
            var geometry = {};
            geometry.coordinates = [i.lng, i.lat];
            geometry.type = "Point";
            feature.geometry = geometry;
            features.push(feature);
          }
        });
        this.stationGeojson.features = features;  //this.stationGeojson是我们在外面定义,用来存放改变后的geojson

最后我们将得到的geojson放到data里,用data替换掉url

     var geoLevelE = new Loca.GeoJSONSource({
           data:this.stationGeojson,  
         // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/sz_road_E.json',
      });
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值