echarts 加载乡镇地图_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;

    });
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

最终效果图: