当前位置: 首页 > news >正文

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);});},}
}

相关文章:

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

获取geo数据&#xff1a; 可以使用node爬虫获取数据 最好多爬几遍&#xff0c;因为有时候会获取错误 实现逻辑 拥有geo数据后 请求geo数据注册地图 registerMap配置echarts增加事件监听&#xff08;点击事件&#xff09; 如果点击了&#xff0c;回到第一步。功能就是循环以…...

从0到1学会手写操作系统,我只用了2个小时

黑马嵌入式教程再出力作 重磅发布第三弹 《自己动手写嵌入式操作系统》 问&#xff1a;嵌入式开发不是只学单片机就行&#xff1f;为什么要学操作系统&#xff1f; 答&#xff1a;年轻人&#xff0c;别把路走窄了。且听我说↓↓↓ 嵌入式产品分为两大类&#xff1a;一类简单…...

软件包管理

一、rpm管理软件包 1、获得rpm的软件包 1&#xff09;去官网安装不推荐 找自己光盘有没有这个包 装好需要的包之后装qq 2&#xff09;去镜像站点&#xff0c;推荐 二、yum/dnf管理软件包 解决软件的依赖关系&#xff0c;可以自动的去服务器下载软件包 1、使用yum软件包 使用…...

【逗老师的PMP学习笔记】9、项目资源管理

目录 一、规划资源管理1、【关键工具】责任分配矩阵RACI矩阵2、【关键工具】组织理论2.1、马斯洛需求层次理论2.2、麦格雷戈-X-Y理论2.3、赫兹伯格双因素理论 3、【关键输出】资源管理计划4、【关键输出】团队章程 二、估算活动资源1、【关键输入】资源日历 三、获取资源1、【关…...

react-virtualized可视化区域渲染的使用

介绍 github地址&#xff1a;https://github.com/bvaughn/react-virtualized 实例网址&#xff1a;react-virtualized如果体积太大&#xff0c;可以参考用react-window。 使用 安装&#xff1a; yarn add react-virtualized。在项目入口文件index.js中导入样式文件&#xff…...

navicat连接postgresql报错

navicat连接postgresql报错 navicat连接postgresql报错 现象 有小伙伴告诉我 安装了新的postgresql 使用navicat连接&#xff0c;报错 ERROR: column "datlastsysoid" does not existLINE 1: SELECT DISTINCT datlastsysoid FROM pg database column “datlastsy…...

题目:灾后重建

【题目描述】 B地区在地震过后&#xff0c;所有村庄都造成了一定的损毁&#xff0c;而这场地震却没对公路造成什么影响。但是在村庄重建好之前&#xff0c;所有与未重建完成的村庄的公路均无法通车。换句话说&#xff0c;只有连接着两个重建完成的村庄的公路才能通车&#xff…...

Vue 插槽 slot

solt 插槽需要分为 2.6.0 版本以上和 2.6.0版本以下。 2.6.0 版本以下的 slot 插槽在&#xff0c;2.x版本将继续支持&#xff0c;但是在 Vue 3 中已被废弃&#xff0c;且不会出现在官方文档中。 作用 插槽 prop 允许我们将插槽转换为可复用的模板&#xff0c;这些模板可以基于…...

【C/C++】C语言位图操作实例(亲测)

C语言中的位图操作通常用于处理大量的二进制数据&#xff0c;例如图像处理、压缩算法等。以下是一些C语言中的位图操作实例&#xff1a; 设置位图中的某一位 void set_bit(unsigned char *bitmap, int bit) {bitmap[bit / 8] | (1 << (bit % 8)); }这个函数将位图中的第…...

Mahout教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Mahout 是 Apache Software Foundation&#xff08;ASF&#xff09; 旗下的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现&#xff0c;包括聚类、分类、推荐…...

wxwidgets Ribbon使用wxRibbonToolBar实例

wxRibbonToolBar就是工具栏&#xff0c;一下是实现的效果&#xff0c;界面只是功能展示&#xff0c;没有美化 实现代码如下所示&#xff1a; MyFrame::MyFrame(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(800, 600)) …...

8.9黄金最新行情走势分析及短线交易策略

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周三&#xff08;8月9日&#xff09;现货黄金维持震荡&#xff0c;目前交投于1930美元附近&#xff0c;隔日现货黄金盘中震荡下行&#xff0c;失守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之后&#xff0c;终端前总会出现 (base) 字样&#xff0c;显示如下&#xff1a; (base) tinghoudeiMac ~ 具体原因是 安装了anaconda后&#xff0c;每次启动终端都会启动anaconda的base环境。 解决办法 设置anaconda 不自启base环境就好了&#xff1a; 禁用…...

RabbitMQ面试题大全含答案

rabbitmq 的使用场景有哪些&#xff1f; ①. 跨系统的异步通信&#xff0c;所有需要异步交互的地方都可以使用消息队列。就像我们除了打电话&#xff08;同步&#xff09;以外&#xff0c;还需要发短信&#xff0c;发电子邮件&#xff08;异步&#xff09;的通讯方式。 ②. 多…...

Linux配置QT Creator环境:ubuntu中安装QT Creator环境

一、前景 目前市面上很多公司使用QT Creator进行界面开发&#xff0c;基本都会选择在Linux环境进行&#xff0c;优点不仅是市场所需&#xff0c;更是方便后期代码的移植&#xff0c;相较于Windows系统&#xff0c;Linux系统移植性非常好。故此篇文章&#xff0c;介绍如何在Linu…...

机器学习深度学习——池化层

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——卷积的多输入多输出通道 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们…...

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 离散余弦变换&#xff08;Discrete Cosine Transform (DCT)&#x…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...