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;如果你对云计算、行业发展新趋势…

计算机网络教材——谢希仁教材与配套PPT课件和《计算机网络——自顶向下方法》

教材链接: https://pan.baidu.com/s/1MUkgTVNMvhFdkGxAd0U7Ew?pwdn3g4 提取码: n3g4 ppt资源&#xff1a;课程包列表 (51zhy.cn) 计算机网络——自顶向下方法&#xff08;资源在下面的评论区里&#xff09;&#xff1a;计算机网络自顶向下方法第7版中文PDF习题参考 - 哔哩哔…

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 …

使用Python实现循环神经网络(RNN)的博客教程

循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一种能够处理序列数据的神经网络模型&#xff0c;常用于自然语言处理、时间序列分析等任务。本教程将介绍如何使用Python和PyTorch库实现一个简单的循环神经网络&#xff0c;并演示如何在一个简…

java 中文繁简体转换工具 opencc4j

目录 一、简介 二、使用案例 繁简体转换 转为简体 toSimple 转为繁体 toTraditional 繁简体判断 是否为简体 isSimple 三、优缺点 优点 一、简介 OpenCC4J 是 OpenCC 的 Java 版本&#xff0c;OpenCC 是一个开源的简体字到繁体字转换工具&#xff0c;它支持多种转换配…

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

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

Java 高级面试问题及答案 更新(二)

Java 高级面试问题及答案 以下是几个常见的Java高级面试问题及其答案&#xff0c;供参考。 1. 什么是Java内存模型&#xff08;JMM&#xff09;&#xff1f;它如何影响并发编程&#xff1f; 问题&#xff1a;在Java中&#xff0c;内存模型&#xff08;JMM&#xff09;是一个…

共享旅游创业,千益畅行到底是不是新一轮的割韭菜?

共享旅游创业&#xff0c;千益畅行到底是不是新一轮的割韭菜&#xff1f; 共享旅游创业是近年来兴起的一种业务模式&#xff0c;通过互联网平台将旅游资源与用户进行共享和交易&#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…

C++ 容器(二)——容器操作

一、容器的修改 容器修改函数 insert()&#xff1a;在指定位置插入一个或多个元素erase()&#xff1a;删除指定位置或指定范围的元素push_back()&#xff1a;将元素添加到容器的末尾pop_back()&#xff1a;删除容器的最后一个元素 push_front()&#xff1a;将元素添加到容器的开…

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

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

PHP关联数组[区别,组成,取值,遍历,函数]

关联数组 相较于数值数组&#xff0c;关联数组的索引可以为字符串和数字&#xff0c;关联数组元素也可称为键值对&#xff0c;索引为键&#xff0c;值为值。 源码 <?php echo "<hr>"; //水平线标签//关联数组$arr3 array(); //创建空的数组//关联数…

C++并发:线程函数传参(一)

一、问题 当创建 std::thread 对象时&#xff0c;传递给线程的函数的所有参数都会被复制或移动到新创建的线程的内存空间中。这是为了确保线程的执行不会依赖于父线程可能销毁的栈上变量&#xff0c;从这个机制上看&#xff0c;这是很合理的。 在新的线程的栈上&#xff0c;这…

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

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