使用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,一经查实,立即删除!

相关文章

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

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

总结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 - …

Oceanbase离线集群部署

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

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

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

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

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

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

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

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;写作不易啊^ _ ^。   而且…

World Labs发布最新3D世界生成模型 | 李飞飞引领AI创新

随着人工智能技术的飞速发展&#xff0c;3D生成模型作为一个新兴领域&#xff0c;正逐步改变我们与虚拟世界的互动方式。2023年12月3日&#xff0c;李飞飞教授领导的AI初创公司World Labs发布了他们的最新成果——一款能够将单张图片转化为完整3D世界的生成模型。这个模型不仅突…

分布式cap

P&#xff08;分区安全&#xff09;都能保证&#xff0c;就是在C&#xff08;强一致&#xff09;和A&#xff08;性能&#xff09;之间做取舍。 &#xff08;即立马做主从同步&#xff0c;还是先返回写入结果等会再做主从同步。类似的还有&#xff0c;缓存和db之间的同步。&am…

cocos creator接入字节跳动抖音小游戏JSAPI敏感词检测(进行文字输入,但输入敏感词后没有替换为*号)

今天更新了某个抖音小游戏的版本&#xff0c;增加了部分剧情&#xff0c;半天过后一条短信审核未通过&#xff0c;emmm…抖音总是能给开发者惊喜…打开电脑看看这次又整什么幺蛾子… 首先是一脸懵逼&#xff0c;后端早已接入了官方的内容安全检测能力了&#xff08;https://de…

软件无线电安全之GNU Radio基础(下)

往期回顾 软件无线电安全之GUN Radio基础(上) 背景 在上一小节中&#xff0c;我们简单介绍和使用了GNU Radio软件的基础功能和模块&#xff0c;同时通过GNU Radio Companion&#xff08;GRC&#xff09;创建了简单的流程图&#xff0c;展示了信号生成、处理和输出的流程。最后…

Gitee配置SSH公钥

采用SSH协议同步Git仓库代码的好处就是高效。在配置好SSH公钥后&#xff0c;不需要每次操作都要输入用户名和密码&#xff08;主要针对命令行来说&#xff09;。 以我个人项目为例。 生成 SSH 公钥 1. 通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519…

2024年认证杯SPSSPRO杯数学建模D题(第一阶段)AI绘画带来的挑战解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 D题 AI绘画带来的挑战 原题再现&#xff1a; 2023 年开年&#xff0c;ChatGPT 作为一款聊天型AI工具&#xff0c;成为了超越疫情的热门词条&#xff1b;而在AI的另一个分支——绘图领域&#xff0c;一款名为Midjourney&#xff08;MJ&#xff…

算法-字符串-5.最长回文子串

一、题目&#xff1a; 二、思路解析 1.思路&#xff1a; 最长子串——动态数组 2.常用方法&#xff1a; a.字符串的截断 ress.substring(start,end1); 3.核心逻辑&#xff1a; 1.特殊情况&#xff1a;字符串为空或字符串的长度为0 if(snull||s.length())return ""…

高中数学:计数原理-二项式定理

文章目录 一、二项式定理与通项公式二、二项式系数的性质 一、二项式定理与通项公式 我们先来看完全平方公式 二、二项式系数的性质

刷题计划day26 回溯(五)回溯止【N 皇后】【解数独】

⚡刷题计划day26 回溯&#xff08;五&#xff09;继续&#xff0c;回溯最后一个专题&#xff0c;今天的是hard题&#xff0c;也是比较经典的题型&#xff0c;可以点个免费的赞哦~ 往期可看专栏&#xff0c;关注不迷路&#xff0c; 您的支持是我的最大动力&#x1f339;~ 目录…

UE5基本数据类型

bool: 表示布尔值&#xff0c;只有两个取值&#xff1a;true 或 false&#xff0c;用于表示逻辑条件。int8: 表示 8 位的有符号整数&#xff0c;范围是 −128−128 到 127127。uint8: 表示 8 位的无符号整数&#xff0c;范围是 00 到 255255。int16: 表示 16 位的有符号整数&am…

linux的vdagent框架设计

1、vdagent Linux 的 spice 客户代理由两部分组成&#xff0c;一个系统范围的守护进程 spice-vdagentd 和一个 X11 会话代理 spice-vdagent&#xff0c;每个 X11 会话有一个。spice-vdagentd 通过 Sys-V initscript 或 systemd 单元启动。 如下图&#xff1a;spice-vdagent&a…