echarts实现中国地图下钻进入下一级行政区(地图钻取)

在这里插入图片描述

获取geo数据:

可以使用node爬虫获取数据

最好多爬几遍,因为有时候会获取错误

实现逻辑

拥有geo数据后

  1. 请求geo数据
  2. 注册地图 registerMap
  3. 配置echarts
  4. 增加事件监听(点击事件)

如果点击了,回到第一步。功能就是循环以上4步逻辑

echarts实现

html

  <div ref="echarts-dom" class="echarts-content"></div>

js:

export default {data() {return {mapChart: null,addressCode: []};},mouted(){this.mapChart = echarts.init(this.$refs["echarts-dom"]);this.getData();},methods: {getData("100000") {fetch(`${process.env.VUE_APP_ORIGIN}/geoData/${code}.json`).then((res) => {return res.json();}).then((res) => {this.addressCode = res.features;echarts.registerMap("echartsMap", res);this.setEchartsOptions();}).finally((err) => {this.mapLoading = false;});},// echarts配置setEchartsOptions() {this.mapChart.off("click"); //图表渲染前销毁点击事件this.mapChart.setOption({series: [{type: "map",mapType: "echartsMap",roam: true,scaleLimit: {min: 1.1,max: 5.2,},data: this.addressCode,// 地图模块样式itemStyle: {// 默认模块样式normal: {borderWidth: 1.3,borderColor: "#00ffff",areaColor: "#09295b",},// 鼠标经过模块样式emphasis: {show: true,borderWidth: 3,areaColor: "#0d559d",label: {show: true,textStyle: {color: "#fff",},},},},label: {show: true,textStyle: {color: "#fff",},},},],},true);this.addEchartsEventListener();},// 监听echarts事件addEchartsEventListener() {const that = this;// 点击时间this.mapChart.on("click", function (params) {console.log(params.data);that.getData(params.data.codeNumber);});// 移动 | 缩放this.mapChart.on("georoam", (params) => {that.$emit("swicthPanle", false);});},}
}

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

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

相关文章

滇医通微信小程序分析笔记

注意 本文章仅供学习交流使用&#xff0c;如果你是铁粉你就会知道博主之前发布过一篇相关的文章&#xff0c;但是由于代码涉及到法律相关所以就隐藏了&#xff0c;两年的时间过去了&#xff0c;因为女朋友已经早早安排上了&#xff0c;所以就搁置了&#xff0c;本次不做代码分…

Android c++内存异常检查

1、GWP-ASan 不消耗性能&#xff0c;支持app中非root手机调试&#xff1b; target sdk版本大于等于30&#xff1b; 不是一定能检测出&#xff0c;固定case反复测试可以提高检测出的概率&#xff1b; GWP-ASan | Android NDK | Android Developers (google.cn)

【C++】STL——set/multiset 和 map/multimap的使用

文章目录 1. 关联式容器2. 树形结构的关联式容器3. set3.1 认识set3.1 set的使用 4. multiset5. map5.1 认识map5.2 pair5.3 map的使用对map中[]的理解 6. multimap 1. 关联式容器 在初阶阶段&#xff0c;我们已经接触过STL中的部分容器 比如&#xff1a;vector、list、deque、…

一键暂停win11自动更新

暂停更新至2042年&#xff08;1000周&#xff09;&#xff1a;1、暂停更新Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings]"FlightSettingsMaxPauseDays"dword:00001b58"PauseFeatureUpdatesStartTime…

使用chatGPT生成提示词,在文心一言生成装修概念图

介绍 家是情感的港湾&#xff0c;而家居装修则是将情感融入空间的艺术。如何在有限的空间里展现个性与美感&#xff0c;成为了现代人关注的焦点。而今&#xff0c;随着人工智能的发展&#xff0c;我们发现了一个新的创意助手——ChatGPT&#xff0c;它不仅为我们带来了更多可能…

linux下绑定进程到指定CPU的操作方法

taskset简介 # taskset Usage: taskset [options] [mask | cpu-list] [pid|cmd [args...]] Show or change the CPU affinity of a process. Options: -a, --all-tasks operate on all the tasks (threads) for a given pid -p, --pid operate on ex…

ES6链判断运算符(?.)的正确打开方式

在实际应用中&#xff0c;如果读取对象内部 的某个属性&#xff0c;往往需要判断一下&#xff0c;属性的上层对象是否存在。比如&#xff0c;读取message.body.user.firstName这个属性&#xff0c;安全的写法是写成下下面这样&#xff1a; // 错误的写法 const firstName mes…

探索 TypeScript 元组的用例

元组扩展了数组数据类型的功能。使用元组&#xff0c;我们可以轻松构造特殊类型的数组&#xff0c;其中元素相对于索引或位置是固定类型的。由于 TypeScript 的性质&#xff0c;这些元素类型在初始化时是已知的。使用元组&#xff0c;我们可以定义可以存储在数组中每个位置的数…

Android, 笔记+课表的app实现

NoteSchedule: 笔记课表&#xff0c;不同于超表和课程格子等笔记类软件&#xff0c;笔记课表的核心是将课表和笔记进行深度绑定&#xff0c;点击每个课表&#xff0c;就进入到笔记view中&#xff0c;点击其中的item就可以进入到笔记详情&#xff1b; 该应用已上线&#xff0c;…

回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现POA-CNN-LSTM鹈鹕算法优化卷积长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现POA-CNN…

Creo散热处理结构设计--阵列操作

问题描述&#xff1a; 在某一平面掏孔以散热&#xff0c;如何快速的绘制多孔并掏空处理 解决方式&#xff1a; 采用阵列操作。 1&#xff09;绘制圆、拉伸处理 2&#xff09;选择需要阵列的单元&#xff0c;选择阵列操作&#xff0c;在弹出的界面选择方向&#xff0c;按照…

【Winform学习笔记(七)】Winform无边框窗体拖动功能

Winform无边框窗体拖动功能 前言正文1、设置无边框模式2、无边框窗体拖动方法1、通过Panel控件实现窗体移动2、通过窗体事件实现窗体移动3、调用系统API实现窗体移动4、重写WndProc()实现窗体移动 前言 在本文中主要介绍 如何将窗体设置成无边框模式、以及实现无边框窗体拖动功…

C++项目:在线五子棋对战网页版--匹配对战模块开发

玩家匹配是根据自己的天梯分数进行匹配的&#xff0c;而服务器中将玩家天梯分数分为三个档次&#xff1a; 1. 普通&#xff1a;天梯分数小于2000分 2. 高手&#xff1a;天梯分数介于2000~3000分之间 3. 大神&#xff1a;天梯分数大于3000分 当玩家进行对战匹配时&#xff0c;服…

[分享]STM32G070 串口 乱码 解决方法

硬件 NUCLEO-G070RB 工具 cubemx 解决方法 7bit 改为 8bit printf 配置方法 添加头文件 #include <stdio.h> 添加重定向代码 #ifdef __GNUC__#define PUTCHAR_PROTOTYPE int __io_putchar(int ch)#else#define PUTCHAR_PROTOTYPE int fputc(int ch, FILE *f)#endi…

并发多线程篇

线程的基础知识 面试题1&#xff1a;线程与进程的区别&#xff1f; 面试题2&#xff1a;并行和并发有什么区别&#xff1f; 面试题3&#xff1a;创建线程的方式有哪些&#xff1f; 面试题 4&#xff1a;runnable 和 callable 有什么区别&#xff1f; 面试题5&#xff1a;线程…

Postgresql源码(110)分析dsm动态共享内存分配与共享内存mq实例(dsm/toc接口备忘录)

相关 《Postgresql源码&#xff08;90&#xff09;共享内存申请CreateSharedMemoryAndSemaphores》 《Linux内存映射函数mmap与匿名内存块》 《Linux共享内存与子进程继承》 dsm/toc使用备忘 用dsm框架的流程 评估共享内存大小&#xff1a;多次用shm_toc_estimate_chunk、shm…

Git 快速入门

Git 快速入门 文章目录 Git 快速入门一、代码托管平台&#xff08;远程仓库&#xff09;二、安装Git三、Git的命令实践Git 的四个区域Git 管理代码的3个场景Git 工作区的理念Git 工作区的生命周期Git 版本回退Git 文件重命名Git查看版本提交日志Git StashGit分支Git标签 四、创…

Nginx与docker配置安装

目录&#xff1a; Nginx的安装配置&#xff1a; 1、安装依赖包&#xff1a; 2、下载Nginx安装包&#xff1a; 3、解压Nginx压缩包&#xff1a; 4、配置Nginx编译环境&#xff1a; 5、编译并安装Nginx&#xff1a; 6、安装完Nginx后&#xff0c;可以切换到Nginx的安装目录…

【TypeScript】TS接口interface类型(三)

【TypeScript】TS接口interface类型&#xff08;三&#xff09; 【TypeScript】TS接口interface类型&#xff08;三&#xff09;一、接口类型二、实践使用2.1 常规类型2.2 设置属性只读 readonly2.3 设置索引签名2.4 设置可选属性2.5 函数类型接口 一、接口类型 TypeScript中的…

【肌电图信号分析】通道肌电图并查找收缩周期的数量、振幅、最大值和持续时间(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…