Echarts 简单实现地图省 =＞ 市 =＞ 区 =＞ 镇街 下钻

本文仅展示最简单实现, 实际使用要结合后台设计, 思路一致;

完整代码: 

GitHub - byc233518/echarts-map-drillinghttps://github.com/byc233518/echarts-map-drilling

实现步骤:

1. 整理需要区域的 geoJSON 地理边界数据;

1.1 获取需要区域的 kml 数据, 可以在 http://www.bigemap.com/reader/download/ 获取

1.2 将 kml 数据转换成边界信息 json, 可以在 https://geojson.io/#map=10/23.1122/112.8869 转换

2. 引入Echarts ;

    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

3. 初始化echarts 及 地图

var chart = echarts.init(document.getElementById('main'));
echarts.registerMap('mapName', Json);
            

4. 点击(双击)事件处理

chart.on('click', function (params) {
    console.log(params.name) //获取到点击区域的名称或其他信息
}

5. 最终效果如下