以下例子取自
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',
});