尧图网站建设 
echarts是一款Apache基金会下孵化项目之一是一个使用 JavaScript 实现的开源可视化库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 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.mapChartecharts.init(document.getElementById(this.chartId));//将json请求的数据的内容封装为echarts显示的内容this.mapChartDatageoJson.features.map((feature,index){varrObj{};rObj.namefeature.properties.name;rObj.valuethis.effectSymbolCor[feature.properties.name];//是每个镇中心的经纬度returnrObj;});this.mapOption.seriesthis.initMapChartSeries(this.mapChartData);this.mapChart.setOption(this.mapOption);//点击this.mapChart.on(click,function(params){console.log(params)var_selfthis;});})最终效果图: echarts 加载乡镇地图
echarts是一款Apache基金会下孵化项目之一是一个使用 JavaScript 实现的开源可视化库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 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.mapChartecharts.init(document.getElementById(this.chartId));//将json请求的数据的内容封装为echarts显示的内容this.mapChartDatageoJson.features.map((feature,index){varrObj{};rObj.namefeature.properties.name;rObj.valuethis.effectSymbolCor[feature.properties.name];//是每个镇中心的经纬度returnrObj;});this.mapOption.seriesthis.initMapChartSeries(this.mapChartData);this.mapChart.setOption(this.mapOption);//点击this.mapChart.on(click,function(params){console.log(params)var_selfthis;});})最终效果图: