03 Cesium

2024-06-21 21:23| 来源: 网络整理| 查看: 265

在这里插入图片描述

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

界面预览

Geocoder，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用 bing 地图。Home Button，视角返回初始位置。Scene Mode Picker，选择视角的模式，有三种：3D、2D、哥伦布视图（CV）。Base Layer Picker，图层选择器，选择要显示的地图服务和地形服务。Navigation Help Button，导航帮助按钮，显示默认的地图控制帮助。Animation，动画器件，控制视图动画的播放速度。Credits Display，版权显示，显示数据归属。Timeline，时间线，指示当前时间，并允许用户跳到特定的时间。Fullscreen Button，全屏按钮。隐藏界面中的各个元素方法一，通过js代码控制

界面上默认的小控件可以通过在初始化 Viewer 的时候设置相应的属性来关闭，一下列出了界面默认的小控件的关闭方法，还有很多额外的属性，可以查看帮助文档。代码如下：

const viewer = new Cesium.Viewer('cesiumContainer', { geocoder: false, //隐藏查找控件 homeButton: false, //隐藏视角返回初始位置按钮 sceneModePicker: false, //隐藏视角模式3D 2D CV baseLayerPicker: false, //隐藏图层选择 navigationHelpButton: false, //隐藏帮助 animation: false, //隐藏动画控件 timeline: false, //隐藏时间线控件 fullscreenButton: false, //隐藏全屏 ...... ...... }); 方法二，通过css样式控制

可以通过控制 css 样式起到隐藏效果，代码如下：

.cesium-viewer-toolbar, /* 右上角按钮组 */ .cesium-viewer-animationContainer, /* 左下角动画控件 */ .cesium-viewer-timelineContainer, /* 时间线 */ .cesium-viewer-bottom /* logo信息 */ { display: none; } .cesium-viewer-fullscreenContainer /* 全屏按钮 */ {position: absolute; top: -999em;}

注：全屏按钮不能通过“display: none;”的方式来达到隐藏的目的，因为生成的按钮控件的行业样式设置了“display”属性，会强制覆盖 css 属性，所以还是建议直接通过 js 控制的方式隐藏更合理一些。

如何隐藏版权信息

版权信息需要通过 js 控制隐藏，代码如下：

// 隐藏版权信息 viewer._cesiumWidget._creditContainer.style.display = "none";

下载地址是：https://cesium.com/downloads/，不过众所周知，速度很感人。或者你想了解最新的进展可以直接克隆 GitHub 上的代码 Cesium GitHub 地址，不过注意有些特性在分支版本里面才有。

下载后，将 zip 文件解压到您选择的新目录（自定义即可）中，内容应该看起来像下面（版本不同会存在差异）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDOdWSh6-1648020026983)(…/assets/环境搭建01.png)]

注意：直接点击 index.html 是无效的，需要放入WebServer 容器中，才能运行起来。

其它一些设置

除了界面中需要隐藏的控件之外，还一些其它的配置，比如：

当然还有更多的配置或者设置，需要用到的时候再拿出来配置即可。

【本文地址】

公司简介

联系我们