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

vue2+echarts地图下钻+地图遮盖物散点

一、下载工具

npm i echarts echarts-gl axios -S

-S是生产依赖默认是-S不写也可以 -D是开发依赖

二、引入工具

import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";

三、HTML部分代码 

<div class="iconText" v-show="address != '100000'"><svgstyle="cursor: pointer"@click="backMap"t="1681180771137"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="3427"width="40"height="40"><pathd="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"p-id="3428"fill="#ffffff"></path></svg><span style="font-size: 25px; font-weight: 200; color: #fff; text-shadow: 1px 2px 5px rgba(255, 255,255,.8);font-family: my-self-font;">返回上级地图</span></div>
<div class="map-chart" id="mapEchart"></div>

四、data函数中定义的数据 

 data() {return {// 地图下钻历史记录historyMapData: [{ name: "中国", adcode: "100000" }],address: "100000",addressName: "中国",district: "",showtab: false,scatterList: [],};},

五、在methods方法中初始化一下dom

chartMap() {// 初始化domconst myChart = echarts.init(document.getElementById("mapEchart"));// 初始化mapthis.initMap(myChart, "中国", "100000");// 添加点击事件myChart.on("click", (e) => {// 添加历史记录this.historyMapData.push(e.value);// 初始化地图this.initMap(myChart, this.addressName, e.value.adcode, e.value.schoolId);});

六、让可视化地图跟随浏览器大小缩放

window.addEventListener("resize", () => {myChart.resize();
});

七、下钻的时候清除一下echarts实例

 async initMap(chartDOM, geoName, adcode, id) {// 清除echarts实例chartDOM.clear();// 请求map的jsonconst mapData = await this.getMapJSON(adcode, geoName, id);// 图表配置项const option = this.getOption(geoName, mapData);// 渲染配置if (this.district == "district") {option.series[1].data.push({ name: "杨家埠小学", value: [119.2, 36.85],schoolId:1 },{ name: "杨家埠小学", value: [119.21, 37.01],schoolId:2 },{ name: "杨家埠小学", value: [119.1, 36.9],schoolId:3 },{ name: "杨家埠小学", value: [118.9, 37.15],schoolId:4 });} else {option.series[1].data = [];}chartDOM.setOption(option);},

八、获取阿里云地图数据

async getMapJSON(address, geoName, id) {let res = null;if (address == undefined) {return null;}//判断地图下钻到district级的时候获取district数据if (this.district === "district") {res = await axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${address}.json`);} else if (this.district !== "district") {res = await axios.get(`https://geo.datav.aliyun.com/areas_v2/bound/${address}_full.json`);}// 重新注册地图echarts.registerMap(geoName, res.data);// 过滤json数据// 去掉台湾合海南岛边线if (res.data.features[20] &&res.data.features[20].properties.adcode == "460000") {res.data.features[20].geometry.coordinates.splice(1);}if (res.data.features[34] &&res.data.features[34].properties.adcode == "100000") {res.data.features[34].geometry.coordinates.splice(0);}const mapData = res.data.features.map((item) => {return {value: item.properties,name: item.properties.name,};});return mapData;},

九、地图配置散点配置

getOption(geoName, mapData) {const option = {geo3D: {zlevel: -100,show: false, //是否显示全部区域名称type: "map3D",roam: false,center: { x: 0, y: 0 },map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同regionHeight: 2,shading: "realistic",regions: [{name: mapData[0].name,itemStyle: {color: "#ff9900",},},],shading: "lambert",//默认高亮区域emphasis: {label: { show: false },itemStyle: {color: "transparent",},},},series: [{zlevel: -10,regionHeight: 1,type: "map3D",viewControl: {panSensitivity: 0,rotateSensitivity: 0,// zoomSensitivity: 0,minAlpha: 90,},map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同data: mapData, //这里比较重要 获得过滤后的data,这样点击事件时就能获得这个data的值label: {show: false, // 是否显示标签。textStyle: {color: "#fff", // 地图初始化区域字体颜色fontSize: 14,fontWeight: 600,},formatter: (e) => {return ` ${e.name} `;},},shading: "realistic",realisticMaterial: {detailTexture: "./public/image.png",},itemStyle: {borderColor: "rgba(50, 123, 200, 0.5)", //区域边界线颜色borderWidth: 2, // 区域边界宽度color: "skyblue",opacity: 0.9,},emphasis: {label: {show: true, //鼠标划过或停留是否现在区域名称textStyle: {borderColor: "#f00",color: "#fff", //鼠标划过或停留的字体颜色},},itemStyle: {color: "#fff", //鼠标划过或停留的区域颜色},},},{zlevel: 1,type: "scatter3D", // 三维散点图coordinateSystem: "geo3D",data: [],roam: true,symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z',// symbol: shcoolAddress,symbolSize: 20, // 散点大小label: {// 散点标签设置formatter: "{b}", // 显示数据点的名称position: "top",show: true,textStyle: {color: "#fff",padding: [5, 2],backgroundColor: {image: addressImg,},},},itemStyle: {// 散点样式设置color: "gold",},emphasis: {// 高亮状态样式设置label: {show: true,},itemStyle: {color: "skyblue",},},},],};return option;},

十、返回上级地图

backMap() {const myChart = echarts.init(document.getElementById("mapEchart"));// 去除当前的地图信息this.historyMapData.pop();const len = this.historyMapData.length;// 获取上一级的地图信息const newdata = this.historyMapData[len - 1];// 重新渲染地图this.initMap(myChart,newdata?.name || "map",newdata?.adcode || "100000");},

十一、在mounted中调用chartMap

mounted() {this.chartMap();},

相关文章:

vue2+echarts地图下钻+地图遮盖物散点

一、下载工具 npm i echarts echarts-gl axios -S -S是生产依赖默认是-S不写也可以 -D是开发依赖 二、引入工具 import * as echarts from "echarts"; import "echarts-gl"; import axios from "axios"; 三、HTML部分代码 <div class&…...

关于C++的特殊类定制

特殊类定制 在C中&#xff0c;一些特殊性质的类如何设计 类禁止拷贝的对象 C11 使用delete关键字赋值给拷贝构造和赋值C98将拷贝构造和赋值声明在私有里 类只能在堆上创建的对象 将构造函数私有化, 提供一个获取对象堆上创建对象的公有函数将析构函数私有化, 提供一个释放…...

Linux备份脚本

作用 Linux文件备份的作用较多&#xff0c;推荐以下几种&#xff1a; 保护文件&#xff1a;备份可以帮助用户保护文件&#xff0c;防止文件被意外删除或损坏。保证系统安全和应用安全&#xff1a;Linux系统管理人员对系统和业务应用要有一个合理的备份恢复策略&#xff0c;完…...

【Unity】实现轮盘抽奖

简介 示例一&#xff1a;使用协程完成轮盘转动 using System; using System.Collections; using System.Collections.Generic; using UnityEngine;public class Lunpan : MonoBehaviour {[Tooltip("轮盘节点")]public Transform Roulette;[Tooltip("轮盘旋转的…...

面下对象之overload与override

简介 在面向对象编程中,重载(overloading)和重写(overriding)是两个不同的概念。 重载(Overloading)的定义 重载是同一个类中定义多个同名方法,但是这些方法具有不同的参数列表(参数个数、参数类型或参数顺序不同)。 当调用这个方法时,编译器会根据实际传入的参数自动选择对…...

大数据之Hive函数大全

&#x1f527; Hive函数大全 更多大数据学习资料请关注公众号“大数据领航员"免费领取 一、数学函数 1、取整函数: round 1.函数描述 返回值语法结构功能描述doubleround(double a)返回double类型的整数值部分&#xff08;遵循四舍五入&#xff09; 2.例程 hive>…...

宝塔下应该用 Memcached 还是 Redis?

明月最近在跟几个使用宝塔面板的客户运维的时候发现不少站长不知道如何选择 Memcached 和 Redis&#xff0c;甚至都说不清楚 Memcached 或者 Redis 具体是用来干啥的&#xff1f;甚至还碰到过一个站长 Memcached 和 Redis 都安装了&#xff0c;但一个都没有用&#xff0c;就那么…...

恢复视频3个攻略:从不同情况下的恢复方法到实践!

随着科技的进步&#xff0c;我们的生活被各种各样的数字内容所包围&#xff0c;其中&#xff0c;视频因其独特的记录性质&#xff0c;承载着许多重要的资料。但不管是自媒体人还是普通人日常生活随手一拍&#xff0c;都会遇到误删视频的情况。为了帮助您找回手机视频&#xff0…...

从git上拉取项目进行操作

1.Git的概念 Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理。它实现多人协作的机制是利用clone命令将项目从远程库拉取到本地库&#xff0c;做完相应的操作后再利用push命令从本地库将项目提交至远程库。 2.Git的工作流程…...

ES升级--01--环境准备和安装

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Linux 单机1.官网下载 Elasticsearchhttps://www.elastic.co/cn/downloads/past-releases/#elasticsearch 2.解压软件3.创建用户设置用户 es 密码 es赋权ES用户数据…...

Linux 防火墙 firewalld 常用命令

1 防火墙 - firewalld 1.1 开启防火墙 # 临时性开启&#xff0c;服务器重启后会恢复为原来的状态 systemctl start firewalld # 永久性开启&#xff08;即开机启动&#xff09;&#xff0c;重启服务器后生效 systemctl enable firewalld1.2 关闭防火墙 # 临时性关闭&#xf…...

时间|基于SprinBoot+vue的时间管理系统(源码+数据库+文档)

时间管理系统 目录 基于SprinBootvue的时间管理系统 一、前言 二、系统设计 三、系统功能设计 1管理员功能模块 2用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农…...

C++青少年简明教程:for循环语句

C青少年简明教程&#xff1a;for循环语句 C的for循环语句是一种迭代控制语句&#xff0c;用于重复执行一段代码。 语法格式&#xff1a; for(表达式1&#xff1b;表达式2&#xff1b;表达式3) 循环体 for循环语句执行流程图&#xff1a; 不太好理解&#xff0c;请看下图&am…...

自动驾驶技术现状与需求分析

随着科技的不断进步和智能化浪潮的席卷&#xff0c;自动驾驶技术已成为当今交通领域的热点话题。本文旨在深入探讨自动驾驶技术的当前发展状况&#xff0c;并对其未来的市场需求进行细致分析。首先&#xff0c;我们将回顾自动驾驶技术的起源、发展历程以及当前的技术水平&#…...

SQL生成自然数,日历序列 浅析

01.sqlserver版本 使用sqlserver将数据复制n条 selectt.indx,t.name,tmp.vlue from (values(1,苹果) ) as t(indx, name) ,(select[number] as vluefrom master.dbo.spt_valueswhere [type] pand [number] between 1 and 10 ) as tmpspt_values是什么 spt_values是SQL Se…...

【数据结构(邓俊辉)学习笔记】二叉树04——Huffman树

文章目录 0. 概述1. 无前缀冲突编码2. 编码成本3. 带权编码成本4. 编码算法5. 算法实现流程6. 时间复杂度与改进方案 0. 概述 学习Huffman树。 1. 无前缀冲突编码 在加载到信道上之前&#xff0c;信息被转换为二进制形式的过程称作编码&#xff08;encoding&#xff09;&…...

arcgisPro将一个图层的要素复制到另一个图层

1、打开两个图层&#xff0c;如下&#xff0c;其中一个图层中有两个要素&#xff0c;需要将其中一个要素复制到另一个图层中&#xff0c;展示如下&#xff1a; 2、选中待复制要素&#xff0c;点击复制按钮&#xff0c;如下&#xff1a; 3、下拉粘贴按钮列表&#xff0c;选择【选…...

难兄难弟——Java中 goto 与 const关键字

目录 简洁版&#xff1a; 详解版&#xff1a; 一&#xff1a;goto 二&#xff1a;const 简洁版&#xff1a; 1&#xff1a; 在Java中&#xff0c;goto也是一个关键字&#xff0c;但是取消了goto的使用&#xff0c;使用循环标记进行代替&#xff1b; 2&#xff1a;在Java中&a…...

如何优化大文件读取时的性能

1、分块读取 1、不要一次性将整个文件加载到内存中&#xff0c;而是将其分割成多个较小的块&#xff08;例如&#xff0c;每块1MB或更大&#xff09;&#xff0c;然后逐块读取和处理。 2、使用FileInputStream和BufferedInputStream来分块读取文件。 2、使用缓冲区 1、使用…...

【机器学习】Chameleon多模态模型探究

Chameleon&#xff1a;引领多模态模型的新时代 一、多模态模型的时代背景二、Chameleon模型的介绍三、Chameleon模型的技术特点四、Chameleon模型的性能评估五、Chameleon模型的代码实例 随着人工智能技术的深入发展&#xff0c;我们逐渐认识到单一模态的模型在处理复杂问题时存…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...