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系列,这些系列面向不同的应用场景,各自有不同的设计目标和…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
