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

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

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

相关文章

微信小程序路由跳转

1. wx.navigateTo 作用&#xff1a;保留当前页面&#xff0c;跳转到应用内的某个页面。特点&#xff1a;跳转后目标页面的生命周期函数 onLoad 和 onShow 会被触发。使用场景&#xff1a;一般用于跳转到应用内的其他页面&#xff0c;保留当前页面的状态&#xff0c;例如从文章…

Java数据类型

一、每种数据都定义了 明确的数据类型&#xff0c;在内存中分配了不同大小的 内存空间(字节)。 二、Java数据类型分为两种&#xff1a; 基本数据类型&#xff1a; 数值型&#xff1a; 整数类型&#xff0c;存放整数(byte[1] , short[2] , int[4] , long[8]) 浮点类型&#xff0…

UE5 读取本地图片并转换为base64字符串

调试网址&#xff1a;在线图像转Base64 - 码工具 (matools.com) 注意要加&#xff08;data:image/png;base64,&#xff09; FString UBasicFuncLib::LoadImageToBase64(const FString& ImagePath) {TArray<uint8> ImageData;// Step 1: 读取图片文件到字节数组if (!…

【蓝桥杯】第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组

答题结果页 - 蓝桥云课 (lanqiao.cn) 0子2023 - 蓝桥云课 (lanqiao.cn)&#xff08;暴力枚举 #include<bits/stdc.h> using lllong long; using ullunsigned long long; #define fir first #define sec second //#define int llconst int N1e510; const int mod1e97;int…

C++标准模板(STL)- C 内存管理库 - 分配内存 (std::malloc)

C 内存管理库 分配内存 std::malloc 定义于头文件 <cstdlib> void* malloc( std::size_t size ); 分配 size 字节的未初始化存储。 若分配成功&#xff0c;则返回指向分配的适合对任何标量类型对齐的内存块中&#xff0c;最低&#xff08;首&#xff09;字节的指针…

HT46R002 贴片 SOP8 经济型AD型OTP MCU单片机芯片

HT46R002在智能家居中的具体应用案例可以包括以下几个方面&#xff1a; 1. 智能照明控制&#xff1a;可以用于控制LED灯的亮度和色温&#xff0c;甚至可以通过手机APP远程控制开关和调节灯光效果。 2. 环境监测&#xff1a;用于监测室内温度、湿度、空气质量等&#xff0c;当检…

PostgreSQL和GaussDB对比

PostgreSQL和GaussDB对比 GaussDB 是华为推出的一款基于 PostgreSQL 的企业级数据库产品&#xff0c;通过对 PostgreSQL 进行一系列优化和扩展&#xff0c;使其更加适应企业应用的需求。以下是 PostgreSQL 和 GaussDB 两者之间的对比&#xff0c;从多个方面进行分析&#xff0…

httpJVM

目录 HTTPS如何保证安全 1&#xff09;引入非对称加密 2&#xff09;引入非对称加密 3.中间人攻击 4.解决中间人攻击 JVM 1.JVM内存划分 2.JVM类加载过程 八股内容 3.JVM中的垃圾回收机制 释放垃圾的策略 1.标记-清除 2.复制算法 3.标记-整理 分代回收 HTTPS如何…

GB-T 43696-2024 网络安全技术 零信任参考体系架构

GB-T 43696-2024 网络安全技术 零信任参考体系架构 编写背景 随着网络环境的日益复杂&#xff0c;传统的网络安全策略已经难以满足现代企业的需求。为了应对不断变化的安全威胁&#xff0c;零信任安全模型应运而生。GB-T 43696-2024《网络安全技术 零信任参考体系架构》是中国…

Android Graphics图形栈SurfaceFlinger之间各种Layer以及对应Buffer之间的关系

Android Graphics图形栈SurfaceFlinger之间各种Layer以及对应Buffer之间的关系 SurfaceFlinger layer之间的对应关系

MyBatis学习笔记(周五前学完)

MyBatis-Plus是一个MyBatis的增强工具。在MyBatis的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 通过MyBatis-Plus来进行数据插入时&#xff0c;它默认会 使用雪花算法来生成id&#xff0c;长度比较长 增删改的返回值都是统一的&#xff0c;影响的只有行数。…

给pdf加水印,python实现

from PyPDF2 import PdfReader, PdfWriterdef add_watermark(pdf_file_in, pdf_file_mark, pdf_file_out):"""把水印添加到pdf中"""pdf_output PdfWriter()input_stream open(pdf_file_in, rb)pdf_input PdfReader(input_stream, strictFalse…

基于魔搭开源推理引擎 DashInfer实现CPU服务器大模型推理--理论篇

前言 在人工智能技术飞速发展的今天&#xff0c;如何高效地在CPU上运行大规模的预训练语言模型&#xff08;LLM&#xff09;成为了加速生成式AI应用广泛落地的核心问题。阿里巴巴达摩院模型开源社区ModelScope近期推出了一款名为DashInfer的推理引擎&#xff0c;旨在解决这一挑…

机器学习补充学习

1、Adaboost算法 Adaboost算法是一种集成学习方法&#xff0c;通过结合多个弱学习器来构建一个强大的预测模型。核心思想&#xff1a;如果一个简单的分类器在训练数据上犯错误&#xff0c;那么它在测试数据上也可能犯错误。 Adaboost通过迭代地训练一系列的分类器&#xff0c…

QT-demo:0轴分布图表

版本&#xff1a;5.9 第一种: 使用 PyQt5 和 Matplotlib 库 安装所需的库&#xff1a; pip install PyQt5 matplotlib创建和显示图表&#xff1a; import sys import numpy as np import matplotlib.pyplot as plt from PyQt5.QtWidgets import QApplication, QMainWindow f…

【busybox记录】【shell指令】ln

目录 内容来源&#xff1a; 【GUN】【ln】指令介绍 【busybox】【ln】指令介绍 【linux】【ln】指令介绍 使用示例&#xff1a; 创建链接文件 - 链接文件&#xff08;默认 - 硬链接&#xff09; 创建链接文件 - 链接文件&#xff08;软链接&#xff09; 创建链接文件 -…

MongoDB CRUD操作:空值和缺失字段的查询

MongoDB CRUD操作&#xff1a;空值和缺失字段的查询 文章目录 MongoDB CRUD操作&#xff1a;空值和缺失字段的查询等式过滤器不等式过滤器类型检查检查是否存在使用 MongoDB Atlas 查询空或缺失字段导航至集合插入一个空文档 MongoDB中不同的查询运算符会以不同的方式处理空值&…

JeeSite 4.x and 5.x快速开发平台前端技术探索与实践

一、引言 随着企业信息化建设的不断推进&#xff0c;对于快速、高效、安全的企业级应用需求日益增长。JeeSite作为一款企业级快速开发平台&#xff0c;以其强大的后端功能和灵活的前端架构&#xff0c;为开发者提供了强大的支持。本文旨在探讨JeeSite快速开发平台在前端技术方…

新零售收银解决方案:传统门店超市的数字化-亿发

在数字化浪潮的推动下&#xff0c;零售行业正经历着前所未有的变革。阿里巴巴提出的“新零售”概念&#xff0c;不仅仅是一个商业口号&#xff0c;它代表了一种全新的商业模式和运营理念。随着时代的进步和消费需求的不断升级&#xff0c;新零售的兴起已成为行业发展的必然趋势…

学习笔记之——2D Gaussian Splatting(2DGS)

3DGS在辐射场重建中取得了巨大的成就&#xff0c;实现高质量的新视图合成和快速渲染。最近新出了3DGS的升级版本&#xff0c;2DGS。写下本博文记录本人学习及测试2DGS的过程&#xff0c;本博文仅为本人学习记录用~ Project WebsiteGithub CodeOriginal paper 目录 原理解读 …