echarts实现镇区地图效果

痛定思痛。 2022-10-09 14:30 277阅读 0赞

### **内容简介** ###

echarts官方只提供全国地图，但是实际项目过程中，经常需要精确到镇区；本文通过实例介绍两种实现镇区地图效果的方法**。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

### **自定义地图** ###

第一种的实现过程：

1. 打开网址“http://datav.aliyun.com/tools/atlas”，显示如下图的效果；

2. 左上角输入要生成的区域名字，比如“揭阳市”，输入“揭阳市”后，输入框下面会出现揭阳市的信息，点击后下面的信息和地图会更新为揭阳市的内容；

3. 根据项目实际情况，下载相对应类型的文件，该实例选择“geojson”，包含子区域。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

第二种的实现过程：

1. 使用工具“BIGEMAP”生成每个区域的kml文件，选择行政区域后点击红色框的箭头就可以保存该区域的kml文件；

延伸：如果需要实现镇区以下，可以选择到第四个下拉框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

2. 打开网址“http://geojson.io”，点击“open-file”选择生成的kml文件，地图显示对应的区域，右边json自动生成数据；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

3. 重复步骤1-2，把其它区域全部导入，最终效果如下；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

4. 图中“json”就是我们需要的数据，另存为json文件到本地。

注意：

引用后经常会出现错误“echarts.min.js:45 Uncaught Error: Invalid geoJson format”，这个错误是部分区域的格式不对；下图为正确的格式，且错误的格式一般都是红色框的位置；

![20210625102609533.jpg][]

比如第二种方法生成的json，就报了上面的问题，只需要修改下图地方就可以解决（错误的格式是数组，删掉前面，只保存最后一个值）；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

### **在自定义地图上实现图表效果** ###

实现代码如下，主要分析几个重点：

1. series下的data的属性“name”要跟json的“name”对应；

2. 有时候区域名称未显示在该区域的最中间，可以修改json里面的字段“cp”，如果没有该字段可自己添加。

Tips：“jy.json”即为上面两种方法生成的数据。

<!DOCTYPE html>
    <html style="height: 100%">
    
    <head>
      <meta charset="utf-8">
    </head>
    
    <body style="height: 100%; margin: 0">
      <div id="container" style="height: 100%; background-color: #eee;"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
      
      <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      var option;
      myChart.showLoading();
      $.get('jy.json', function(geoJson) {
        myChart.hideLoading();
        echarts.registerMap('jy', geoJson);
        myChart.setOption(option = {
          title: {
            text: '全市办件量分布图'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (件)'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          visualMap: {
            min: 800,
            max: 50000,
            showLabel: !0,
            left: 26,
            bottom: 40,
            text: ['高', '低'],
            pieces: [{
                gt: 2000,
                label: "> 2000",
                color: "#7f1100"
            }, {
                gte: 1500,
                lte: 2000,
                label: "1500 - 2000",
                color: "#ff5428"
            }, {
                gte: 1000,
                lt: 1500,
                label: "1000 - 1500",
                color: "#ff8c71"
            }, {
                value: 0,
                color: "#ffffff"
            }]
          },
          series: [{
            name: '全市办件量分布图',
            type: 'map',
            mapType: 'jy', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff'
            },
            data: [
              { name: '榕城区', value: 2000 },
              { name: '揭东区', value: 2500 },
              { name: '揭西县', value: 1200 },
              { name: '惠来县', value: 1600 },
              { name: '普宁市', value: 1300 }
            ]
          }]
        });
      });
    
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    </script>
    </body>
    
    </html>

### **注意事项** ###

可使用网站“http://api.map.baidu.com/lbsapi/getpoint/index.html”进行坐标拾取。

![20210625104033955.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20221005/cec8a61817074ac6968c5a23995bad27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20221005/9eee0d1cf2504c6096f85fa84833e954.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20221005/7fa529848d444976aefc81d95dd4ef6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20221005/d9ae8b8bf62c4c94880bf7d062f3aa0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20221005/8810727e7d544f34b3cf8a64f078e278.png
[20210625102609533.jpg]: /images/20221005/31c65ffdd50044f7b4d4b3d1f3d893d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20221005/79c75ef92b5445eab92eac543578baaa.png
[20210625104033955.jpg]: /images/20221005/4892ef0ea6564a6bb6105248f9c61e3f.png