【echarts地图制作】下钻到乡镇/街道级别的

需求

展示西安市各区县的地图，点击各区县下钻到各乡镇/街道，只能内网环境使用，不可用通过百度/高德地图来实现。

解决

利用地图数据生成区域的geojson

网络上大部分地图数据只是到省市，最多到区县，再往下的数据就比较难找了；经过搜索，找到了一个可以买地图数据的地方，数据可以精确到乡镇/街道，价格还比较划算；

地图数据格式为shp（shape格式），如果需要其他的格式，得加点钱获取比如svg、dbf、shx等额外格式的文件；
echarts支持的格式有geojson，此时我们需要一个工具把shp格式的文件转换为geojson格式，推荐2种工具：

• 在线转换工具MyGeodata Converter

这个工具是收费，每月最多可以转换3次文件，上传时网站会提示：

Don't forgot to upload all relevant files to your .SHP file - you need at least also .DXF and .SHX files uploaded together with your .SHP file!

不仅要上传shp格式，还要上传dbf和shx等格式的文件，来获得更完整的地理数据，如果把所有格式的数据都上传了，那么生成的geojson可能会有问题（亲测），所以只上传3种格式是比较稳妥的办法；

上传后会跳转到一个设置的界面，先不要点击开始转换按钮，首先检查一下转换的编码格式，默认为UTF-8，如果是中文的地图数据，最好把转换格式切换为GB18030-Chinese格式；然后点击开始转换就可以了。

转换超过3个会提示下图，这时可以清一下浏览器缓存试试：

转换后可以下载到.geojson格式的数据文件，放到项目中时，把.geojson格式手动修改为.json格式，就可以被echarts使用了，直接import geojson格式的文件会报错；

• mapshaper(http://mapshaper.org/)

同时上传.dbf .shp .shx .prj格式的文件，然后点击右上角的export，就会看到如下界面，选择geoJSON，就完成了。

利用geojson展示自定义的echart地图

关于具体如何导入json格式数据到echarts的方法，可以参考官方示例。
以下是我自己的代码：

<template>
    <div class="map-chart-wrapper"  ref="myEchart"
        :style="{height:height,width:width, left: mapPosition.left, top: mapPosition.top}">
    </div>
    <!-- '新城区': '&#9312;',
    '碑林区': '&#9313;',
    '莲湖区': '&#9314;', -->
</template>
<script>
import echarts from 'echarts';
import axios from 'axios';
import 'echarts/theme/macarons.js';
import xianshi from '../common/json/xiaan.json'
impo