使用Vue3+Echarts实现加载中国地图,点击省份地图下钻(完整教程)

一. 前言

在众多 ECharts 图表类型中,开发者始终绕不开的有各种各样的地图开发,关于地图开发,可能比其他图表相对繁琐一些,其实说简单也简单,说复杂也复杂,其中不乏有层级地图、3D 地图等,感觉地图开发已经被玩出了花。

在 ECharts 地图开发中,地图下钻功能是重要的基础功能,将来能为数据分析和展示提供更加直观和有效的方式。本篇文章,我将会介绍如何利用 ECharts 实现一个完整的地图下钻功能,让用户能够通过点击地图上的区域来实现层级的切换和数据的展示。

二. 什么是地图下钻功能?

地图下钻(Drill-down)是一种常见的高级交互功能,可以使用户能够深入地图的不同层级,查看更加详细的地理数据,帮助用户逐层深入地查看不同区域或层级的数据分布情况,极大地增强了数据可视化的深度和用户体验。

地图下钻功能是指在地图上点击某个区域后,该区域会进一步细化展示其下一级别的区域信息,例如:从省级地图下钻到市级地图,再到区县级地图,这种逐级细化的过程有助于我们更细致地分析和理解地域数据。例如下面这种效果:

通过地图下钻功能,用户可以通过交互操作深入地图的不同层级,从整体的地图层级逐渐细化到更具体的区域层级,用户可以更深入地了解地理数据,探索不同区域的数据细节,并进行更精确的数据分析和决策。这种交互式的地图功能可以极大地增强用户与数据之间的互动性和可视化体验,提升数据分析和展示的效果。

在 ECharts 中实现地图下钻功能,通常需要通过配置点击事件,根据用户点击的区域进行数据更新,从而实现地图的层级切换和展示。地图下钻功能广泛应用于各种数据可视化场景,如地理信息系统区域销售分析人口统计等领域,帮助用户更好地理解和利用地理数据。

三. 如何在 ECharts 中实现地图下钻?

如何在 ECharts 中实现地图下钻?我总结为以下 4 个步骤:

  1. 准备地图数据
  2. 初始化 ECharts 地图
  3. 设置地图下钻事件监听器
  4. 实现地图下钻

在进行地图下钻功能之前,我们需要先实例化一个最基础的中国地图,为地图下钻做准备。之前我写过一篇文章,讲述如何快速的创建一个合规的中国地图。

在这里,我们简单的总结一下,完成两步就可以渲染一个中国地图。

1. 准备地图数据

首先,我们需要准备多层级的地图数据,比如国家、省份、城市等各级别的地理数据,以及每个区域对应的数据指标,这些数据通常是以 JSON 格式提供的地理信息数据。同时,确保数据格式符合 ECharts 的要求,可以参考官方文档了解各种地图类型的数据格式。

我们可以在一些其他网站获取最新的 geoJson,比如:我是通过阿里云 DataV 数据可视化平台下载最新的 json 数据文件,以保证目前所有市区的数据都是最新的。

如下图所示,选择数据版本后,点击页面上的下载按钮后即可以下载 json 文件:

image.png

本地调试也可以使用在线的 JSON API 接口获取数据,不过仅限于本地测试使用!线上会 403 错误

解决 403 问题,参考文章:巧用 meta 标签,设置 referrer 解决 403 Forbidden 问题

2. 初始化 ECharts 地图

在 ECharts 的配置项中,配置地图组件并设置合适的地图类型(如中国地图、世界地图等),以及需要展示的数据和样式,确保每个区域都有对应的数据用于显示。

四. 实现地图下钻

实现地图下钻的关键逻辑在于:为地图添加点击事件监听器,当用户点击地图上的某个区域时,触发相应的事件处理函数,根据点击的区域获取下一级别的地图数据并更新图表。

实例场景:比如,我点击山东省,可以查看山东省下各市级地图,点击青岛市,进而查看青岛市下各区级地图。

实现逻辑

  • 当用户点击某个区域时,例如:山东省,获取到该区域对应的编码。

  • 通过该区域对应的编码,获取到该区域的 geoJson 数据。

  • 通过该区域的 geoJson 数据,渲染到 ECharts 地图组件上。

接下来我们一步一步进行分析。

1. 获取区域编码

首先需要给地图添加点击事件监听器,当用户点击地图时,获取到用户点击该区域对应的编码。

 

地图下钻 3.gif

如图所示,通过上述的操作,我们能够轻松的获取到该区域的地理编码 adcode 和名称。

2. 获取点击区域地图 JSON 数据

获取到地理编码 adcode 和名称之后,接下来需要通过 adcode 来获取子区域的 geoJson,以下的代码是通过调用阿里云 DataV 在线的 JSON API 接口获取到的数据。

注意:过调用阿里云 DataV 在线的 JSON API 接口获取到的数据,仅限于调试!线上会 403 错误,如果要上线,需要将各个区域的数据下载到本地加载。

3. 渲染区域地图

通过上述操作,我们成功的获取到了点击区域的子区域地图 JSON 数据,通过 JSON 数据,我们就可以动态的渲染区域地图了

五. 完善交互和效果

为提升用户体验,可以添加一些校验,避免在下钻过程中出现一些异常情况。比如:

  • 在地图下钻的最后一层,如何判断处理该地图是否还有下级区域,简单说就是是否还允许地图继续下钻?

  • 地图下钻过程过程中,我需要返回上一级地图,该如何实现?

以上这两个问题是在地图开发中必须要考虑的基础问题,下面我来分析一下如何优化这两种问题,提升用户体验。

1. 处理递归下钻

在事件处理函数中,根据用户点击的区域信息,判断是否需要进行下钻操作。如果需要下钻,才可以展示子区域的地图信息。如果已经到了地图最末端,无法再进行下钻,应该相应提示用户。

例如,当用户点击到区县级地图且无法再下钻时,可以考虑弹窗显示详细信息或者返回至上一级别。

2. 返回上一级地图

在用户点击地图进行下钻的过程中,难免会返回上一层进行重新点击的需求,这种需求应该怎么实现呢?下面我来具体分析一下:

  • 添加返回按钮,返回按钮显示隐藏逻辑处理,比如:仅当可以返回上一层地图级别的时候才显示返回
  • 记录地图下钻过程中的地图层级数据,比如:山东省 -> 青岛市 -> 崂山区
  • 根据记录的层级数据实现返回上一级操作
返回按钮的显示和隐藏

关于返回按钮的显示和隐藏,可以有多种判断方式,可以根据是否为初始化地图来判断,只有当前渲染为初始地图时,隐藏返回按钮,也可以根据记录地图的层级数据数组判断是否显示返回按钮。

下述代码是根据 adcode 来判断是否为初始地图,因为我是以中国地图为初始化地图,所以判断 adcode 是否等于 100000 来判断是否显示

以上只是一种思路,你可以考虑其他方式判断,合理即可!

3. 自定义 tooltip

加一些指向 tooltip 提示,当用用鼠标指向省市区时,显示省市区的名称、编码及层级数据。

完整代码:

<!--* @Author: 彭麒* @Date: 2024/12/5* @Email: 1062470959@qq.com* @Description: 此源码版权归吉檀迦俐所有,可供学习和借鉴或商用。-->
<template><div><h3>地图下钻演示:<span style="font-size: 20px;color: red;">目前仅支持四川省!!!</span></h3><a id="back" href="javascript:;" v-show="showBackButton" @click="goBack">返回</a><div id="main" style="height: 800px"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const showBackButton = ref(false);
const myChart = ref(null);
const mapList = ref([]);
//各省份的数据
const allData = [{name: '北京'
}, {name: '天津'
}, {name: '上海'
}, {name: '重庆'
}, {name: '河北'
}, {name: '河南'
}, {name: '云南'
}, {name: '辽宁'
}, {name: '黑龙江'
}, {name: '湖南'
}, {name: '安徽'
}, {name: '山东'
}, {name: '新疆'
}, {name: '江苏'
}, {name: '浙江'
}, {name: '江西'
}, {name: '湖北'
}, {name: '广西'
}, {name: '甘肃'
}, {name: '山西'
}, {name: '内蒙古'
}, {name: '陕西'
}, {name: '吉林'
}, {name: '福建'
}, {name: '贵州'
}, {name: '广东'
}, {name: '青海'
}, {name: '西藏'
}, {name: '四川'
}, {name: '宁夏'
}, {name: '海南'
}, {name: '台湾'
}, {name: '香港'
}, {name: '澳门'
}];
for (var i = 0; i < allData.length; i++) {allData[i].value = Math.round(Math.random() * 100);
}
const getJSON = async ({ name }, callback) => {console.log(name);const url = `/map/${name}.json`;try {const response = await fetch(url);if (!response.ok) {throw new Error('Network response was not ok');}const data = await response.json();callback(data);setBackbtn({ name });} catch (error) {alert('无此区域地图显示,请查看其他区域!');}
};const setBackbtn = ({ name }) => {mapList.value.push({ name });showBackButton.value = name !== 'china';console.log(JSON.stringify(mapList.value));
};const goBack = () => {if (mapList.value.length >= 2) {const { name } = mapList.value[mapList.value.length - 2];mapList.value.splice(-2, 2);getJSON({ name }, (data) => {renderChart(name, data);});}
};const initChinaMap = () => {mapList.value = [];getJSON({ name: 'china' }, (data) => {renderChart('china', data);});
};const renderChart = (name, data) => {echarts.registerMap(name, data);setOption(name, allData);
};const setOption = (name, data) => {const option = {tooltip: {show: true,formatter: function(params) {if (params.data) return params.name + ':' + params.data['value']},},visualMap: {type: 'continuous',text: ['', ''],showLabel: true,left: '50',min: 0,max: 100,inRange: {color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]},splitNumber: 0},series: [{name: 'MAP',type: 'map',mapType: name,selectedMode: 'false',//是否允许选中多个区域label: {normal: {show: true},emphasis: {show: true}},data: data}]};myChart.value.setOption(option, true);
};onMounted(() => {myChart.value = echarts.init(document.getElementById('main'));myChart.value.on('click', (params) => {if (params.data) {const { name, level } = params.data;if (level === 'district') {alert('无此区域地图显示!');initChinaMap();return;}getJSON({ name }, (data) => {renderChart(name, data);});}});initChinaMap();
});
</script><style>
body {text-align: center;
}
</style>

六. 总结

通过本篇文章的详细讲述,我们应该都有了一个明确的思路,可以借助 ECharts 快速地实现地图下钻功能。当然,本文完成的是核心下钻逻辑,而且也没有对地图的样式进行一些复杂的样式配置,在实际应用中可能还需要对颜色映射、数据标注等方面进行个性化定制,但这些并不是难点,相信参考 ECharts 配置项手册来进行配置地图属性,也是非常容易实现的。

因此,开发地图的关键点在于开发地图的过程中,我们始终要有一个清晰明了的开发思路和步骤,才能保证按部就班的实现功能,并且避免一些不必要的 BUG 产生。

比如:关于使用 ECharts 的图表渲染造成的内存溢出,导致浏览器崩溃问题,最终一步一步复盘代码才能解决问题。

七. 资源链接

  1. 代码演示地址:中国地图下钻示例演示:支持所有省市下钻演示

  2. 源码地址:ECharts 地图下钻源码地址

  3. geoJson 文件下载:全国地图下钻 geoJson 完整版下载 20240312.zip

  4. 官方文档:ECharts 地图配置项手册

由于时间原因,目前我只导入了四川省的地图,其他各个省市区的地图数据大家可以按需下载导入!后面我会都导入到本地。感谢您的阅读!

推荐文章

关于 ECharts 的系列文章,大家可以点解查看以下文章进行了解:

  • ECharts-GL 实战分享:教你轻松实现 3D 地图下钻功能

  • 使用 ECharts-GL 实现世界级、国家级、省市级 3D 地图

  • ECharts-GL 实战:轻松实现 3D 旋转地球

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯混元部署笔记 HunyuanVideo

目录 Download Text Encoder attention 默认改为了torch flash_atten安装 GitHub - Tencent/HunyuanVideo: HunyuanVideo: A Systematic Framework For Large Video Generation Model Training Download Text Encoder HunyuanVideo uses an MLLM model and a CLIP model as …

【机器学习】——windows下安装anaconda并在vscode上进行配置

一、安装anaconda 1.进入清华的镜像网站&#xff0c;下载自己电脑对应的anaconda版本。网站&#xff1a;https://repo.anaconda.com/archive/ 这里我下载的版本是anaconda3-2024.10-1-Windows-x86-64 2.下载完毕后开始安装anaconda 3.配置anaconda环境变量 在设置中找到编…

如何查看电脑生产日期

查看电脑的生产日期通常可以通过以下方法实现&#xff0c;具体方式取决于操作系统和电脑类型&#xff1a; 方法 1&#xff1a;检查电脑 BIOS 生产日期通常记录在 BIOS 中。可以通过以下步骤查看&#xff1a; 重启电脑并进入 BIOS&#xff1a; 启动时按下特定的键&#xff08;…

《蓝桥杯比赛规划》

一、比赛简介 蓝桥杯全国软件和信息技术专业人才大赛是一项具有较高影响力的编程竞赛&#xff0c;旨在促进软件和信息技术领域专业技术人才的培养&#xff0c;提升高校毕业生的就业竞争力。比赛涵盖了多个编程语言和专业方向&#xff0c;包括 C/C、Java、Python 等。 二、目标…

数据仓库和数据建模中,维度表、度量表、事实表和大宽表是什么

在数据仓库和数据建模中&#xff0c;维度表、度量表、事实表和大宽表是常用的术语&#xff0c;它们各自扮演着不同的角色。下面是对每个概念的详细解释。 1. 维度表 (Dimension Table) 定义&#xff1a;维度表是用来存储描述性信息的表&#xff0c;通常包含对业务实体的属性。…

总结FastDFS的面试题

目录 一&#xff1a;FastDFS的基础知识 1&#xff1a;定义 2&#xff1a;FastDFS的优点 3&#xff1a;tracker server 4&#xff1a;storage server 二&#xff1a;FastDFS的存储原理 1&#xff1a;小文件存储的问题 2&#xff1a;小文件合并存储 3&#xff1a;文件上…

Leetcode打卡:骑士在棋盘上的概率

执行结果&#xff1a;通过 题目&#xff1a;骑士在棋盘上的概率 在一个 n x n 的国际象棋棋盘上&#xff0c;一个骑士从单元格 (row, column) 开始&#xff0c;并尝试进行 k 次移动。行和列是 从 0 开始 的&#xff0c;所以左上单元格是 (0,0) &#xff0c;右下单元格是 (n - …

E卷-分割数组的最大差值

分割数组的最大差值 问题描述 给定一个由若干整数组成的数组 n u m s nums nums,可以在数组内的任意位置进行分割,将该数组分割成两个非空子数组(即左数组和右数组)。分别对子数组求和得到两个值,然后计算这两个值的差值。请输出所有分割方案中,差值的最大值。 输入格…

Oceanbase离线集群部署

准备工作 两台服务器 服务器的配置参照官网要求来 服务器名配置服务器IPoceanbase116g8h192.168.10.239oceanbase216g8h192.168.10.239 这里选oceanbase1作为 obd机器 oceanbase安装包 选择社区版本的时候自己系统的安装包 ntp时间同步rpm包 联网机器下载所需的软件包 …

Python爬虫实战:抓取拼多多商品详情数据(基于pdd.item_get接口)

在当前的电商市场中&#xff0c;拼多多以其独特的拼团模式和优惠价格吸引了大量用户&#xff0c;成为继淘宝、京东之后的又一大电商平台。对于数据分析和市场研究者来说&#xff0c;获取拼多多的商品详情数据显得尤为重要。本文将介绍如何使用Python爬虫技术&#xff0c;通过调…

漫画之家Spring Boot:漫画资源的跨设备访问

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&a…

重生之我在21世纪学C++—循环语句

一、while 循环 1、while 语法形式 while ( 表达式 ) { 语句 } while默认只能跟一条语句&#xff0c;如果有多条语句&#xff0c;需要用{ }将语句括起来。 2、执行流程 首先上来先执行判断表达式&#xff0c;如果表达式的值为 0 &#xff0c;就不进入循环&#xff1b;如…

【Keil】Keil MDK 已经不再提供 ARM Compiler v5

该问题出现在 Keil MDK v5.12 之后 用必应搜索相关问题&#xff0c;发现早已在 ARM community 提了 How can I install Compiler Version 5 for Keil vision 5 回答给出了这个文档 Documentation - Arm Developer 文档提到了 ARM Compiler 5 的下载地址&#xff0c;但是得登录 …

微信小程序购物车全选反选功能以及合计

微信小程序基于Vant Weapp的购物车功能实现 1、单选 使用微信小程序原生表单组件checkbox和checkbox-group 注意&#xff1a;checkbox原生不支持bind:change事件&#xff0c;checkbox-group支持 <checkbox-group bindchange"handleCheck"><checkbox val…

《OpenCV:视觉世界的魔法钥匙》

《OpenCV&#xff1a;视觉世界的魔法钥匙》 一、OpenCV 是什么1. 起源与发展支持2. 特点与优势3. 编程语言支持 二、OpenCV 的发展历程1. 重要版本发布时间线2. 版本更新内容 三、OpenCV 的主要功能1. 图像处理2. 特征提取3. 目标检测4. 运动分析5. 人脸识别6. 其他功能 四、Op…

openharmony开发资料合集

openharmony官方文档 标准系统方案之瑞芯微RK3568移植案例 1、rk3568平台移植路线 【移植】标准系统方案之瑞芯微RK3568移植案例 - 文章 OpenHarmony开发者论坛 2、内核修改优化 P16_内核移植优化_哔哩哔哩_bilibili 3、北向应用开发视频教程 OpenHarmony开发者的个人空…

莫队算法(优雅的暴力)

小B的询问 题目描述 小B 有一个长为 n n n 的整数序列 a a a&#xff0c;值域为 [ 1 , k ] [1,k] [1,k]。 他一共有 m m m 个询问&#xff0c;每个询问给定一个区间 [ l , r ] [l,r] [l,r]&#xff0c;求&#xff1a; ∑ i 1 k c i 2 \sum\limits_{i1}^k c_i^2 i1∑k​…

【人工智能】用Python构建高效的自动化数据标注工具:从理论到实现

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 数据标注是构建高质量机器学习模型的关键环节,但其耗时耗力常成为制约因素。本篇文章将介绍如何用Python构建一个自动化数据标注工具,结合机器学习和NLP技术,帮助加速数据标注过程。我们将从需求分析入…

DAY35|动态规划Part03|LeetCode:01背包问题 二维、01背包问题 一维、416. 分割等和子集

目录 01背包理论基础&#xff08;一&#xff09; 基本思路 C代码 01背包理论基础&#xff08;二&#xff09; 基本思路 C代码 LeetCode:416. 分割等和子集 基本思路 C代码 01背包理论基础&#xff08;一&#xff09; 题目链接&#xff1a;卡码网46. 携带研究材料 文字…

elasticsearch-如何给文档新增/更新的字段

文章目录 前言elasticsearch-如何给文档新增/更新的字段1. 如何给某些文档新增/更新的字段2. 给所有文档添加/更新一个新的字段3. 测试 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且…