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 `<span style='font-family:MiSans-Bold'>${params.data.name}</span><br/> 区域面积:${params.data.area}km²<br/>人口数量:${params.data.people}人<br/>经济总量:${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);
  }
};复制

效果图如下：