本文主要是介绍echarts 加载乡镇地图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
echarts是一款Apache基金会下孵化项目之一,是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
echarts支持坐标系地图,使用geojson的格式进行加载,最终通过canvas进行绘制。使用echarts加载乡镇地图也是十分简单,效果也非常好,同时支持多种动画、渲染方式。
一、获取地图数据
乡镇级别的数据可以通过水经注软件进行下载。如图所示,下载需要的矢量数据,这里记得选择坐标系为WGS84 经纬度投影坐标系
下载后目录结构如下
二、转换为geojson
使用mapshaper工具对shp文件进行转换到处为geojson文件。
点击select打开选择文件框,选择刚刚下载的乡镇shapefile文件。
选中刚刚下载的文件,所有文件都要选中
点击import,导入数据
成功导入,显示下载的乡镇数据。点击右上角的export按钮进行导出
选择geojson
导出后便得到了需要的geojson文件了。
导出后还需要做一步处理,导出的文件的属性是大写的Name,如下图。这样不会被echarts识别,echarts会区分大小写,这样加载会显示不了名称。
对json的所有Name替换为name后保存即可。
三、echarts使用
使用echarts对地图加载
$.get(this.mapJson, (geoJson) => {// 基于准备好的dom,初始化echarts实例echarts.registerMap('nh_town', geoJson);this.mapChart = echarts.init(document.getElementById(this.chartId));//将json请求的数据的内容封装为echarts显示的内容this.mapChartData = geoJson.features.map((feature, index) => {var rObj = {};rObj.name = feature.properties.name;rObj.value = this.effectSymbolCor[feature.properties.name]; //是每个镇中心的经纬度return rObj;});this.mapOption.series = this.initMapChartSeries(this.mapChartData);this.mapChart.setOption(this.mapOption);//点击this.mapChart.on('click', function (params) {console.log(params)var _self = this;});})
最终效果图:
这篇关于echarts 加载乡镇地图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!