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

碰到一个需求，需要展示一个区县舆图，同时鼠标移入还能看各个乡镇的数据。我找了很久都没有找到乡镇级的geoJson,最多只找到区县级，区县级json获取地点如下：
DataV.GeoAtlas地理小工具系列

但是鼠标移入展示乡镇数据，如何实现呢？虽然我背面通过朋友拿到了乡镇级的json数据，但是太贫困了末了还是决定用添加标记的方法来实现。假如想要乡镇数据可以私我。
实现思绪：
1、下载区县json
2、获取乡镇经纬度
获取乡镇经纬度可以到各种网站上找，好比百度舆图，高德舆图等。我是在这个地点上找的
免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang (hxkj.vip)

3、配置option

1. const initChartMap = () => {
2.   if (mapChart.value) {
3.     echarts.registerMap("basu", mapJosn);
4.     const data_map_data = [
5.       {
6.         name: "湛普镇",
7.         coord: [96.511013, 30.396193],
8.         area: 5000,
9.         people: 2000,
10.         economy: 3000,
11.       },
12.       {
13.         name: "龙孔镇",
14.         coord: [96.965057, 29.881027],
15.         area: 5000,
16.         people: 2000,
17.         economy: 3000,
18.       },
19.       {
20.         name: "吉中乡",
21.         coord: [97.299092, 30.534268],
22.         area: 5000,
23.         people: 2000,
24.         economy: 3000,
25.       },
26.       {
27.         name: "郭庆乡",
28.         coord: [96.564165, 30.871071],
29.         area: 5000,
30.         people: 2000,
31.         economy: 3000,
32.       },
33.       {
34.         name: "帮达镇",
35.         coord: [97.188908, 30.108502],
36.         area: 5000,
37.         people: 2000,
38.         economy: 3000,
39.       },
40.       {
41.         name: "然乌镇",
42.         coord: [96.774863, 29.59903],
43.         area: 5000,
44.         people: 2000,
45.         economy: 3000,
46.       },
47.       {
48.         name: "拥巴乡",
49.         coord: [96.398919, 30.682171],
50.         area: 5000,
51.         people: 2000,
52.         economy: 3000,
53.       },
54.       {
55.         name: "拉根乡",
56.         coord: [97.015527, 30.184798],
57.         area: 5000,
58.         people: 2000,
59.         economy: 3000,
60.       },
61.       {
62.         name: "白玛镇",
63.         coord: [96.792551, 30.18467],
64.         area: 5000,
65.         people: 2000,
66.         economy: 3000,
67.       },
68.       {
69.         name: "瓦乡",
70.         coord: [96.635502, 30.180611],
71.         area: 5000,
72.         people: 2000,
73.         economy: 3000,
74.       },
75.       {
76.         name: "益庆乡",
77.         coord: [97.213848, 30.657963],
78.         area: 5000,
79.         people: 2000,
80.         economy: 3000,
81.       },
82.       {
83.         name: "卡瓦白庆乡",
84.         coord: [96.854166, 30.253626],
85.         area: 5000,
86.         people: 2000,
87.         economy: 3000,
88.       },
89.       {
90.         name: "同卡镇",
91.         coord: [96.411964, 30.671348],
92.         area: 5000,
93.         people: 2000,
94.         economy: 3000,
95.       },
96.       {
97.         name: "吉达乡",
98.         coord: [96.632878, 29.6135],
99.         area: 5000,
100.         people: 2000,
101.         economy: 3000,
102.       },
103.     ];
104.     const option = {
105.       tooltip: {
106.         trigger: "item",
107.         formatter: function (params) {
108.           if (params.data) {
109.             return `<span style='font-family:MiSans-Bold'>${params.data.name}</span><br/> 区域面积:${params.data.area}km²<br/>人口数量:${params.data.people}人<br/>经济总量:${params.data.economy}万`;
110.           }
111.           return params.name;
112.         },
113.       },
115.       series: [
116.         {
117.           name: "",
118.           type: "map",
119.           mapType: "basu",
120.           zoom: 1,
121.           label: {
122.             normal: {
123.               show: true,
124.               textStyle: {
125.                 color: "#fff",
126.                 fontSize: "16",
127.               },
128.             },
129.             emphasis: {
130.               show: true,
131.               textStyle: {
132.                 color: "#fff",
133.                 fontSize: "16",
134.               },
135.             },
136.           },
137.           roam: true,
138.           itemStyle: {
139.             normal: {
140.               areaColor: "rgba(7,157,233,0.4)",
141.               borderColor: "#ddd",
142.             },
143.             emphasis: {
144.               areaColor: "#3093d8",
145.             },
146.           },
147.           markPoint: {
148.             symbol: "circle",
149.             symbolSize: 10,
151.             label: {
152.               show: true,
153.               fontSize: "1rem",
154.               color: "#fff",
155.               formatter: function (d) {
156.                 return d.name;
157.               },
158.             },
159.             data: data_map_data,
160.           },
161.         },
162.       ],
163.     };
164.     // 使用刚指定的配置项和数据显示图表。
165.     mapChart.value.setOption(option);
166.   }
167. };

复制代码

效果图如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。