echarts地图自定义

一、目标

现有echarts地图不能满足特殊需要。以上海为例：

1. 现有echarts地图

按照真实行政区域进行区域划分

2.特殊需要

1. 将若干小行政区域合并为大区
2. 将面积较大的行政区域拆分为小区

例如，

1. 将浦东新区拆分为浦东1，浦东2
2. 将虹口、杨浦合并为北区

二、思路

首先，自定义地图数据

1. 获取地图数据
2. 编辑地图数据

其次，融入echarts

1. geojson与echarts地图数据格式融合

最后，得到可持续使用的自定义地图

三、实现

1. 获取地图数据

方式1： 直接搜索引擎搜索地图数据。如下示例：

1. 中国省/县地图文件 https://github.com/longwosion/geojson-map-china

方式2： 购买地图图层，如“国家基础地理信息中心”

方式3： 自定义地图数据（如MapInfo格式）。如下：

2. 编辑地图数据

已有地图数据，有时并不符合我们的需求，则可以通过如下工具进行编辑——

1. 格式转换（将MapInfo格式转换为GeoJSON格式） https://mygeodata.cloud/converter/mapinfo-to-geojson （在线 ）
2. 查看并编辑（轻量级GeoJSON格式查看并编辑工具） http://geojson.io （在线 ）
3. 查看并编辑（专业级Mapinfo格式地图编辑工具）mapinfo软件（下载）

推荐 轻量级地图编辑工具 http://geojson.io ，可对地图图层进行增删改存操作。

geojosn编辑示例

1.源文件

2.编辑得到两个文件

一区

二区

3.保存已编辑的geojson格式数据即可。

3. 融入echarts

由于echarts对自己的地图数据进行了额外的编码，因此上述得到的geojson格式，并不能直接嫁接到echarts的地图json/js文件中。

echarts地图数据格式示例:

{
 "type": "FeatureCollection",
 "features": [
   {
     "id": "310112",
     "type": "Feature",
     "geometry": {
       "type": "Polygon",
       "coordinates": [
         "@@@EBAD@@A@E_GCB@A@AG@BGCABGEAHQPFRiFKNQ^DFSEMFAFBHFBCFDDACCFGA@
@AG@@AC@@AD@BAD@@AB@BED@B@F@B@FBBNDFLCDBCBFB@DFG@CBBABDB@CDBAFCB@DABD@B@DB@
BD@@B@BB@B@@FJ@DKLFB@DMDBBABBCFDB@@HB@BBABBDCBGNBDAB@@BP],// 非全部
       "encodeOffsets": [
         [
           124327,
           31940
         ]
       ]
     },
   },
 ],
 "UTF8Encoding": true
}

geojson数据格式示例:

{
 "type": "FeatureCollection",
 "features": [
   {
     "type": "Feature",
     "properties": {
       "daiwei_fenqu": ""
     },
     "geometry": {
       "type": "Polygon",
       "coordinates": [[
           [
             121.93519592285156,
             31.015278981711266
           ],
           [
             121.90223693847656,
             31.06058083870329
           ],
       ]],
       },
   }]
}

其中，echarts对geojson主要对如下字段编码：

1. coordinates

2. encodeOffsets

3. UTF8Encoding: true

另外，如果进行手动编辑json文件（如直接在json文件中，进行行政区的合并/拆分操作），也主要操作如字段：

1. coordinates

2. encodeOffsets

处理方案如下：

• 方式1：echarts地图数据文件内容全部更改为geojson格式。
• 方式2：echarts地图数据文件内容全部保留为echarts编码后格式。

以上两种格式不能混杂在一个地图数据文件中——

1.如果全部更改为geojson，则需要自己另行编辑其他未更改区域。

2.如果对geojson进行编码，则只需把更改部分编码后融入echarts现有数据文件，编码工具如下：

• 工具：将geojson编码为echarts地图数据格式
• 链接：http://blog.giscafer.com/mapshaper-plus/

• 使用示意图：

  

四、注意

自己编辑得到的地图形状与原本echarts地图融合时候，可能会存在些许偏差（区域之间存在间隙），如果精度要求不太严格，则可以控制地图最大缩放级别，忽略小空隙。

如果精度要求极其严格，则最好抛弃echarts本身的地图数据。直接采用一套完整的地图。

处理后地图:

调用:

import SHUrl from './shanghai-origin.json'; // 引入
ECharts.registerMap('上海片区', SHUrl); // 注册
{
 type: 'map',
 map: '上海片区', // 调用
 roam: true,
 zoom: 1.2,
 scaleLimit: {
   min: 1,max: 1.3, // 限制缩放级别
 }
}