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/17534.shtml

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

相关文章

【代码随想录】【算法训练营】【第21天】 [530]二叉搜索树的最小绝对差 [501]二叉搜索树的众数 [236]二叉树的最近公共祖先

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 21&#xff0c;天气不错的周二~ 题目详情 [530] 二叉搜索树的最小绝对差 题目描述 530 二叉搜索树的最小绝对差 解题思路 前提&#xff1a;二叉搜索树 思路&#xff1a;根据二叉搜索树的中…

长安链使用Golang编写智能合约教程(二)

本篇说的是长安链2.3.的版本的智能合约&#xff0c;虽然不知道两者有什么区别&#xff0c;但是编译器区分。 教程三会写一些&#xff0c;其他比较常用SDK方法的解释和使用方法 编写前的注意事项&#xff1a; 1、运行一条带有Doker_GoVM的链 2、建议直接用官方的在线IDE去写合…

公钥,私钥,数字签名,证书

公钥和私钥是一对&#xff0c;公钥是公开的&#xff0c;比如服务器持有公钥&#xff0c;对数据进行加密&#xff0c;接收端只有有对应的私钥才能对数据进行解密&#xff0c;私钥是不公开私自的。 数字签名跟上面是反过来的过程&#xff0c;客户端发送给服务器之前&#xff0c;…

奥枫软件Java要个16K遇到地狱级难度,醉了。。。

我只能说地狱难度&#xff0c;没绝对把握就别去了。我凭借前辈的经验&#xff0c;和当时天时地利人和&#xff0c;六道题答得很不错&#xff0c;但还是没通过。我有备而来都没过&#xff0c;现场写那些应该都是白忙活了。 一面 1&#xff0c;分割一个整数。如123&#xff0c;结…

Blender 学习笔记(一)快捷键记录

Blender 的快捷键映射非常强大&#xff0c;如果学会将会快速提高工作效率&#xff0c;本文抄自 Blender 4.1 Manual&#xff0c;基于 Blender 4.1&#xff0c;因为自己使用 Windows&#xff0c;所以只记录 Windows 相关快捷键。 全局快捷键 键位作用ctrl0打开文件ctrls保存文…

前端RN是什么:深入解析React Native的前端革命

前端RN是什么&#xff1a;深入解析React Native的前端革命 在前端技术的飞速发展中&#xff0c;一个新的名词逐渐崭露头角——前端RN。对于许多初学者和开发者来说&#xff0c;这个术语可能充满了神秘与困惑。那么&#xff0c;前端RN究竟是什么呢&#xff1f;本文将从四个方面…

Llama3大模型原理代码精讲与部署微调评估实战

课程链接&#xff1a;Llama3大模型原理代码精讲与部署微调评估实战_在线视频教程-CSDN程序员研修院 本课程首先讲述了有关Transformer和大语言模型(LLM)的关键前置知识, 包括注意力机制、多头注意力、编码器-解码器结构等Transformer原理, 以及LLM的文本生成和LLM微调技术原理…

抖音本地生活服务商入驻指南分享!

当前&#xff0c;各大平台的团购外卖业务持续火爆&#xff0c;并逐渐成为众多创业赛道中的大热门。其中&#xff0c;本地生活服务更是在短时间内杀出重围&#xff0c;成为创业者们的首选。 根据抖音生活服务近日发布的《2023年度数据报告》&#xff0c;2023年&#xff0c;抖音生…

2024年湖北水平能力测试能搞定吗?

武汉中级职称报名正式高一段落&#xff0c;意味着今年武汉市中级职称报名除开东湖高新区之外&#xff0c;其余地方都已经正式截止了&#xff0c;那么接下来大家都在准备6月中下旬的水平能力测试考试。 水平能力测试分为两种&#xff1a;面试答辩或者笔试机考试卷&#xff0c;面…

vue脚手架与创建vue项目

一、前言 vue脚手架的安装与创建vue项目需要先行安装配置node与npm&#xff0c;详情可以看node、npm的下载、安装、配置_node 下载安装-CSDN博客 二、vue脚手架的使用 1、vue与vue脚手架的版本 Vue脚手架&#xff08;Vue CLI&#xff09;是Vue.js官方提供的一个命令行工具&…

超级好用的C++实用库之套接字

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 C中的Socket编程是实现网络通信的基础&#xff0c;允许程序通过网络与其他程序交换数据。…

【基础篇-Day8:JAVA字符串的学习】

目录 1、常用API2、String类2.1 String类的特点2.2 String类的常见构造方法2.3 String类的常见面试题&#xff1a;2.3.1 面试题一&#xff1a;2.3.2 面试题二&#xff1a;2.3.3 面试题三&#xff1a;2.3.4 面试题四&#xff1a; 2.4 String类字符串用于比较的方法2.5 String类字…

埃隆·马斯克的 xAI 募集 60 亿美元,瞄准 AI 超级计算机|TodayAI

埃隆马斯克&#xff08;Elon Musk&#xff09;创立的人工智能公司 xAI 宣布成功募集了 60 亿美元的资金&#xff0c;用于推动其“首批产品推向市场&#xff0c;建立先进的基础设施&#xff0c;并加速未来技术的研发”。马斯克透露&#xff0c;xAI 目前的估值已达到 180 亿美元&…

css 中box-shadow使用总结

还记得我之前还是 ie 时代的时候我们如果遇到有投影&#xff0c;阴影的设计稿&#xff0c;一般的做法就是使用图片作为背景实现&#xff0c;如果要是做自适应宽高还需要利用好几个元素拼接起来设置图片背景实现&#xff0c;而现在我们想要实现投影只需要一个 css 属性 box-shad…

如何简化不同网间文件摆渡的操作流程,降低IT人员工作量?

为了保护内部核心数据不被泄露&#xff0c;同时有效屏蔽外部网络攻击的风险&#xff0c;企业大多会选择实施网络隔离。将“自己人”与“外人”隔离&#xff0c;具有较强的安全敏感性。有些企业还会在内部网络中进一步划分&#xff0c;比如划分为研发网、办公网、生产网等&#…

PaliGemma – 谷歌的最新开源视觉语言模型(一)

引言 PaliGemma 是谷歌推出的一款全新视觉语言模型。该模型能够处理图像和文本输入并生成文本输出。谷歌团队发布了三种类型的模型&#xff1a;预训练&#xff08;PT&#xff09;模型、混合&#xff08;Mix&#xff09;模型和微调&#xff08;FT&#xff09;模型&#xff0c;每…

Vue3实战笔记(48)— reactive大揭秘:Vue 3中复杂数据结构的响应式处理

文章目录 前言reactive 的基本用法1、创建响应式对象&#xff1a;2、在模板中使用响应式对象&#xff1a;3、响应式对象的嵌套&#xff1a; 总结 前言 前些天了解了ref&#xff0c;开发时候大部分时候都是直接用ref&#xff0c;其实还有reactive这玩意&#xff0c;有时候用起来…

C语言实现正弦信号扫频

C语言实现正弦信号扫频 包含必要的头文件:首先,你需要包含 <stdio.h> 和 <math.h> 头文件,分别用于输入输出和数学函数的使用。 定义扫频参数:定义正弦扫频的参数,例如起始频率、结束频率、扫频时间等。 生成正弦波信号:使用正弦函数生成扫频信号,可以根…

【Django】从零开始学Django【2】

五. CBV视图 Django植入了视图类这一功能&#xff0c;该功能封装了视图开发常用的代码&#xff0c;无须编写大量代码即可快速完成数据视图的开发&#xff0c;这种以类的形式实现响应与请求处理称为CBV(Class Base Views)。 1. 数据显示视图 数据显示视图是将后台的数据展示…

C语言 static extern 关键字详解

1、建立2个文件&#xff1b;文件1&#xff1a;file1.c // 文件&#xff1a;counter.c#include <stdio.h>static int count 0; // 声明一个静态全局变量void increment() {count; // 对静态全局变量进行递增操作 } static int n_function() //int n_function() {printf(…