echarts地图-地图geoJson获取以及用标记方式实现乡镇级地图

遇到一个需求，需要展示一个区县地图，同时鼠标移入还能看各个乡镇的数据。我找了很久都没有找到乡镇级的 geoJson, 最多只找到区县级，区县级 json 获取地址如下：

DataV.GeoAtlas 地理小工具系列

但是鼠标移入展示乡镇数据，如何实现呢？虽然我后面通过朋友拿到了乡镇级的 json 数据，但是太麻烦了最后还是决定用添加标记的方法来实现。如果想要乡镇数据可以私我。

实现思路：

1、下载区县 json

2、获取乡镇经纬度

获取乡镇经纬度可以到各种网站上找，比如百度地图，高德地图等。我是在这个地址上找的

免费下载实时更新的 geoJson 数据、行政区划边界数据、区划边界坐标集合__HashTang (hxkj.vip)

3、配置 option

const initChartMap = () => {if (mapChart.value) {echarts.registerMap("basu", mapJosn);
    const data_map_data = [
      {
        name: "湛普镇",
        coord: [96.511013, 30.396193],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "龙孔镇",
        coord: [96.965057, 29.881027],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "吉中乡",
        coord: [97.299092, 30.534268],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "郭庆乡",
        coord: [96.564165, 30.871071],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "帮达镇",
        coord: [97.188908, 30.108502],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "然乌镇",
        coord: [96.774863, 29.59903],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "拥巴乡",
        coord: [96.398919, 30.682171],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "拉根乡",
        coord: [97.015527, 30.184798],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "白玛镇",
        coord: [96.792551, 30.18467],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "瓦乡",
        coord: [96.635502, 30.180611],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "益庆乡",
        coord: [97.213848, 30.657963],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "卡瓦白庆乡",
        coord: [96.854166, 30.253626],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "同卡镇",
        coord: [96.411964, 30.671348],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
      {
        name: "吉达乡",
        coord: [96.632878, 29.6135],
        area: 5000,
        people: 2000,
        economy: 3000,
      },
    ];
    const option = {
      tooltip: {
        trigger: "item",
        formatter: function (params) {if (params.data) {return `${params.data.name}
 区域面积:${params.data.area}km²
人口数量:${params.data.people}人 
 经济总量:${params.data.economy}万 `;
          }
          return params.name;
        },
      },

      series: [
        {
          name: "",
          type: "map",
          mapType: "basu",
          zoom: 1,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
            },
          },
          roam: true,
          itemStyle: {
            normal: {areaColor: "rgba(7,157,233,0.4)",
              borderColor: "#ddd",
            },
            emphasis: {areaColor: "#3093d8",},
          },
          markPoint: {
            symbol: "circle",
            symbolSize: 10,

            label: {
              show: true,
              fontSize: "1rem",
              color: "#fff",
              formatter: function (d) {return d.name;},
            },
            data: data_map_data,
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。mapChart.value.setOption(option);
  }
};

效果图如下：