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系列,这些系列面向不同的应用场景,各自有不同的设计目标和…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
