学习 Cesium (三)：净化Cesium与使用离线影像

最新推荐文章于 2024-07-23 13:39:33 发布

原创最新推荐文章于 2024-07-23 13:39:33 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Cesium 专栏收录该内容

5 篇文章

订阅专栏

本文档介绍了如何净化Cesium的UI组件，以及如何在项目中使用已下载的离线影像数据。通过禁用不必要的工具按钮，如查找位置、动画、时间线等，实现了更简洁的界面。同时，详细说明了如何配置Cesium来使用本地的Assets文件夹中的NaturalEarthII纹理贴图，从而实现离线模式。在使用离线数据后，不再需要token，最终展示了一个干净且无网络依赖的Cesium地图应用示例。

学习 Cesium (三)：净化Cesium与使用离线影像

前言

之前的HelloWorld项目，有很多UI部件，在应用时一般要去掉的，下面在HelloWorld项目基础上做些修改。另外，如果有影像数据，一般就会使用下载好的离线数据。

去掉UI部件

打开HelloWorld.vue文件，修改下面的内容

let viewer = new Cesium.Viewer("cesiumContainer",{
  geocoder:false, // 关闭查找位置工具
  homeButton:false, // 禁用Home按钮
  sceneModePicker:false, // 禁用视景模式拾取器
  baseLayerPicker:false, // 禁用数据层拾取器
  navigationHelpButton:false, // 禁用导航按钮
  animation:false, // 禁用动画部件
  timeline:false, // 禁用时间线
  fullscreenButton:false, // 禁用全屏按钮
});

// 不显示Cesium的Logo
viewer.cesiumWidget.creditContainer.style.display="none";
// 显示帧速
viewer.scene.debugShowFramesPerSecond = true;

使用Cesium SDK中的离线数据

这里的离线数据指的 Assets 文件夹下的数据，可以参考 Offline 例子。

首先将 SDK 中Source文件夹下的Assets文件夹拷贝到项目 public 目录下。
然后打开HelloWorld.vue文件，使用离线数据。

let viewer = new Cesium.Viewer("cesiumContainer",{
  geocoder:false, // 关闭查找位置工具
  homeButton:false, // 禁用Home按钮
  sceneModePicker:false, // 禁用视景模式拾取器
  baseLayerPicker:false, // 禁用数据层拾取器
  navigationHelpButton:false, // 禁用导航按钮
  animation:false, // 禁用动画部件
  timeline:false, // 禁用时间线
  fullscreenButton:false, // 禁用全屏按钮

  // 使用自带的离线影像作为纹理贴图
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
  }),

});