学习 Cesium (三)：净化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")
  }),

});

另外，由于使用离线数据，就可以不使用token了。最后，效果如下图