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.rhkb.cn/news/325390.html

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

相关文章

【爬虫】爬取A股数据写入数据库(二)

前几天有写过一篇 【爬虫】爬取A股数据写入数据库&#xff08;一&#xff09;&#xff0c;现在继续完善下&#xff0c;将已有数据通过ORM形式批量写入数据库。 2024/05&#xff0c;本文主要内容如下&#xff1a; 对东方财富官网进行分析&#xff0c;并作数据爬取&#xff0c;使…

10分钟了解Golang泛型

泛型是Golang在1.18版本引入的强大工具&#xff0c;能够帮助我们在合适的场合实现简洁、可读、可维护的代码。原文: Go Generics: Everything You Need To Know 导言 可能有人会觉得Go泛型很难&#xff0c;因此想要借鉴其他语言&#xff08;比如Java、NodeJS&#xff09;的泛型…

【大数据】HDFS、HBase操作教程(含指令和JAVA API)

目录 1.前言 2.HDFS 2.1.指令操作 2.2.JAVA API 3.HBase 3.1.指令操作 3.2.JAVA API 1.前言 本文是作者大数据专栏系列的其中一篇&#xff0c;前文中已经详细聊过分布式文件系统HDFS和分布式数据库HBase了&#xff0c;本文将会是它们的实操讲解。 HDFS相关前文&#x…

【Linux】-Linux基础命令[2]

目录 一、目录切换相关命令 1、cd 2、pwd 二、相对路径、绝对路径和特殊路径符 1、相对路径和绝对路径 2、特殊路径符 三、创建目录命令&#xff08;mkdir&#xff09; 四、文件操作命令 1、touch 创建文件 2、cat查看文件内容 3、more查看文件内容 4、cp命令复制文…

【.NET Core】你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟

你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟 文章目录 你认识Attribute之CallerMemberName、CallerFilePath、CallerLineNumber三兄弟一、概述二、CallerMemberNameAttribute类三、CallerFilePathAttribute 类四、CallerLineNumberAttribute 类…

7 Days yo Die 七日杀服务器开服联机教程

1、购买后登录服务器&#xff08;百度搜索莱卡云&#xff09;game.lcayun.com 进入控制面板后会出现正在安装的界面&#xff0c;安装时长约5分钟左右 安装成功后你就可以看到我们的控制台界面 复制服务器ip地址打开游戏➡加入游戏 有两种方法加入游戏 第一种方法&#xff1a;…

树莓派配置双网卡分别为AD HOC和AP模式

树莓派配置双网卡分别为AD HOC和AP模式 需求说明&#xff1a;为了实现分级网络管理&#xff0c;将多个无人机分簇&#xff0c;簇间使用AD HOC进行无中心自组织的网络&#xff0c;簇内使用AP-AC模式进行中心化网络。因此&#xff0c;需要配置一台设备&#xff0c;同时完成AD HOC…

什么是IP跳变?

IP 跳跃&#xff08;也称为 IP 跳动&#xff09;的概念已引起使用代理访问网站的用户的极大关注。但 IP 跳跃到底是什么&#xff1f;为什么它对于各种在线活动至关重要&#xff1f; 在本文中&#xff0c;我们将深入探讨 IP 跳跃的世界&#xff0c;探索其实际应用、用例、潜在问…

MySQL性能优化(提升数据库性能的措施)

万物皆有裂痕&#xff0c;那是光照进来的地方。大家好&#xff0c;今天给大家分享一下关于MySQL性能优化&#xff0c;在处理大型数据集和高负载情况下&#xff0c;MySQL数据库的性能优化是至关重要的。通过合理的调优策略&#xff0c;可以有效提高数据库的响应速度和稳定性。本…

【OceanBase诊断调优】—— SQL 执行报错而不能计入 SQL_AUDIT 的情况

通常&#xff0c;执行成果的 SQL 都会计入 SQL_AUDIT 中&#xff0c;而执行报错的 SQL 则需要依据其执行报错的阶段来决定是否计入 SQL_AUDIT 中。 在 OceanBase 数据库中&#xff0c;SQL 请求的执行流程如图所示。 如果 SQL 在进入 Executor 阶段前发生报错&#xff0c;则该 …

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第一周) - 自然语言处理介绍和线性分类

自然语言处理介绍和线性分类 1. 自然语言处理介绍2. 线性二分类3. 情感分析和基础特征提取 3.1. 情感分析3.2. 特征提取3.3. 文本预处理 4. 学习的基础-梯度下降算法5. 感知机6. 逻辑回归7. 情感分析8. 感知机和逻辑回归 1. 自然语言处理介绍 自然语言处理的目标是什么 能够解…

2024.1IDEA 到2026年

链接&#xff1a;https://pan.baidu.com/s/1hjJEV5A5k1Z9JbPyBXywSw?pwd9g4i 提取码&#xff1a;9g4i解压之后,按照 操作说明.txt 操作; IntelliJ IDEA 2024.1 (Ultimate Edition) Build #IU-241.14494.240, built on March 28, 2024 Licensed to gurgles tumbles You have…

Docker in Docker(DinD)原理与实战

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker幻想曲&#xff1a;从零开始&#xff0c;征服容器宇宙》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Docker简介 2、Docker …

使用 AI Assistant for Observability 和组织的运行手册增强 SRE 故障排除

作者&#xff1a;Almudena Sanz Oliv, Katrin Freihofner, Tom Grabowski 通过本指南&#xff0c;你的 SRE 团队可以实现增强的警报修复和事件管理。 可观测性 AI 助手可帮助用户使用自然语言界面探索和分析可观测性数据&#xff0c;利用自动函数调用来请求、分析和可视化数据…

(java)websocket服务的两种实现方式

1.基于java注解实现websocket服务器端 1.1需要的类 1.1.1服务终端类 用java注解来监听连接ServerEndpoint、连接成功OnOpen、连接失败OnClose、收到消息等状态OnMessage 1.1.2配置类 把spring中的ServerEndpointExporter对象注入进来 2.1代码示例 2.1.1 maven配置 <…

【iOS】RunLoop详解(二)

RunLoop详解&#xff08;二&#xff09; RunLoop 的概念RunLoop 与线程的关系RunloopRunloop与线程的关系RunLoop对外的接口Runloop的Mode举例说明小结 RunLoop 的内部逻辑RunLoop的底层实现苹果用RunLoop实现的功能AutoreleasePool事件响应手势识别界面更新定时器PerformSelec…

mysql中sql语句 exists 判断子句的用法

如果子查询成立才执行父查询 exists判断子查询的使用例子&#xff1a; 张三不存在所以前面的父查询不执行 后面的子句结果存在&#xff0c;所以前面的父查询被执行 where条件所连接的嵌套子查询都是&#xff0c;条件子查询 ———————————————————————…

【初级数据结构】队列

目录 前言队列的概念及结构队列的实现队列的结构队列的初始化队列的销毁入队出队取队头元素取队尾元素判断队列是否为空取出队列中元素个数代码测试 完整代码Queue.hQueue.ctest.c 前言 前面我们已经学习了栈&#xff0c;栈是一种后进先出的结构&#xff0c;即LIFO&#xff0c;…

资产公物仓管理系统|实现国有资产智能化管理

1、项目背景 资产公物仓管理系统&#xff08;智仓库DW-S201&#xff09;是一套成熟系统&#xff0c;依托互3D技术、云计算、大数据、RFID技术、数据库技术、AI、视频分析技术对RFID智能仓库进行统一管理、分析的信息化、智能化、规范化的系统。 项目设计原则 方案对公物仓资…

Java | Leetcode Java题解之第78题子集

题目&#xff1a; 题解&#xff1a; class Solution {List<Integer> t new ArrayList<Integer>();List<List<Integer>> ans new ArrayList<List<Integer>>();public List<List<Integer>> subsets(int[] nums) {dfs(0, nums…