vue 中 echarts 实现自定义地图拼接使用echarts地图的时候，通常全国地图、省、市等地图都有相对应的geo

使用echarts地图的时候，通常全国地图、省、市等地图都有相对应的geo文件，可以直接注册并使用，但是项目中有的时候需要显示到乡镇级别，或者只需要一个一个省中的某些地区，这个时候就很难找到合适的geo，经过各种查找，后来发现了一个可以自己拼接地图的方式，以河北的雄安新区为例；

雄安新区是2017年成立的新的经济开发区，现在的地图上虽然有雄安新区位置的显示，但是没有一个固定的范围，地图上也不显示边界，找不到合适的geo或json文件，然后百度到雄安新区是由保定的雄县、容城、安新以及周边的一些地区组成，那么我们就看做是雄县、容城、安新的组合。

一、拼接地图

首先下载Bigemap GIS Office软件，这是一个地图下载器，里面可以找到精确到乡镇的地图；

点击右上角导出边界，可以获得一个.kml文件；

依次保存雄县、容城、安新三个县的kml文件，然后就可以开始进行拼接了。

打开网址 geojson.io/#map

将保存的kml文件依次导入，

将右侧的代码复制并保存为.json文件，这个json文件引入项目中注册，就可以得到雄安新区的地图；

二、修改echarts源码

这样得到的json文件，里面存在乡镇级别的文件时，可能会出现报错：

这个时候需要修改node modules 中的echarts代码：在node modules --> echarts --> lib --> coord --> geo --> parseGeoJson.js

将parseGeoJson.js文件中的default函数替换为如下代码：

function _default(geoJson, nameProperty) {
  geoJson = decode(geoJson);
  return zrUtil.map(zrUtil.filter(geoJson.features, function (featureObj) {
    // Output of mapshaper may have geometry null
    // return featureObj.geometry && featureObj.properties && featureObj.geometry.coordinates.length > 0;
    return featureObj.geometry && featureObj.properties && (
      // avoid length error if missing coordinates
      (featureObj.geometry.coordinates && featureObj.geometry.coordinates.length > 0)
      // allow GeometryCollection
      || (featureObj.geometry.geometries && featureObj.geometry.geometries.length > 0)
  )
  }), function (featureObj) {
    var properties = featureObj.properties;
    var geo = featureObj.geometry;
    var geometries = [];

    if (geo.type === 'Polygon') {
      var coordinates = geo.coordinates;
      geometries.push({
        type: 'polygon',
        // According to the GeoJSON specification.
        // First must be exterior, and the rest are all interior(holes).
        exterior: coordinates[0],
        interiors: coordinates.slice(1)
      });
    }

    if (geo.type === 'MultiPolygon') {
      
      var coordinates = geo.coordinates;
      zrUtil.each(coordinates, function (item) {
        if (item[0]) {
          geometries.push({
            type: 'polygon',
            exterior: item[0],
            interiors: item.slice(1)
          });
        }
      });
    }

    if (geo.type === 'GeometryCollection') {
      var geometries2 = geo.geometries;
      zrUtil.each(geometries2, function (geo) { // OR      zrUtil.each(geometries2, function (geo) {
          var coordinates = geo.coordinates;
          if (geo.type === 'Polygon') { // this is a full copy from above
              geometries.push({
                  type: 'polygon',
                  exterior: coordinates[0],
                  interiors: coordinates.slice(1)
              });
          } // end full copy
      });
    }

    var region = new Region(properties[nameProperty || 'name'], geometries, properties.cp);
    region.properties = properties;
    return region;
  });
}

地图就可以正常显示了；

三、下载patch-package

虽然修改了echarts源码就可以正常显示地图，但是因为直接在node modules中直接修改代码，将代码上传至仓库之后node modules不会被备份，这样在多人开发时会造成一定的麻烦，后来经过各种百度，找到了一种比较简单的修改源码并且不影响npm i 的方式：

1、安装 patch-package

npm i patch-package //npm 安装
yarn add  patch-package postinstall-postinstall // yarn安装

2、按照自己的需要修改node modules中的代码

3、配置package.json

"scripts": { "postinstall": "patch-package" }

4、运行命令

npx patch-package package-name // npm创建
yarn patch-package package-name // yarn创建

使用patch-package会在项目根目录生成patches文件夹