echars地图---显示到乡镇街道级别

在此以南京市江宁区为例，记录一下实现过程

1、整体完成后实现的效果如下

2、需要用到的工具

（1）下载街道数据：bigemap:这是一个可以获取到街道、乡镇的软件。

地址：谷歌卫星地图下载器_地图下载工具_全能地图下载器

安装完成后打开，输入要获取要获取地图的乡镇

然后点击导出边界按钮生成该乡镇的KML文件

 

 工具二： 用来把kml文件转为json数据     geojson.io

网址：http://geojson.io/#map=2/20.0/0.0

依次把下载的kml文件导入，全都导入完成后，直接将右侧的json数据cv

然后放到json文件中然后引用就好。

完整代码：

 

 红框框住的是使用到的文件。

map.js里面的代码：

$(function () {

 function jiangningChart () {

    var jiangningMapChart = echarts.init(document.getElementById('map'))

    // echarts.registerMap('jiangning', jiangningMap, {})

    echarts.registerMap('jiangning', jiangningMap, {})

    option = {

      geo: {

        // map: 'jiangning',

        label: {

          emphasis: {

            show: false

          }

        },

        roam: false,

        // zoom: 0.8,

      },

      series: [{

        type: 'map',

        mapType: 'jiangning', //名称需要echarts.registerMap('jiangning',jiangningMap,{})中的名称一致

        zoom: 1,

        itemStyle: {

          normal: {

            areaColor: 'rgba(2,37,101,.5)',

            borderColor: 'rgba(112,187,252,.5)'

          },

          emphasis: {

            areaColor: 'rgba(2,37,101,.8)',

          }

        },

        label: {

          show: true,

          color: '#ffff'

        }, //显示文字

        roam: true,

        data: [],

      },],

    }

    jiangningMapChart.setOption(option, true)

    window.addEventListener('resize', function () {

      jiangningMapChart.resize()

    })

  }

  jiangningChart()

})

jiangningMap.js的内容

 

 遇到的问题：

在地图显示上，秣陵街道和谷里街道交界处有一块空白，在bigemap中下载的数据好像不全，未解决，如有大佬看到，还望指点一二，感谢！

最后

参考文章：

解决如何整理出乡镇级的地图json，以此使用echarts绘制出乡镇级的地图数据（国家级、省级、市级的地图信息也可以获取）_ぃ陌上烟雨的博客-CSDN博客_乡镇地图json

 解决如何整理出乡镇级的地图json，以此使用echarts绘制出乡镇级的地图数据（国家级、省级、市级的地图信息也可以获取）_ぃ陌上烟雨的博客-CSDN博客_乡镇地图json