地图下钻

地图下钻概念：

具体步骤：
首先搭建项目：

    npm create vue

创建路由：

1. 在router文件夹中，index.ts文件

   import { createRouter, createWebHistory } from 'vue-router'
   const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
    {
      path: '/',
      redirect: "/map"
    },
    // 地图下钻路由
    {
      path: '/map',
      name: 'map',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/Map/index.vue')
    }
     ]
   })
   
   export default router

2. 在views文件中创建 vue文件名
   

3. 创建基本结构，写一个大盒子创建画布

   <script setup lang="ts">
   
   </script>
   
   <template>
    <!-- 地图下钻 -->
    <div class="map">
   
    </div>
   </template>
   
   <style scoped>
   /* 设置宽高 */
   .map {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin: 0 auto;
   }
   </style>

4. 下载 echarts插件 官网：https://echarts.apache.org/zh/index.html

   npm install echarts

5. 引入vue 解构 ref(创建ref获取dom) 和 onMounted（在onMounted中获取dom标签）

   // 引入vue
   import { ref, onMounted } from "vue"
   // 引入echarts
   import * as echarts from "echarts"
   
   // 定义ref获取dom元素
   const map = ref()
   
   // 获取dom元素
   onMounted(() => {
    console.log(map.value);
   
   })
   
   
    <div class="map" ref="map">
   
    </div>

   

6. 引入echarts 并初始化
   
   
7. 定义options数据： 仿照案例https://echarts.apache.org/examples/zh/editor.html?c=map-HK

首先下载axios

npm install axios

引入并访问接口数据
官网：https://datav.aliyun.com/portal/school/atlas/area_selector

// 二次封装后的axios
import instance from "./index";

// 获取地图数据
export const mapData = () => {
    return instance.get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json")
}

8. 完整代码

<script setup lang="ts">
//  引入图表
import Charts from '@/components/charts.vue';
// 引入options数据
import { MapOptions } from "@/utils/option"
import * as  echarts from 'echarts';
import 'echarts-gl'; // 3D

// 引入vue
import { ref, onMounted } from "vue"
// 引入城市数据请求方法
import { getCityCode } from "@/api/index"

// 定义domref
const mycharts = ref()
// 定义城市编码
let code = 100000;
// 定义城市名称
let cityName = ref('china')
// 定义option数据
let option = ref({
    title: {

    },
    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,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    grid: {
        bottom: 20,
    },
    series: [
        {
            name: '中国地图',
            type: 'map',
            map: cityName.value,
            zoom: 1.6, // 缩放
            // 设置鼠标滚动会导致地图下钻的时候偏移
            // roam: true,// 滚返
            // 地图位置
            left: 150,
            top: 100,
            // center: [100, 35],
            label: {
                // show: true
            },
            data: [
                {
                    name: "北京市",
                    value: 999999
                }
            ],
            // 样式
            itemStyle: {
                areaColor: "#00bf",
                normal: {
                    areaColor: "#00b9ff",
                    borderColor: "#000",
                    borderWidth: 0.5
                },

                emphasis: {
                    areaColor: "#fcc",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 5,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            },
            // 自定义名称映射
            nameMap: {}
        }
    ]
})

// 获取dom
onMounted(async () => {
    // 初始化echarts图表
    const charts = echarts.init(mycharts.value)
    // 请求城市数据
    let cityData = await getCityCode(code)

    // 注册地图
    echarts.registerMap(cityName.value, cityData)
    // 显示颜色
    option.value.series[0].data[1] = {
        name: "河北省",
        value: 36520,
    }
    console.log(cityData);

    // 调用option数据
    charts.setOption(option.value)
    // 取消点击事件
    charts.off("click")
    // 图表点击事件
    charts.on('click', (params) => {
        console.log(params.name, 6666666);
        // 解构name
        const { name } = params
        // 根据name进行查找城市的编码
        const city = cityData.features.find((item: any) => item.properties.name === name)
        // debugger
        // console.log('城市信息', city);
        // 城市名称赋值
        cityName.value = name
        // 城市编码重新赋值
        code = city.properties.adcode
        // console.log(cityName, code, 888888888);
        // 更改option中的城市名称
        option.value.series[0].map = cityName.value
        // 更改图形大小 和 位置s
        option.value.series[0].zoom = 1 // 大小
        option.value.series[0].top = 60 // 距离顶部的距离
        option.value.series[0].left = 80 // 距离左侧的距离
        option.value.series[0].roam = true // 允许滚轮事件 根据鼠标滚动实现放大缩小偏移
        // adcode
        // 再次发送请求
        getCityCode(city.properties.adcode).then(res => {
            // console.log(res, 66666666666);
            // 数据重新赋值
            cityData = res
            // 重新注册地图
            echarts.registerMap(name, res)
            // console.log(option.value);
            // 调用option数据
            charts.setOption(option.value)
        })


    })


})

// let url = "https://geo.datav.aliyun.com/areas_v3/bound/513332_full.json";
// let urls = "https://geo.datav.aliyun.com/areas_v3/bound/513332.json";

// axios.get(url).then((res) => {
//     console.log("Request successful", res, 555555);
// }).catch((error) => {
//     console.log("Request error");
//     if (url.includes("_full")) {
//         url = url.split("_full").join("");
//         console.log(url);

//         axios.get(url).then((res) => {
//             console.log("New request successful", res, 79410);
//         }).catch((error) => {
//             console.log("New request error");
//         });
//     }
// });

// // 引入适配
// import useResize from "@/hook/Resize"

// // 调用适配方法
// useResize()
</script>


<template>
    <!-- 中上地图 -->
    <div class="center-top_container">
        <!-- ref="mycharts" -->
        <div class="charts" ref="mycharts">

        </div>
        <!-- <Charts :option="MapOptions" :geoJson?="geoJson"></Charts> -->
    </div>
</template>

<style scoped lang="scss">
.center-top_container {
    width: 100%;
    height: 60%;
    // border: 1px solid #cc0;
    position: relative;
    top: -60px;
    z-index: 999999999999;

    .charts {
        width: 100%;
        height: 100%;
        // position: absolute;
        z-index: 99999;
    }
}
</style>

9. 优化

地图下钻时产生的错误：
在请求县级城市的时候路径地址会发生改变,所以导致了请求错误，县级城市的路径没有_full
错误的径："https://geo.datav.aliyun.com/areas_v3/bound/513332_full.json"
正确的路径："https://geo.datav.aliyun.com/areas_v3/bound/513332.json";
解决方案：
使用axios 或 jquery 请求，先将路径存储到变量中，首先正常发送请求，利用axios 或 jquery 请求错误catch方法，在请求错误中进行下一步错误，首先判断错误的时候是否存在_full这个多余的路径，通过includes(是否包含)判断是否包含_full,如果包含利用字符串的split方法截取掉_full,重新赋值给定义的变量，最后在重新发送请求即可。
jquery

// 成功编码
export const getCityCode = (code: number) => {
    // console.log(code);
    // 定义路径
    let url = 'https://geo.datav.aliyun.com/areas_v3/bound/' + code + '_full.json'
    // 成功的请求
    return $.get({
        // https://geo.datav.aliyun.com/areas_v3/bound/513332.json
        url: url
        // res.header("Access-Control-Allow-Origin", "*"); 设置响应头，*表示任何地址都亦可以访问

    }).catch(err => { // 请求失败的路径
        // console.log(65555555, err);
        // 将错误的路径去掉
        if (url.includes('_full')) {
            // 截取到多余  并重新赋值
            url = url.split("_full").join('')
            // 再次方法请求
            return $.get({
                url
            })
        }

    })
}

Axios

import axios from 'axios';

// 定义一个函数getCityCode，接收一个参数code，用于获取城市代码
export const getCityCode = (code: number) => {
    // 构建请求URL
    let url = 'https://geo.datav.aliyun.com/areas_v3/bound/' + code + '_full.json';

    // 发送GET请求
    return axios.get(url)
        .then((res) => {
            // 请求成功时打印日志并返回响应数据
            console.log("Request successful");
            return res.data;
        })
        .catch((err) => {
            // 请求失败时打印错误日志
            console.log("Request error:", err);

            // 如果URL中包含'_full'，则去掉'_full'重新发送请求
            if (url.includes('_full')) {
                url = url.split("_full").join('');
                return axios.get(url);
            }
        });
}