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

获取geo数据:
可以使用node爬虫获取数据
最好多爬几遍,因为有时候会获取错误
实现逻辑
拥有geo数据后
- 请求geo数据
- 注册地图 registerMap
- 配置echarts
- 增加事件监听(点击事件)
如果点击了,回到第一步。功能就是循环以上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);});},}
}
相关文章:
echarts实现中国地图下钻进入下一级行政区(地图钻取)
获取geo数据: 可以使用node爬虫获取数据 最好多爬几遍,因为有时候会获取错误 实现逻辑 拥有geo数据后 请求geo数据注册地图 registerMap配置echarts增加事件监听(点击事件) 如果点击了,回到第一步。功能就是循环以…...
从0到1学会手写操作系统,我只用了2个小时
黑马嵌入式教程再出力作 重磅发布第三弹 《自己动手写嵌入式操作系统》 问:嵌入式开发不是只学单片机就行?为什么要学操作系统? 答:年轻人,别把路走窄了。且听我说↓↓↓ 嵌入式产品分为两大类:一类简单…...
软件包管理
一、rpm管理软件包 1、获得rpm的软件包 1)去官网安装不推荐 找自己光盘有没有这个包 装好需要的包之后装qq 2)去镜像站点,推荐 二、yum/dnf管理软件包 解决软件的依赖关系,可以自动的去服务器下载软件包 1、使用yum软件包 使用…...
【逗老师的PMP学习笔记】9、项目资源管理
目录 一、规划资源管理1、【关键工具】责任分配矩阵RACI矩阵2、【关键工具】组织理论2.1、马斯洛需求层次理论2.2、麦格雷戈-X-Y理论2.3、赫兹伯格双因素理论 3、【关键输出】资源管理计划4、【关键输出】团队章程 二、估算活动资源1、【关键输入】资源日历 三、获取资源1、【关…...
react-virtualized可视化区域渲染的使用
介绍 github地址:https://github.com/bvaughn/react-virtualized 实例网址:react-virtualized如果体积太大,可以参考用react-window。 使用 安装: yarn add react-virtualized。在项目入口文件index.js中导入样式文件ÿ…...
navicat连接postgresql报错
navicat连接postgresql报错 navicat连接postgresql报错 现象 有小伙伴告诉我 安装了新的postgresql 使用navicat连接,报错 ERROR: column "datlastsysoid" does not existLINE 1: SELECT DISTINCT datlastsysoid FROM pg database column “datlastsy…...
题目:灾后重建
【题目描述】 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响。但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车。换句话说,只有连接着两个重建完成的村庄的公路才能通车ÿ…...
Vue 插槽 slot
solt 插槽需要分为 2.6.0 版本以上和 2.6.0版本以下。 2.6.0 版本以下的 slot 插槽在,2.x版本将继续支持,但是在 Vue 3 中已被废弃,且不会出现在官方文档中。 作用 插槽 prop 允许我们将插槽转换为可复用的模板,这些模板可以基于…...
【C/C++】C语言位图操作实例(亲测)
C语言中的位图操作通常用于处理大量的二进制数据,例如图像处理、压缩算法等。以下是一些C语言中的位图操作实例: 设置位图中的某一位 void set_bit(unsigned char *bitmap, int bit) {bitmap[bit / 8] | (1 << (bit % 8)); }这个函数将位图中的第…...
Mahout教程_编程入门自学教程_菜鸟教程-免费教程分享
教程简介 Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现,包括聚类、分类、推荐…...
wxwidgets Ribbon使用wxRibbonToolBar实例
wxRibbonToolBar就是工具栏,一下是实现的效果,界面只是功能展示,没有美化 实现代码如下所示: MyFrame::MyFrame(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(800, 600)) …...
8.9黄金最新行情走势分析及短线交易策略
近期有哪些消息面影响黄金走势?黄金多空该如何研判? 黄金消息面解析:周三(8月9日)现货黄金维持震荡,目前交投于1930美元附近,隔日现货黄金盘中震荡下行,失守1930关口并在美盘时段…...
VB+SQL房地产评估系统设计与实现
摘 要 房地产评估系统对房地产评估信息进行全面现代化管理。但一直以来人们使用传统人工的方式进行评估,这种管理方式存在着许多缺点,如:效率低、计算量大,容易出错。另外时间一长,将产生大量的文件和数据,这对于查找、更新和维护都带来了不少的困难。 随着科学技术的不断…...
用AOP实现前端传参时间的时区转化
用AOP实现前端传参时间的时区转化 新增注解新增AOP切面类Controller传参字段添加注解结束 新增注解 Documented Target({FIELD,METHOD,PARAMETER,ANNOTATION_TYPE}) Retention(RUNTIME) public interface MyDateFormatDeserializer {String pattern() default "yyyy-MM-d…...
mybatis There is no getter for property named ‘*‘ in ‘class java.lang.String
mybatis There is no getter for property named car_port_ids in class java.lang.String 出现这种错误我这边是mapper.xml子查询字段不对导致的 我把查询结果的列的字段放进去结果不识别car_port_ids可能我这种字段本身就有问题 技术博客 http://idea.coderyj.com/ 1.解决 &…...
Mac终端前总会出现 (base) 字样解决
Mac安装了anaconda之后,终端前总会出现 (base) 字样,显示如下: (base) tinghoudeiMac ~ 具体原因是 安装了anaconda后,每次启动终端都会启动anaconda的base环境。 解决办法 设置anaconda 不自启base环境就好了: 禁用…...
RabbitMQ面试题大全含答案
rabbitmq 的使用场景有哪些? ①. 跨系统的异步通信,所有需要异步交互的地方都可以使用消息队列。就像我们除了打电话(同步)以外,还需要发短信,发电子邮件(异步)的通讯方式。 ②. 多…...
Linux配置QT Creator环境:ubuntu中安装QT Creator环境
一、前景 目前市面上很多公司使用QT Creator进行界面开发,基本都会选择在Linux环境进行,优点不仅是市场所需,更是方便后期代码的移植,相较于Windows系统,Linux系统移植性非常好。故此篇文章,介绍如何在Linu…...
机器学习深度学习——池化层
👨🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——卷积的多输入多输出通道 📚订阅专栏:机器学习&&深度学习 希望文章对你们…...
siMLPe:Human Motion Prediction
Back to MLP: A Simple Baseline for Human Motion Prediction解析 摘要1. 简介2. Related Work2.1 基于RNN的人体运动预测2.2 基于GCN的人体运动预测2.3 基于 Attention 的人类运动预测2.4 总结 3. siMLPe3.1 离散余弦变换(Discrete Cosine Transform (DCT)&#x…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践
在 Kubernetes 集群中,如何在保障应用高可用的同时有效地管理资源,一直是运维人员和开发者关注的重点。随着微服务架构的普及,集群内各个服务的负载波动日趋明显,传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...
