ECharts合并地图上的区域

工作中的一个需求，要求显示北京地图，但需要将北京的东城区，西城区合并起来，显示“城区”，其他不变，于是就需要对官方提供的地图数据进行修改。

一个思路是借助第三方工具，生成新区域的轮廓点，然后删除原来的3个区域。例如http://geojson.io/就提供了这样一种方式。但这样费时费力，且精度无法保证。实际上，直接将这三个省的轮廓点合并即可。

let dataGeoLocation = require('@/assets/js/geolocation/beijing.json');

var mergeProvinces = function(geojson, names, properties) {
  var features = geojson.features;
  var polygons = [];
  // 将指定省的polygon保存下来，并将省的数据从地图中删除
  for(var i = 0, iLen = names.length; i < iLen; i++) {
      for(var j = 0, jLen = features.length; j < jLen; j++) {
          if(features[j].properties.name == names[i]) {
              polygons = polygons.concat(features[j].geometry.coordinates);
              features.splice(j, 1);
              break;
          }
      }
  }
  // 构建新的合并区域
  var feature = {
      type: "Feature",
      id: "" + features.length,
      properties: {
          name: properties.name || ""
      },
      geometry: {
          type: "MultiPolygon",
          coordinates: polygons
      }
  };
  if(properties.cp) {
      feature.properties.cp = properties.cp;
  }

  // 将新的合并区域添加到地图中
  features.push(feature);
};

var params = {
    names: ["东城区", "西城区"],
    properties: {
        name: "城区",
        cp: [116.397133,39.894235]
    }
};

mergeProvinces(dataGeoLocation, params.names, params.properties);

// 地图
let echartsMap = this.$echarts.init(this.$refs.echartsMap);
this.$echarts.registerMap('北京', dataGeoLocation);
echartsMap.setOption(this.echartsDataMap);

补充几个工具

阿里云GeoAtlas http://datav.aliyun.com/tools/atlas/
GEOJSON http://geojson.io/
获取经纬度 http://www.gpsspg.com/maps.htm

参考

https://blog.csdn.net/fyyyr/article/details/81777477