echarts-gl 离线3D地图

1、安装依赖

echarts-gl 与 echarts 版本关系:

"echarts": "^5.2.0",    "echarts-gl": "^2.0.8"
# 执行安装
yarn add echarts-gl

2、下载离线地图

免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang
https://hxkj.vip/demo/echartsMap/
这里下载的新疆,选项的第一个和第二个都行
在这里插入图片描述

3、编写页面页面

参考:
vue组件,echarts制作3D地图,可点击凸起,hover高亮,可做飞鱼线(带天空盒子)
https://blog.csdn.net/qq_45234022/article/details/134439469

下载地图重名成 xinjiang.json,粘贴vue项目的 api/json/xinjiang.json 下

新建 aa.vue,访问即可看见效果

<template><div ref="myChartRef" class="top-title3">地图</div>
</template>
<script name="RoomForm" setup>import * as echarts from 'echarts'import 'echarts-gl' // 引入 3D效果import xinjiangGjson from '@/api/json/xinjiang.json' // 引入地图json数据// 获取vue3 的 proxy (同 vue2的 this)const { proxy } = getCurrentInstance()// 初始化ECharts实例const myChart1 = ref()const getOption = () => {return {tooltip: {// 自定义代码},series: [{type: 'map3D',name: '地图',// 相对于父容器比例center: ['50%', '50%'],selectedMode: 'single', // 地图高亮单选regionHeight: 3, // 地图高度map: 'xinjiangMap',viewControl: {// 缩放大小,数值越大,地图越小distance: 90,// 上下倾斜角度alpha: 30,// rotateSensitivity: [1, 1],// 左右倾斜角度beta: 5},label: {show: true, // 是否显示名字color: '#fff', // 文字颜色fontSize: 18, // 文字大小fontWeight: 'normal', // 文字大小formatter: function (params) {return `●`}},itemStyle: {color: '#176efa', // 地图背景颜色borderWidth: 2, // 分界线wdithborderColor: '#6254cc', // 分界线颜色opacity: 1},emphasis: {label: {show: true, // 是否显示高亮textStyle: {color: '#fff' // 高亮文字颜色}},itemStyle: {color: '#77da7d', // 地图高亮颜色borderWidth: 10, // 分界线wdithborderColor: '#6BECF5' // 分界线颜色}},shading: 'realistic',// 真实感材质相关配置 shading: 'realistic'时有效realisticMaterial: {detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780', // 纹理贴图textureTiling: 1, // 纹理平铺,1是拉伸,数字表示纹理平铺次数roughness: 1, // 材质粗糙度,0完全光滑,1完全粗糙metalness: 0, // 0材质是非金属 ,1金属roughnessAdjust: 0},light: {main: {color: '#fff',intensity: 1,shadow: true,shadowQuality: 'high',alpha: 25, //beta: 20},ambient: {color: '#fff',intensity: 0.6}}}]}}onMounted(() => {myChart1.value = markRaw(echarts.init(proxy.$refs['myChartRef']))echarts.registerMap('xinjiangMap', xinjiangGjson) // 注册地图// 使用刚指定的配置项和数据显示图表myChart1.value.setOption(getOption())})
</script>
<style lang="scss" scoped>.top-title3 {margin-top: -100px;width: 900px;height: 500px;}
</style>

4 预览效果如图

在这里插入图片描述

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

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

相关文章

容器化Jenkins远程发布java应用(方式二:自定义镜像仓库远程拉取构建)

1.创建maven项目 2.配置git、maven 3.阿里控制台>容器镜像服务>镜像仓库>创建镜像仓库 4.执行shell脚本&#xff08;推送镜像到阿里云镜像仓库&#xff09; 使用到登录阿里云仓库命令 #!/bin/bash # 服务名称 SERVER_NAMEplanetflix-app # 镜像tag IMAGE_TAG1.0.0-SN…

亚马逊云科技中国峰会:与你开启云计算与前沿技术的探索之旅

亚马逊云科技中国峰会&#xff1a;与你开启云计算与前沿技术的探索之旅 Hello,我是科技博主Maynor&#xff0c;非常高兴地向你们推荐亚马逊云科技中国峰会&#xff0c;这是一场将于 5 月 29 日至 30 日在上海世博中心举办的科技盛会&#xff0c;如果你对云计算、行业发展新趋势…

Android Studio高版本安卓模拟器抓取https包

Android Studio avd 设置 证书生成 *.cer格式证书​ openssl x509 -inform DER -subject\_hash\_old -in charles-ssl-proxying-certificate.cer​ *.pem格式证书​ openssl x509 -inform PEM -subject\_hash\_old -in charles-ssl-proxying-certificate.pem会输出 2cb30a9e …

kafka系列三:生产与消费实践之旅

在本篇技术博客中&#xff0c;我们将深入探索Apache Kafka 0.10.0.2版本中的消息生产与消费机制。Kafka作为一个分布式消息队列系统&#xff0c;以其高效的吞吐量、低延迟和高可扩展性&#xff0c;在大数据处理和实时数据流处理领域扮演着至关重要的角色。了解如何在这一特定版…

软件设计师笔记(一)-基础要点

本文内容来自笔者学习zst 留下的笔记&#xff0c;虽然有点乱&#xff0c;但是哥已经排版过一次&#xff0c;将就着看吧&#xff0c;查缺补漏&#xff0c;希望大家都能通过&#xff0c;记得加上免费的关注&#xff01;谢谢&#xff01;csdn贴图真的很废人&#xff01; 目录 一、…

【3dmax笔记】030:参考与冻结

一、参考 参考物体,需要是实体。例如将一个图片作为参考,导入软件中,基于图片进行二维样条线绘制。 首先绘制一个三维的平面,或者绘制一个二维的矩形,添加一个挤出修改器(将厚度设为0),勾选【生成贴图坐标】,如下图所示: 然后将图片(位于配套实验数据包中的data03…

数据治理的难题:如何化解?

在数字化转型的大潮中&#xff0c;数据治理成了每个企业都绕不开的话题。但是&#xff0c;数据治理这条路并不好走&#xff0c;充满了各种挑战。这些挑战不仅来自于技术&#xff0c;还有组织文化、流程和法律法规等方面。 挑战一&#xff1a;数据孤岛 在企业内部&#xff0c;…

容灾演练双月报|郑大一附院数据级容灾演练切换

了解更多灾备行业动态 守护数字化时代业务连续 目录 CONTENTS 01 灾备法规政策 02 热点安全事件 03 容灾演练典型案例 01 灾备法规政策 3月19日&#xff0c;工信部发布《工业和信息化部办公厅关于做好2024年信息通信业安全生产和网络运行安全工作的通知》。明确提出“…

如何防止WordPress网站内容被抓取

最近在检查网站服务器的访问日志的时候&#xff0c;发现了大量来自同一个IP地址的的请求&#xff0c;用站长工具分析确认了我的网站内容确实是被他人的网站抓取了&#xff0c;我第一时间联系了对方网站的服务器提供商投诉了该网站&#xff0c;要求对方停止侵权行为&#xff0c;…

五一超级课堂---Llama3-Tutorial(Llama 3 超级课堂)---第一节 Llama 3 本地 Web Demo 部署

课程文档&#xff1a; https://github.com/SmartFlowAI/Llama3-Tutorial 课程视频&#xff1a; https://space.bilibili.com/3546636263360696/channel/collectiondetail?sid2892740&spm_id_from333.788.0.0 操作平台&#xff1a; https://studio.intern-ai.org.cn/consol…

特征提取与深度神经网络(角点检测)

图像特征概述 图像特征表示是该图像唯一的表述&#xff0c;是图像的DNA HOG HOG &#xff08;Histogram of Oriented Gradients&#xff09;是一种用于目标检测的特征描述子。在行人检测中用的最多。HOG特征描述了图像中局部区域的梯度方向信息&#xff0c;通过计算图像中各个…

通义千问2.5正式发布,能力升级,全面赶超GPT4

简介 在人工智能的大潮中&#xff0c;大模型的竞争愈发激烈。今日&#xff0c;阿里云发布了其最新的通义千问2.5大模型&#xff0c;引起了业界的广泛关注。这款模型不仅在性能上全面赶超了GPT-4&#xff0c;还在多个基准测评中取得了优异的成绩&#xff0c;展现了国产AI技术的…

ARP命令

按照缺省设置&#xff0c;ARP高速缓存中的项目是动态的&#xff0c;每当发送以恶个指定的数据报且高速缓存中不存在当前项目时&#xff0c;ARP便会自动添加该项目。一旦高速缓存的项目被输入&#xff0c;就已经开始走向失效状态。因此&#xff0c;如果ARP高速缓存中的项目很少或…

SPSS之主成分分析

SPSS中主成分分析功能在【分析】--【降维】--【因子分析】中完成&#xff08;在SPSS软件中&#xff0c;主成分分析与因子分析均在【因子分析】模块中完成&#xff09;。 求解主成分通常从分析原始变量的协方差矩阵或相关矩阵着手。 &#xff08;1&#xff09;当变量取值的度量…

【Elasticsearch<五>末篇 ✈️✈️】结合 kibana 实现索引中 IP 地址分布地图可视化

目录 &#x1f44b;前言 &#x1f440;一、ES 地理位置基本了解 &#x1f331;二、IP 地址地图可视化 2.1 创建预处理通道 2.2 创建索引库 2.3 插入一条数据 2.4 观察写入后的数据 2.5 可视化展示 &#x1f604;三、章末 &#x1f44b;前言 继前面了解 Elasticsearch 的安…

酷企秀场景elementUi plus可视化diy

无论网络公司还是政务企业需求的所需的一单可回本的 独立部署集三大功能&#xff1a;电子画册、VR全景、地图秀等功能都可以可视化在线设计 后续免费增加 自定义表单、抽奖活动功能。 源码交付&#xff0c;独立私有化部署&#xff0c;无限多开&#xff0c;可视化设计&#x…

【linux】主分区,扩展分区,逻辑分区,动态分区,引导分区,标准分区

目录 主分区&#xff0c;扩展分区&#xff0c;逻辑分区 主分区和引导分区 主分区&#xff0c;扩展分区&#xff0c;逻辑分区&#xff08;标准分区&#xff09; 硬盘一般划分为一个“主分区”和“扩展分区”&#xff0c;然后在扩展分区上再分成数个逻辑分区。 磁盘主分区扩展…

JavaWeb之过滤器(Filter)与监听器(Listener)

前言 过滤器(Filter) 1.什么是过滤器 2.过滤器的语法格式 3.使用场景 3.1.如何防止用户未登录就执行后续操作 3.2.设置编码方式--统一设置编码 3.3.加密解密(密码的加密和解密) 3.4.非法文字筛选 3.5.下载资源的限制 监听器(Listener) 1.什么是监听器 2.监听器分类…

Ci24R1 (SOP8)2.4GHz无线收发一体、双向系统的智能家居芯片

Ci24R1 &#xff08;SOP8&#xff09;工作范围在2.4GHzISM频段&#xff0c;专为低系统应用成本的无线场合设计&#xff0c;集成嵌入式ARQ基带协议引擎的无线收发器芯片。它的工作频率范围为2400MHz-2525MHz&#xff0c;共有126个1MHz带宽的信道。 Ci24R1 &#xff08;SOP8&…

IPFoxy Tips:什么是静态住宅IP?静态ISP代理指南

静态住宅代理&#xff08;也称为静态ISP代理&#xff09;是最流行的代理类型之一。它们也是隐藏您的身份并保持在线匿名的最佳方法之一。您为什么要使用住宅代理而不是仅使用常规代理服务&#xff1f;下面我具体分享。 一、什么是静态住宅代理&#xff1f; 首先&#xff0c;我…