Vue+Echart实现地图省市区三级下钻
采用在线地图数据,整体简约,扩展也方便
参考
<template><div><div ref="mapContainer" style="width: 100%; height: 600px;"></div><button @click="goBack">返回上一级</button></div>
</template><script>
import * as echarts from 'echarts';
import axios from 'axios';
import router from '../router';export default {name: 'ChinaMap',data() {return {currentLevel: 'china', // 当前显示的地图层级levelStack: [], // 地图层级栈coordinates: [ // 标记点坐标{ name: '北京', value: [116.405285, 39.904989] },{ name: '上海', value: [121.473701, 31.230416] }]};},mounted() {this.loadMapData();},watch: {'$route.query.code': function () {// 当路由参数变化时重新加载地图数据this.loadMapData();}},methods: {goBack() {router.push({ query: { code: this.$route.query.fromCode } });},async loadMapData() {try {const adcode = this.$route.query.code || '100000'; // 默认加载中国地图// 获取 geoJSON 数据const response = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`);const chinaGeoJson = response.data;// 注册地图echarts.registerMap(adcode, chinaGeoJson);// 提取 adcode 映射表const adcodeMap = this.extractAdcodeMap(chinaGeoJson);// 初始化 ECharts 实例const chart = echarts.init(this.$refs.mapContainer);// 配置项const option = {title: {text: '中国地图',left: 'center'},tooltip: {trigger: 'item',formatter: function (params) {const adcode = adcodeMap[params.name] || '未知';return `${params.name}<br>adcode: ${adcode}`;}},visualMap: {min: 0,max: 100000,text: ['High', 'Low'],calculable: true},series: [{name: '数值',type: 'map',map: adcode, // 使用 adcode 作为地图名称roam: true,itemStyle: {areaColor: '#d3d3d3', // 默认区域颜色borderColor: '#111', // 边框颜色borderWidth: 1 // 边框宽度},emphasis: {focus: 'self',itemStyle: {areaColor: '#f4e925' // 高亮颜色}},data: [{ name: '北京市', value: 500, adcode: '110000' },{ name: '上海市', value: 11300, adcode: '310000' },{ name: '云南省', value: 300, adcode: '530000' },{ name: '广东省', value: 300, adcode: '440000' },// 其他省份的数据]},]};// 使用配置项设置图表chart.setOption(option);// 监听点击事件chart.on('click', (params) => {const adcode = adcodeMap[params.name];if (adcode) {this.levelStack.push(this.currentLevel); // 记录当前层级this.currentLevel = adcode; // 更新当前层级router.push({ query: { code: adcode, fromCode: this.$route.query.code } });}});} catch (error) {console.error('Failed to load map data:');}},extractAdcodeMap(geoJson) {const adcodeMap = {};geoJson.features.forEach(feature => {const name = feature.properties.name;const adcode = feature.properties.adcode;if (name && adcode) {adcodeMap[name] = adcode;}});return adcodeMap;}}
}
</script>
效果
省级

市级

县级

相关文章:
Vue+Echart实现地图省市区三级下钻
采用在线地图数据,整体简约,扩展也方便 参考 <template><div><div ref"mapContainer" style"width: 100%; height: 600px;"></div><button click"goBack">返回上一级</button></…...
Apache Tomcat 信息泄露漏洞排查处理CVE-2024-21733)
一、漏洞描述 Apache Tomcat作为一个流行的开源Web服务器和Java Servlet容器并用于很多中小型项目的开发中。其中,Coyote作为Tomcat的连接器组件,是Tomcat服务器提供的供客户端访问的外部接口,客户端通过Coyote与服务器建立链接、发送请求并且接收响应。 近日发现Apache To…...
51单片机-LED实验
实现了按下独立按键,LED灯亮,松开独立按键,LED灯灭的功能 #include <8051.h>void delayms(unsigned char t){unsigned char i,j;i900;jt;do{jt;while (j--){/* code */}}while(i--); }void main(){// P2_01;while (1){if(P3_00){delay…...
无人机开启农林植保新篇章
嘿,小伙伴们,你们知道吗?无人机已经悄悄在农业领域大展拳脚,成为现代农业的“黑科技”新宠儿啦! 想象一下,广袤的田野上空,无人机如同勤劳的蜜蜂,精准高效地完成着各项任务ÿ…...
第N4周:NLP中的文本嵌入
本文为365天深度学习训练营 中的学习记录博客原作者:K同学啊 任务要求:加载第N1周的.txt文件,使用Embeddingbag与Embedding完成词嵌入 第N1周的.txt文件的名称为“任务文件.txt”,内容为: 比较直观的编码方式是采用上…...
C++高精度减法
高精度减法其实跟加法差不多,首先就是需要逆序存入整数数组,其次就是做运算,最后就是删除前导0逆序输出。 不过在做高精度减法需要考虑一下两个数的关系是有三种的,a>b,a<b ab;思考全面咱们的程序才能拿满分。 以下是完整…...
protobuf cmakelist,msvc utf-8设置
源字符集和执行字符集 源字符集指的是cpp文件中字符串的编码方式 执行字符集指的是exe文件中字符串的编码方式 msvc编译器设置的命令行参数 /source-charset:utf-8 /execution-charset:utf-8 cmake中设置 add_compile_options(“ < < <<CXX_COMPILER_ID:MSVC>…...
Haproxy讲解
Haproxy: haproxy是一个开源的高性能反向代理和负载均衡器,主要用于TCP和HTTP流量管理。 功能和特点:haproxy能够处理大量的并发连接,支持TCP和HTTP协议,具有高可用性和负载均衡功能。它特别适用于需要处理大量流量的网站&am…...
K8S系列——一、Ubuntu上安装Helm
在使用K8S搭建集群服务时,有时候需要用到Helm(一个用于Kubernetes应用管理的工具),下面是在Ubuntu上安装Helm的过程。 1.更新系统软件包列表 sudo apt-get update2.安装必要的依赖项 sudo apt-get install apt-transport-https…...
排序: 插入\希尔\选择\归并\冒泡\快速\堆排序实现
1.排序的概念及应用 1.1概念 排序:所谓排序,就是一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 1.2运用 购物筛选排序: 1.3常见排序算法 2.实现常见的排序算法 int a[ {5,3,9,6,2,4,7,1,8}; 2…...
OpenCV图像处理——按最小外接矩形剪切图像处理ROI后映射回原图像
引言 在图像处理过程中,提取感兴趣区域(ROI)并在其上进行处理后,往往需要将处理后的结果映射回原图像。这一步通常涉及以下几个步骤: 找到最小外接矩形:使用 cv::boundingRect 或 cv::minAreaRect 提取感兴…...
Linux中以单容器部署Nginx+ASP.NET Core
强烈推荐在生产环境中使用反向代理服务器转发请求到Kestrel Http服务器,本文将会实践将Nginx --->ASP.NET Core 部署架构容器化的过程。 Nginx->ASP.NET Coe部署架构容器化 在Docker中部署Nginx--->ASP.NETCore 有两种选择, 第一种是在单容器…...
【秋招笔试】8.11大疆秋招(第三套)-三语言题解
🍭 大家好这里是 春秋招笔试突围,一起备战大厂笔试 💻 ACM金牌团队🏅️ | 多次AK大厂笔试 | 编程一对一辅导 ✨ 本系列打算持续跟新 春秋招笔试题 👏 感谢大家的订阅➕ 和 喜欢💗 和 手里的小花花🌸 ✨ 笔试合集传送们 -> 🧷春秋招笔试合集 🍒 本专栏已收…...
标题:打造编程学习的知识宝库:高效笔记记录与整理
标题:打造编程学习的知识宝库:高效笔记记录与整理 在编程学习的征途中,有效的笔记记录和整理技巧对于掌握和回顾知识点至关重要。本文将从笔记工具选择、笔记结构设计、以及实践与复习策略三个方面,探讨如何高效地记录并整理编程…...
【Rust光年纪】Rust 官方提供的关键工具概览:代码检查、格式化和依赖管理
提升 Rust 项目质量和安全性:掌握官方工具的核心功能和使用方法 前言 Rust 作为一种系统编程语言,拥有强大的性能和内存安全特性。然而,随着项目规模增长,代码检查、格式化和依赖管理等工作变得更加重要。因此,Rust …...
【Python学习-UI界面】PyQt5 小部件8-QSlider 数值滑动
样式如下: QSlider 类对象为用户提供一个沟槽,可以在其上移动一个手柄。 它是一个经典的小部件,用于控制有界值。 手柄在沟槽上的位置相当于控件的下限和上限之间的整数。 常用方法如下: 序号方法描述1setMinimum设置滑块的最小值2setMax…...
MapReduce入门教程
这可不是目录 入门定义与说明数据分析Map和Reduce阶段的任务<Kn,Vn>分析MapReduce的数据类型其他说明(持续更新) 开发案例(持续更新)自定义的wordcountcsv文件操作序列化操作 入门 定义与说明 数据分析 以下未数据分析示意图 Map和Reduce阶段的任务 Map阶段的任务&a…...
JDBC1 Mysql驱动,连接数据库
JDBC 一、JDBC Java Database Connectivity:Java访问数据库的解决方案 JDBC定义了一套标准接口,即访问数据库的通用API, 不同的数据库厂商根据各自数据库的特点去实现这些接口。 JDBC希望用相同的方式访问不同的数据库,让具体的…...
LeetCode 205 同构字符串
题目 给定两个字符串 s 和 t ,判断它们是否是同构的。 如果 s 中的字符可以按某种映射关系替换得到 t ,那么这两个字符串是同构的。 每个出现的字符都应当映射到另一个字符,同时不改变字符的顺序。不同字符不能映射到同一个字符上,…...
ARM高性能计算(HPC)处理器Neoverse介绍
思考: Neoverse系列中的N、V、E有什么区别? 这三个字母的缩写又是什么? ARM Neoverse架构是ARM专为服务器、数据中心、高性能计算(HPC)和网络基础设施设计的一系列处理器架构。Neoverse架构分为N系列、V系列和E系列,这些系列面向不同的应用场景,各自有不同的设计目标和…...
用OpenMV4 H7 PLUS做个智能分拣小车:颜色识别实战项目从硬件选型到代码集成
智能分拣小车实战:OpenMV4 H7 PLUS颜色识别与嵌入式系统集成 在创客竞赛和毕业设计中,智能分拣系统一直是热门选题。传统方案往往面临识别精度不足、响应延迟高或硬件兼容性差等问题。OpenMV4 H7 PLUS凭借其强大的图像处理能力和丰富的硬件接口ÿ…...
Qt 批量读取Excel数据:从性能瓶颈到优化实践
1. 为什么Qt读取Excel会卡成PPT? 第一次用Qt操作Excel表格时,我兴冲冲写了个循环读取单元格的代码。结果打开包含5000行数据的文件后,进度条像蜗牛爬坡,鼠标指针转成彩色圆圈,程序直接卡成PPT幻灯片模式——这场景估计…...
别再只盯着快充了!聊聊交流充电桩(慢充)对电池寿命的友好设计
慢充才是真爱护:揭秘交流充电桩如何用"温柔算法"延长电池寿命 当大多数电动车车主还在为"充电5分钟续航200公里"的快充技术欢呼时,一群电池工程师和资深电车玩家却悄悄把家用充电桩调成了最低电流模式。这不是因为他们时间太多&…...
自动化测试系统开关架构与继电器选型指南
1. 自动化测试系统中的开关架构选择在自动化测试系统中,开关架构的选择直接影响着测试效率、信号完整性和系统成本。根据测试需求和被测设备(DUT)特性,我们可以将开关架构分为四种基本类型。1.1 无开关架构无开关架构是最直接的连接方式,每个…...
别再搞混了!改进DH与标准DH参数在IRB1200建模中的关键差异与选择
别再搞混了!改进DH与标准DH参数在IRB1200建模中的关键差异与选择 当你在为ABB IRB1200这类六轴工业机器人构建运动学模型时,是否曾被两种不同的DH参数表示法困扰?标准DH(Denavit-Hartenberg)和改进DH(Modif…...
NotebookLM vs Notion AI:不是功能比拼,而是知识操作系统代际之争(附:适配不同角色的3套迁移路径图谱)
更多请点击: https://intelliparadigm.com 第一章:NotebookLM vs Notion AI:不是功能比拼,而是知识操作系统代际之争(附:适配不同角色的3套迁移路径图谱) NotebookLM 和 Notion AI 表面同属“A…...
基于MCP架构构建营销数据管道:打通Google Ads、Meta Ads与GA4的数据孤岛
1. 项目概述:打通营销数据孤岛的“瑞士军刀” 如果你在数字营销领域摸爬滚打过几年,尤其是在同时操盘谷歌广告和Meta广告,并且数据后台用的是Google Analytics 4,那你一定对下面这个场景深恶痛绝:老板或客户要一份整体…...
如何高效下载网易云音乐无损FLAC:完整指南与实战技巧
如何高效下载网易云音乐无损FLAC:完整指南与实战技巧 【免费下载链接】NeteaseCloudMusicFlac 根据网易云音乐的歌单, 下载flac无损音乐到本地.。 项目地址: https://gitcode.com/gh_mirrors/nete/NeteaseCloudMusicFlac 想要一键下载网易云音乐歌单中的无损…...
SoC硅验证挑战与ClearBlue解决方案解析
1. SoC硅验证与调试的挑战与ClearBlue解决方案在复杂SoC芯片的开发周期中,硅验证阶段往往是最耗时、成本最高且最难预测的环节。当第一颗芯片从晶圆厂返回时,设计团队面临的核心挑战是:如何在真实工作环境和全速运行条件下,快速验…...
如何用本地OCR工具快速提取视频硬字幕:3步完成专业字幕制作
如何用本地OCR工具快速提取视频硬字幕:3步完成专业字幕制作 【免费下载链接】video-subtitle-extractor 视频硬字幕提取,生成srt文件。无需申请第三方API,本地实现文本识别。基于深度学习的视频字幕提取框架,包含字幕区域检测、字…...
