自定义绘制区域地图
自定义绘制区域地图整体思路官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制需求:绘制北京大兴区的区域地图官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制整体思路先获取北京大范围json数据 :获取省份json数据;根据大区域的json数据去勾勒自己想要的地图,然后获取最终的json数据 绘制地图工具;通过单击,删除被选中的区域。大兴区的数据就会在左侧动态展示生成echarts 地图
·
官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制
需求:绘制北京大兴区的区域地图
官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制
整体思路
1.先获取北京大范围json数据
2.根据大区域的json数据去勾勒自己想要的地图,然后获取最终的json数据
绘制地图工具;
通过单击,删除被选中的区域。大兴区的数据就会在左侧动态展示
3.生成echarts 地图
这里就延伸出来一个问题:本地怎么异步请求json数据:
(1)通用:
vue-resource 请求本地json数据方法详解
(2)针对地图
import daxingfrom '@/../public/static/json/jibei.json
echarts.registerMap('大兴区', daxing)
所以最终代码:
myChart() {
const mychart = echarts.init(document.getElementById('mychartSheng'))
echarts.registerMap('大兴区', daxing)
window.addEventListener('resize', function() {
mychart.resize()
})
mychart.setOption({
tooltip: {
trigger: 'item',
borderColor: 'rgba(0, 0, 0, 0.65)'
},
visualMap: {
min: 0,
max: 5000,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
label: {
show: true,
color: '#000',
formatter: '{b}',
position: [13, 0]
},
geo: {
map: this.cityname,
itemStyle: {
areaColor: '#fefcd6',
borderColor: '#75b6e3'
}
}
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)