项目中用到地图,之前看到ecarts的地图功能觉得合适,先看看效果图:
1、首先在阿里数据可视化平台下载需要地区的JSON文件:数据可视化
2、下载安装echarts、vue、axios
- 数据格式(必须)
_this.mapData.push({
// value: ele,
id: ele.id,
name: ele.name,
signboardName: ele.signboardName ?? ele.name,
lng: ele.longitude,
lat: ele.latitude,
connectStatus: ele.connectStatus,
dataStatus: ele.dataStatus
})
- 自定义点位
addImage(url, params, api, realData) {
return {
type: "image",
style: {
image: url,
x: api.coord([
realData[params.dataIndex].lng,
realData[params.dataIndex].lat,
])[0],
y: api.coord([
realData[params.dataIndex].lng,
realData[params.dataIndex].lat,
])[1],
width: 20,
height: 25,
},
};