Vue+Echart实现舆图省市区三级下钻

接纳在线舆图数据，团体简约，扩展也方便
参考

1. <template>
2.     <div>
4.         <div ref="mapContainer" style="width: 100%; height: 600px;"></div>
5.         <button @click="goBack">返回上一级</button>
6.     </div>
7. </template>
9. <script>
10. import * as echarts from 'echarts';
11. import axios from 'axios';
12. import router from '../router';
14. export default {
15.     name: 'ChinaMap',
16.     data() {
17.         return {
18.             currentLevel: 'china',  // 当前显示的地图层级
19.             levelStack: [],          // 地图层级栈
20.             coordinates: [          // 标记点坐标
21.                 { name: '北京', value: [116.405285, 39.904989] },
22.                 { name: '上海', value: [121.473701, 31.230416] }
23.             ]
24.         };
25.     },
26.     mounted() {
27.         this.loadMapData();
28.     },
29.     watch: {
30.         '$route.query.code': function () {
31.             // 当路由参数变化时重新加载地图数据
32.             this.loadMapData();
33.         }
34.     },
35.     methods: {
36.         goBack() {
37.             router.push({ query: { code: this.$route.query.fromCode } });
38.         },
39.         async loadMapData() {
40.             try {
41.                 const adcode = this.$route.query.code || '100000';  // 默认加载中国地图
43.                 // 获取 geoJSON 数据
44.                 const response = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`);
45.                 const chinaGeoJson = response.data;
47.                 // 注册地图
48.                 echarts.registerMap(adcode, chinaGeoJson);
50.                 // 提取 adcode 映射表
51.                 const adcodeMap = this.extractAdcodeMap(chinaGeoJson);
53.                 // 初始化 ECharts 实例
54.                 const chart = echarts.init(this.$refs.mapContainer);
56.                 // 配置项
57.                 const option = {
58.                     title: {
59.                         text: '中国地图',
60.                         left: 'center'
61.                     },
62.                     tooltip: {
63.                         trigger: 'item',
64.                         formatter: function (params) {
65.                             const adcode = adcodeMap[params.name] || '未知';
66.                             return `${params.name}<br>adcode: ${adcode}`;
67.                         }
68.                     },
69.                     visualMap: {
70.                         min: 0,
71.                         max: 100000,
72.                         text: ['High', 'Low'],
73.                         calculable: true
74.                     },
75.                     series: [
76.                         {
77.                             name: '数值',
78.                             type: 'map',
79.                             map: adcode,  // 使用 adcode 作为地图名称
80.                             roam: true,
81.                             itemStyle: {
82.                                 areaColor: '#d3d3d3',  // 默认区域颜色
83.                                 borderColor: '#111',   // 边框颜色
84.                                 borderWidth: 1         // 边框宽度
85.                             },
86.                             emphasis: {
87.                                 focus: 'self',
88.                                 itemStyle: {
89.                                     areaColor: '#f4e925'  // 高亮颜色
90.                                 }
91.                             },
92.                             data: [
93.                                 { name: '北京市', value: 500, adcode: '110000' },
94.                                 { name: '上海市', value: 11300, adcode: '310000' },
95.                                 { name: '云南省', value: 300, adcode: '530000' },
96.                                 { name: '广东省', value: 300, adcode: '440000' },
97.                                 // 其他省份的数据
98.                             ]
99.                         },
100.                     ]
101.                 };
103.                 // 使用配置项设置图表
104.                 chart.setOption(option);
106.                 // 监听点击事件
107.                 chart.on('click', (params) => {
108.                     const adcode = adcodeMap[params.name];
109.                     if (adcode) {
110.                         this.levelStack.push(this.currentLevel);  // 记录当前层级
111.                         this.currentLevel = adcode;  // 更新当前层级
112.                         router.push({ query: { code: adcode, fromCode: this.$route.query.code } });
113.                     }
114.                 });
115.             } catch (error) {
116.                 console.error('Failed to load map data:');
117.             }
118.         },
120.         extractAdcodeMap(geoJson) {
121.             const adcodeMap = {};
122.             geoJson.features.forEach(feature => {
123.                 const name = feature.properties.name;
124.                 const adcode = feature.properties.adcode;
125.                 if (name && adcode) {
126.                     adcodeMap[name] = adcode;
127.                 }
128.             });
129.             return adcodeMap;
130.         }
131.     }
132. }
133. </script>

复制代码

结果

省级

市级

县级

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金