【vue2 + Cesium】使用Cesium、添加第三方地图、去掉商标、Cesium基础配置、地图放大缩小事件、获取可视区域、层级、高度

参考文章：
vue2 使用 cesium 篇【第一篇】
vue2 使用 cesium 【第二篇-相机视角移动+添加模型】

vue2 项目模版：
vue2-common

安装 cesium

npm install cesium --save

这个就很简单，只需要一句简简单单的命令就可以实现在 vue 项目中安装 cesium 了。

在这里插入图片描述
这个样子嘞，就是安装完成了，会开发 vue 的都晓得哈。

在这里插入图片描述
看一下依赖包里面，也成功下载了 cesium 的依赖。

接入项目 cesium

node_modules中找到cesium,复制build文件夹下Cesium文件夹到public文件夹下。复制完后就是下图

在这里插入图片描述
好的第一步完成！

然后第二步，在项目 index.html 文件中，head 标签里面，引入 cesium 的全局样式和cesium 源码。

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script type="text/javascript" src="./Cesium/Cesium.js"></script>

就是下面这个样子哈。

在这里插入图片描述
好的，完成之后我们重新启动一下项目，记得哈，重启一下项目！

使用 cesium

vue文件中 粘贴代码

<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",};
</script><style scoped>
#my-map {width: 100%;height: 100%;background-color: black;
}
</style>

随后刷新页面，得到一个黑色的页面

在这里插入图片描述
非常好，效果出来了，到现在还没有用到一点儿的 cesium 别急，下面开始哈。

我们写一个 init() 方法，然后在 init() 方法里面呢，实现把这个 div 渲染成一个蓝星。

   init() {this.viewer = new Cesium.Viewer('my-map', {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});}

完成！蓝星加载出来了！

在这里插入图片描述

到此处完整vue代码

<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",methods: {init() {this.viewer = new Cesium.Viewer("my-map", {homeButton: false,sceneModePicker: false,baseLayerPicker: false, // 影像切换animation: true, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: false, // 是否显示地名查找控件timeline: true, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});},},mounted() {this.init();},};
</script><style scoped>#my-map {width: 100%;height: 100%;background-color: black;}
</style>

Cesium 相关资料

首先分享一些资料给各位，希望有用：

Cesium 官网：https://cesium.com/
Cesium 官网 API：https://cesium.com/learn/cesiumjs/ref-doc/
Cesium 中文API： http://cesium.xin/cesium/cn/Documentation1.62/
Cesium 官方案例：https://sandcastle.cesium.com/
Cesium 技能树：https://www.wenjiangs.com/doc/egyaeyav
Cesium 中文社区：http://cesium.xin/
3D 模型下载网站：https://sketchfab.com/feed

上边这部分网站呢，也许对你有用，需要的话可以看一下。

cesium token 申请和设置

使用cesium需要申请一个token值，这个地方就和百度地图或者是高德地图一样，需要一个 token 秘钥来进行操作，确保在使用 cesium 的过程中不会出现 token 过期造成地图加载不出来的问题。当然了，现在看我们是一点问题没有，蓝星地球可以正常加载，但是随着我们测试编写的时间增长，调用 cesium 图层次数过多，就会出现图层加载不出来，就是超次数，这个是时候，我们地球可能就白了，因为没有实时图层返回了，这个时候就需要 token，所以说我们现在就设置上 token，防止这种事情的发生。

首先我们需要去 cesium 官网去申请一个 token，方法很简单：

cesium申请token请点击 这里

在这里插入图片描述

登录之后

在这里插入图片描述
然后我们就成功的获取到了一个 cesium 的秘钥，然后我们在 TCesium.js 文件中的构造器函数中，加载这个 token 就可以了。

Cesium.Ion.defaultAccessToken = '你申请的cesium的token'

就像下面这个样子：

在这里插入图片描述
好的，这样子的话， token 就申请使用完成了。

cesium 基础配置

相关API

我们在上面的代码配置了一些基本的设置项，稍微过一下子哈。

this.viewer = new Cesium.Viewer("my-map", {homeButton: true,sceneModePicker: true,baseLayerPicker: true, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: true, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件
});

就是上面这一块，我写了几个常用的，先全部设置为 false，就是不使用，我们稍微说几个常用的看一下哈。

homeButton

我们先看 homeButton 参数，我们如果设置为 true。这个是主页按钮，啥意思呢，就是我们加载出蓝星之后，我们可以鼠标转动嘛、放大缩小啥的。如果我们设置 homeButton 为 true 之后，在页面的右上角就会出现一个主页按钮，当我们改变过蓝星之后，点击这个按钮，会回到我们最开始的视角。

在这里插入图片描述

sceneModePicker

sceneModePicker 是地图显示的维度控制，他提供 二维平面 和 三维球体 两种方式。当设置为 true 的时候，右上角会提供一个维度切换的按钮，帮助我们进行蓝星维度的展示切换功能。

在这里插入图片描述

baseLayerPicker

Cesium 为我们提供了一些底图，这个 baseLayerPicker 设置为 true 的时候，右上角会有一个图层切换的按钮，但是我觉得没用，不是没用，不好用，一般都是自己写，不用他默认提供的。

在这里插入图片描述

animation 和 timeline

这两个是时间轴相关的，一般用不到，但是不保险，需要的时候没有还真不行，这两个要同时设置，true 的时候都 true，false 的时候都是 false。当然也不绝对哈，就是 timeline 的时候呢，就开始时间轴功能，animation 就是显示时间轴的控件，可以直观的控制时间轴的进度、速度之类的。

在这里插入图片描述

selectionIndicator

selectionIndicator 是要素选中框，啥意思呢，就比如说我的蓝星上有模型，那么我点击蓝星上模型的时候呢，就会出现一个框框把模型给框住，我觉得没必要。

fullscreenButton

这个是全屏按钮，设置为 true 的时候呢，右下角就会出现一个全屏按钮，点击之后，cesium 就会进行全屏显示。

infoBox

这个是要素信息框，一般都是 false，啥呢，就是蓝星上面有一个模型，点击模型的时候会显示这个模型的信息之类的，一般不用他自带的，一般是自己写或者是自己改，一般设置 false 就可以。

geocoder

这个是地名查找组件，开启后，右上角会出现一个查询地址的组件，但是不好用，一般情况下，不显示就行。

在这里插入图片描述

navigationHelpButton

这是一个帮助按钮，如果设置为 true 的时候，右上角会有一个帮助的提示，这个关闭就可以。

在这里插入图片描述

多余样式隐藏

我们使用 cesium 的时候发现哈，左下角会有一些版权信息，我们想隐藏的话也很简单。

只需要在 viewer 创建完成之后，把他的版权 DOM 设置为 none 就可以了

this.viewer._cesiumWidget._creditContainer.style.display = 'none'

这样界面就干净多了，除了蓝星啥都没有了。

在这里插入图片描述

代码截图

在这里插入图片描述

添加第三方底图

相关文档

我们到现在使用的底图都是 cesium 默认提供的，如果我们需要用自己的底图也很简单，无论是 geoserve 自己发布的还是 高德底图 、百度底图、天地图底图都是可以的，但是有一点需要说一下哈，就是这个高德、百度、google 底图都是有偏移的，直接放进来可能会有偏差，所以说建议使用天地图的。

以天地图为例，我们先创建一个底图对象，使用天地图需要申请 tk 值，这个自己去申请，如果不会的话，看我关于天地图的博文，里面有介绍和步骤。

代码

const imageLayers = this.viewer.scene.imageryLayers;
imageLayers.remove(imageLayers.get(0)); //移除默认影像图层
const TDTTK = "key"; //填入你自己的天地图Key
// 天地图影像
const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtLayer);
// 天地图注记
const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,
});
this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);

这样就添加进来了。

效果图

在这里插入图片描述
截止到这里完整代码:

<template><div id="my-map"></div>
</template><script>export default {name: "HomeView",data() {return {TDT_SL: null,};},methods: {init() {Cesium.Ion.defaultAccessToken ="cesium_key";this.viewer = new Cesium.Viewer("my-map", {homeButton: true,sceneModePicker: true,baseLayerPicker: true, // 影像切换animation: false, // 是否显示动画控件infoBox: false, // 是否显示点击要素之后显示的信息selectionIndicator: false, // 要素选中框geocoder: true, // 是否显示地名查找控件timeline: false, // 是否显示时间线控件fullscreenButton: false,shouldAnimate: false,navigationHelpButton: false, // 是否显示帮助信息控件});// 注释版权信息this.viewer._cesiumWidget._creditContainer.style.display = "none";const imageLayers = this.viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层const TDTTK = "key"; //填入你自己的天地图Key// 天地图影像const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});this.viewer.imageryLayers.addImageryProvider(tdtLayer);// 天地图注记const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});this.viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);},},mounted() {this.init();},};
</script><style scoped>#my-map {width: 100%;height: 100%;background-color: black;}
</style>

销毁 cesium

创建说完了，现在说一下销毁，销毁的话就很简单了，就是一句话：

this.viewer.destroy()

执行上面这句话就直接销毁了，这个一般是组件注销了，不展示 cesium 的时候使用，防止一直占用资源啥的，具体情况具体分析哈！

地图放大缩小

其实 cesium 的放大缩小和百度地图他们不一样。cesium 的放大缩小其实就是相机高度，相机高度变小就是放大，相机高度变大就是缩小。理解吧？相机高了，视角大了，蓝星上面东西就小了。

首先是放大：

/*** 地图放大*/
zoomIn() {// viewer 为 Viewer 对象let position = this.viewer.camera.position;let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次缩小 20 倍，参数可改let moveRate = cameraHeight / 20.0;this.viewer.camera.moveForward(moveRate);
}

然后是缩小：

/*** 地图缩小*/
zoomOut() {// viewer 为 Viewer 对象let position = this.viewer.camera.position;let cameraHeight = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;// 每次缩小 20 倍，参数可改let moveRate = cameraHeight / 20.0;this.viewer.camera.moveBackward(moveRate);
}

道理都是一样的！

可以写两个按钮分别是“放大”和“缩小”，点击按钮的时候，执行这两个方法就可以了！

获取可视区域、高度、层级

获取可视区域这个很简单呀，一行代码完事：

let rectangle = this.viewer.camera.computeViewRectangle();

我们可以看一下返回的数据：

在这里插入图片描述
我们看到哈，打印出来的坐标不是地理坐标，转换一下就可以了。

let rectangle = this.viewer.camera.computeViewRectangle();
let east = Cesium.Math.toDegrees(rectangle.east).toFixed(6);  // 转地理坐标
console.log(rectangle, east)

在这里插入图片描述
如果需要的话，挨个转换一下也可以。

获取相机高度的话更简单了。

let height = Math.ceil(this.viewer.camera.positionCartographic.height).toFixed(0);
console.log("相机高度----->> ", height)

直接打印一下看结果：

在这里插入图片描述
这个单位是米哈。

然后是层级，就和百度高德一样，层级显示：

let zoom = this.heightToZoom(height).toFixed(0)
console.log("层级----->> ", zoom)

这是需要用到的一个方法，为啥里面是这样，我也不知道，我也是从网上抄的这个方法：

heightToZoom(height) {let A = 40487.57;let B = 0.00007096758;let C = 91610.74;let D = -40467.74;return Math.round(D + (A - D) / (1 + Math.pow(height / C, B)));
}

然后看一下结果：

在这里插入图片描述

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

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

相关文章

vllm-openai多服务器集群部署AI模型

vllm-openai多服务器集群部署AI模型

服务器配置是两台ubantu系统电脑，每台电脑安装两张4090-48G显存的显卡，共计192G显存。 服务器1 服务器2 准备工作： 1.两台电脑都已经安装了docker 2.两台电脑都已经安装了nvidia驱动 参考vllm官方资料 https://docs.vllm.ai/en/latest/serving/distributed_serving.html…
阅读更多...
【电源】斩波电路

【电源】斩波电路

文章目录 前言定义概念 缩写降压斩波电路使用步骤总结参考文献 前言 进行大创项目开发的学习 bilibili 定义概念 缩写 斩波电路&#xff1a;分为降压&#xff0c;电荷泵&#xff0c;升压&#xff0c;升降压&#xff0c;Cuk&#xff0c;Speic&#xff0c;Zeta 等等 降压斩…
阅读更多...
Hadoop集群组成

Hadoop集群组成

&#xff08;一&#xff09;Hadoop的组成 对普通用户来说&#xff0c; Hadoop就是一个东西&#xff0c;一个整体&#xff0c;它能给我们提供无限的磁盘用来保存文件&#xff0c;可以使用提供强大的计算能力。 在Hadoop3.X中&#xff0c;hadoop一共有三个组成部…
阅读更多...
c++基础知识-图论进阶

c++基础知识-图论进阶

一、拓扑排序 1、基础知识 1&#xff09;什么是拓扑排序 对一个有向无环图G进行拓扑排序&#xff0c;是将G中所有顶点排成一个线性序列&#xff0c;使得图中任意一对顶点u和v&#xff0c;若&#xff0c;则u在线性序列中出现在v之前。 2&#xff09;拓扑排序的操作方法 重复执行…
阅读更多...
从Scaling Laws中解析大模型训练的边际递减临界点

从Scaling Laws中解析大模型训练的边际递减临界点

前言 当我们拆解GPT-4到DeepSeek的演进路径&#xff0c;会发现一个反直觉的真相&#xff1a;​AI的智能跃迁不依赖参数堆砌&#xff0c;而取决于对"结构-能量-信息"三元关系的精准把控。就像人类大脑在进化中通过皮层折叠而非单纯增大体积来实现智能突破&#xff0c…
阅读更多...
Word 小黑第20套

Word 小黑第20套

对应大猫21 特定一页设为横向 上下用分页符
阅读更多...
【从0到1搞懂大模型】RNN基础（4）

【从0到1搞懂大模型】RNN基础（4）

先说几个常用的可以下载数据集的地方 平台&#xff1a;kaggle&#xff08;https://www.kaggle.com/datasets&#xff09; 和鲸社区&#xff08;https://www.heywhale.com/home&#xff09; 阿里天池&#xff08;https://tianchi.aliyun.com/&#xff09; 其他&#xff1a;海量公…
阅读更多...
openEuler24.03 LTS下安装MySQL8

openEuler24.03 LTS下安装MySQL8

前提条件 拥有openEuler24.03 LTS环境&#xff0c;可参考&#xff1a;Vmware下安装openEuler24.03 LTS 步骤 卸载原有mysql及mariadb sudo systemctl stop mysql mysqld 2>/dev/null sudo rpm -qa | grep -i mysql\|mariadb | xargs -n1 sudo rpm -e --nodeps 2>/dev/…
阅读更多...
如何在Odoo 18中实现OWL通知服务

如何在Odoo 18中实现OWL通知服务

如何在Odoo 18中实现OWL通知服务 OWL&#xff08;Odoo Web Library&#xff09;是Odoo的前端框架&#xff0c;用于构建现代化的动态响应式用户界面。在早期版本中&#xff0c;Odoo 前端设计与开发使用的是诸如 QWeb 这类较为老旧的框架&#xff0c;而随着 Odoo 每发布一个新版本…
阅读更多...
Unet nn-Unet

Unet nn-Unet

Unet && nn-Unet&#xff1a; 文章题目&#xff1a;U-Net: Convolutional Networks for Biomedical Image Segmentation 代码&#xff1a;https://lmb.informatik.uni-freiburg.de/people/ronneber/u-net/ 文章题目&#xff1a;nnU-Net: Self-adapting Framework for U…
阅读更多...
【扩散模型入门】Latent Diffusion

【扩散模型入门】Latent Diffusion

1. 概述 扩散模型为公众所知的一个主要原因是Stable Diffusion（SD）的推出展现出了远超以往的图像合成效果，而SD的主要技术就是Latent Diffusion Model（LDM）。 实际上，LDM的核心idea非常简单： 为了确保生成质量，LDM尽可能提升去噪模型的规模。提升模型规模往往也会同步…
阅读更多...
搭建主从服务器

搭建主从服务器

任务需求 客户端通过访问 www.nihao.com 后&#xff0c;能够通过 dns 域名解析&#xff0c;访问到 nginx 服务中由 nfs 共享的首页文件&#xff0c;内容为&#xff1a;Very good, you have successfully set up the system. 各个主机能够实现时间同步&#xff0c;并且都开启防…
阅读更多...
SAP HANA on AWS Amazon Web Services

SAP HANA on AWS Amazon Web Services

SAP HANA on AWS Amazon Web Services
阅读更多...
vue项目如何实现条件查询？

vue项目如何实现条件查询？

目录 1.前端 2.后端 3.mybatis的sql语句 结语 1.前端 说白了就是&#xff0c;无论该参数是否是空字符串&#xff0c;都会传递到后端。&#xff08;反正不是null就行&#xff09;。 2.后端 在controller层中&#xff0c;使用RequestParam注解接收名为registerName的参数&…
阅读更多...
C++：类对象的存储方式

C++：类对象的存储方式

如何计算类对象的大小 class A { public: void PrintA() { cout<<_a<<endl; } private: char _a; }; 类中既可以有成员变量&#xff0c;又可以有成员函数&#xff0c;那么一个类的对象中包含了什么&#xff1f;如何计算 一个类的大小&#xff1f; 类对象的存储方…
阅读更多...
Windows 图形显示驱动开发-WDDM 3.0功能- 硬件翻转队列（一）

Windows 图形显示驱动开发-WDDM 3.0功能- 硬件翻转队列（一）

WDDM 3.0 之前的翻转队列模型 许多新式显示控制器支持对按顺序显示的多个帧排队的能力。 从 WDDM 2.1 开始&#xff0c;OS 支持将在下一个 VSync 中显示的多个未完成的翻转覆盖请求。 显示微型端口驱动程序 (KMD) 通过 DXGK_DRIVERCAPS 中的 MaxQueuedMultiPlaneOverlayFlipVS…
阅读更多...
OSPF-5 3类LSA SummaryLSA

OSPF-5 3类LSA SummaryLSA

上一期我们介绍了2类LSA Network LSA的内容信息以及怎样从2类LSA中的信息描绘出一张具体的拓扑信息以及网段信息 这一期我们将介绍3类LSA Summary LSA区域间的LSA看看3类LSA是怎样把域间的路由信息传递到别的区域的 一、概述 由于3类LSA是用来描述我们域间的路由信息所以它是…
阅读更多...
AI驱动的视频字幕提取与翻译工具

AI驱动的视频字幕提取与翻译工具

青梧字幕是一款基于Whisper技术的AI字幕提取工具&#xff0c;专为视频制作者、翻译人员和自媒体创作者设计。它通过先进的语音识别算法&#xff0c;能够自动从视频文件中提取字幕内容&#xff0c;并支持多种语言和字幕格式&#xff0c;极大地简化了字幕制作流程。 目前暂支持 …
阅读更多...
ONNX：统一深度学习工作流的关键枢纽

ONNX：统一深度学习工作流的关键枢纽

引言 在深度学习领域&#xff0c;模型创建与部署的割裂曾是核心挑战。不同框架训练的模型难以在多样环境部署&#xff0c;而 ONNX&#xff08;Open Neural Network Exchange&#xff09;作为开放式神经网络交换格式&#xff0c;搭建起从模型创建到部署的统一桥梁&#xff0c;完…
阅读更多...
第十一次CCF-CSP认证（含C++源码）

第十一次CCF-CSP认证（含C++源码）

第十一次CCF-CSP认证 打酱油满分题解 公共钥匙盒满分题解solution 1solution 2&#xff08;优先队列优化&#xff09; 通信网络&#xff08;图的遍历问题&#xff09;满分题解 打酱油 题目链接 满分题解 思路&#xff1a;做完这题我觉得这里有点像贪心算法但又是常识性问题&a…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023