菜单 搜索
首页 前端知识 如何在 Vue3 中结合 ECharts 实现交互式的中国地图钻取功能

如何在 Vue3 中结合 ECharts 实现交互式的中国地图钻取功能

2024-08-18 22:08:52 前端知识 前端哥 128 513 我要收藏

在许多业务场景中，我们需要展示与地理位置相关的数据。本文将详细介绍如何在 Vue3 中结合 ECharts 库来实现一个可交互的中国地图，并支持用户通过点击地图上的省份来查看更详细的地区数据。

实现效果

29fe8a114050403d8748ac7ac513681d.png807a9f33b6fc433d92411cb4193681d6.png

 

最终的效果是：用户可以点击中国地图上的任意省份，然后页面会展示该省份的详细信息；同时提供一个“返回”按钮，用户可以点击它回到初始的中国地图视图。

技术栈

  • Vue.js 3：用于构建前端应用程序。
  • ECharts：用于数据可视化。
  • Fetch：用于请求本地JSON文件。

步骤详解

1. 模板定义

在 Vue3 组件的模板中定义一个用于显示地图的容器和一个返回按钮。

<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div id="map" ref="mapRef" style="width: 100%; height: 400px" />
    <span v-if="isBack" class="go-back" @click="gotoParent">返回</span>
  </div>
</template>

2. 请求省份 JSON 数据

使用Fetch加载中国省份的地图数据（GeoJSON 格式）。

async function fetchMapJson(adcode) {
  // 使用 fetch 加载 JSON 文件
  const response = await fetch("/json/map/" + adcode + ".json");
  mapJsonData.value = await response.json();
}

3. 注册地图数据

使用 ECharts 的 registerMap 方法来注册地图数据。

// 注册地图数据
function handleRegisterMap(regionName) {
  mapChart.value = echarts.init(mapRef.value); // 初始化地图
  echarts.registerMap(regionName, mapJsonData.value);
  const option = {
    geo: {
      map: regionName,
      roam: true,
      label: {
        normal: { show: false },
        emphasis: { show: true },
      },
      itemStyle: {
        normal: {
          areaColor: "#2B91B7",
          borderColor: "#111",
        },
        emphasis: {
          areaColor: "#0489d6",
        },
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        map: regionName,
        data: [], // 这里可以填充省份数据
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#2B91B7",
            borderColor: "#aaa",
          },
          emphasis: {
            areaColor: "#0489d6",
          },
        },
      },
    ],
  };

  mapChart.value.setOption(option);
}

4. 添加省份点击事件

// 添加省份点击事件
let returnArray = ref([]);
const handleClickMap = async (params) => {
  if (params.componentType === "geo" && params.name !== "") {
    // 查找地理编码
    let adcode = null;
    const features = mapJsonData.value.features;
    const filterArray = features.filter((item) => {
      return item.properties.name === params.name;
    });
    if (filterArray && filterArray.length > 0) {
      adcode = filterArray[0].id;
    }
    const regionName = params.name;
    if (adcode) {
      isBack.value = true;
      await fetchMapJson(adcode);
      returnArray.value.push({
        adcode: adcode,
        regionName: regionName,
        mapJsonData: JSON.stringify(mapJsonData.value),
      });
      // 清除当前地图选项
      mapChart.value.clear();
      // 刷新地图实例
      mapChart.value.resize();

      handleRegisterMap(regionName);
    }
  } else if (params.componentType === "series") {
    // 点击的数据
    const data = params.data;
    console.log("data", data);
  }
};

5. 初始化中国地图

设置 ECharts 实例，并配置地图的基本选项。

let chinaJsonData = ref({}); // 中国地图数据
onMounted(async () => {
  // 使用 fetch 加载 JSON 文件
  await fetchMapJson(100000);
  chinaJsonData.value = mapJsonData.value; // 先保留中国地图json
  handleRegisterMap("china");
  isBack.value = false;
  returnArray.value.push({
    adcode: 100000,
    regionName: "china",
    mapJsonData: JSON.stringify(chinaJsonData.value),
  });
  mapChart.value.on("click", handleClickMap);
  window.addEventListener("resize", () => {
    mapChart.value.resize();
  });
});

6. 返回上级

实现返回按钮的功能，当点击返回时可以返回它的上一级，直至中国地图。

// 返回上级
async function gotoParent() {
  if (isBack.value) {
    if (returnArray.value.length > 0) {
      returnArray.value.pop();
      let backMap = returnArray.value.slice(-1);
      if (backMap && backMap.length > 0) {
        mapJsonData.value = JSON.parse(backMap[0].mapJsonData);
        // 清除当前地图选项
        mapChart.value.clear();
        // 刷新地图实例
        mapChart.value.resize();
        handleRegisterMap(backMap[0].regionName);
        if (backMap[0].adcode == 100000) {
          isBack.value = false;
          returnArray.value = [
            {
              adcode: 100000,
              regionName: "china",
              mapJsonData: JSON.stringify(chinaJsonData.value),
            },
          ];
        }
      }
    } else {
      isBack.value = false;
    }
  }
}

完整代码

为了便于理解，以下是完整的组件代码示例：

<template>
  <div style="position: relative; width: 100%; height: 100%">
    <div id="map" ref="mapRef" style="width: 100%; height: 400px" />
    <span v-if="isBack" class="go-back" @click="gotoParent">返回</span>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";

const mapRef = ref(null);
let mapJsonData = ref({});
let mapChart = ref(null);
let isBack = ref(false); // 加标记，是否返回上一级

// 根据地理编号请求json数据
async function fetchMapJson(adcode) {
  // 使用 fetch 加载 JSON 文件
  const response = await fetch("/json/map/" + adcode + ".json");
  mapJsonData.value = await response.json();
}

// 注册地图数据
function handleRegisterMap(regionName) {
  mapChart.value = echarts.init(mapRef.value); // 初始化地图
  echarts.registerMap(regionName, mapJsonData.value);
  const option = {
    geo: {
      map: regionName,
      roam: true,
      label: {
        normal: { show: false },
        emphasis: { show: true },
      },
      itemStyle: {
        normal: {
          areaColor: "#2B91B7",
          borderColor: "#111",
        },
        emphasis: {
          areaColor: "#0489d6",
        },
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        map: regionName,
        data: [], // 这里可以填充省份数据
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        itemStyle: {
          normal: {
            areaColor: "#2B91B7",
            borderColor: "#aaa",
          },
          emphasis: {
            areaColor: "#0489d6",
          },
        },
      },
    ],
  };

  mapChart.value.setOption(option);
}

// 添加省份点击事件
let returnArray = ref([]);
const handleClickMap = async (params) => {
  if (params.componentType === "geo" && params.name !== "") {
    // 查找地理编码
    let adcode = null;
    const features = mapJsonData.value.features;
    const filterArray = features.filter((item) => {
      return item.properties.name === params.name;
    });
    if (filterArray && filterArray.length > 0) {
      adcode = filterArray[0].id;
    }
    const regionName = params.name;
    if (adcode) {
      isBack.value = true;
      await fetchMapJson(adcode);
      returnArray.value.push({
        adcode: adcode,
        regionName: regionName,
        mapJsonData: JSON.stringify(mapJsonData.value),
      });
      // 清除当前地图选项
      mapChart.value.clear();
      // 刷新地图实例
      mapChart.value.resize();

      handleRegisterMap(regionName);
    }
  } else if (params.componentType === "series") {
    // 点击的数据
    const data = params.data;
    console.log("data", data);
  }
};

// 返回上级
async function gotoParent() {
  if (isBack.value) {
    if (returnArray.value.length > 0) {
      returnArray.value.pop();
      let backMap = returnArray.value.slice(-1);
      if (backMap && backMap.length > 0) {
        mapJsonData.value = JSON.parse(backMap[0].mapJsonData);
        // 清除当前地图选项
        mapChart.value.clear();
        // 刷新地图实例
        mapChart.value.resize();
        handleRegisterMap(backMap[0].regionName);
        if (backMap[0].adcode == 100000) {
          isBack.value = false;
          returnArray.value = [
            {
              adcode: 100000,
              regionName: "china",
              mapJsonData: JSON.stringify(chinaJsonData.value),
            },
          ];
        }
      }
    } else {
      isBack.value = false;
    }
  }
}

let chinaJsonData = ref({}); // 中国地图数据
onMounted(async () => {
  // 使用 fetch 加载 JSON 文件
  await fetchMapJson(100000);
  chinaJsonData.value = mapJsonData.value; // 先保留中国地图json
  handleRegisterMap("china");
  isBack.value = false;
  returnArray.value.push({
    adcode: 100000,
    regionName: "china",
    mapJsonData: JSON.stringify(chinaJsonData.value),
  });
  mapChart.value.on("click", handleClickMap);
  window.addEventListener("resize", () => {
    mapChart.value.resize();
  });
});
onBeforeUnmount(() => {
  // 移除地图点击事件监听器
  mapChart.value.off("click", handleClickMap);
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 400px;
}
.go-back {
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9999;
  cursor: pointer;
  color: #36cfff;
}
</style>

总结

通过上述步骤，您可以在 Vue3 应用中实现一个交互式的中国地图，支持省份点击和返回功能。

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16123.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个

2024-06-19 08:06:22

HTML浏览CAD（WEB CAD）二次开发常用的CAD编辑功能的详细教程

2024-08-25 23:08:25

HTML5 解决方案：面向 HTML5 开发者的基本技巧（一）

2024-08-25 23:08:50

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码

2024-08-25 23:08:37

HTML5简明教程系列之HTML5基础（一）

2024-08-25 23:08:55

手把手教你用Go开发客户端软件（使用Go HTML）

2024-08-25 23:08:52

第7节课：CSS基础与选择器——打造网页视觉魅力

2024-08-25 23:08:52

基于HTML美食餐饮文化项目的设计与实现 HTML CSS上海美食介绍网页(8页) 大学生美食文化网站制作 简单餐饮文化网页设计成品

2024-05-05 21:05:49

【HTML CSS】在HTML中优雅地展示图片：技巧与实践

2024-08-25 23:08:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！