效果

漫游效果視頻：

點(diǎn)擊鼠標(biāo)后將停止旋轉(zhuǎn)并正常加載影像底圖：

代碼

可以直接看代碼，注釋寫得應(yīng)該比較清楚了：

/*
 * @Date: 2023-07-28 16:21:53
 * @LastEditors: ReBeX  420659880@qq.com
 * @LastEditTime: 2023-07-28 18:18:34
 * @FilePath: \cesium-tyro-blog\src\utils\Visualization\roaming.js
 * @Description: 相機(jī)漫游效果
 */

import { viewer } from '@/utils/createCesium.js' // 引入地圖對象
import * as Cesium from 'cesium'

import darkEarth from '@/assets/images/darkEarth.jpg'

function showAllImagery(boolean = true) {
  // 獲取圖像圖層集合
  const imageryLayers = viewer.imageryLayers;

  // 遍歷圖像圖層并隱藏它們
  let numLayers = imageryLayers.length;
  for (let i = 0; i < numLayers; i++) {
    const layer = imageryLayers.get(i); // 獲取圖像圖層對象
    layer.show = boolean; // 設(shè)置圖像圖層隱藏
  }
}

function roaming() {
  let isRoaming = true; // 漫游標(biāo)志位
  const DEFAULT_LIGHTING = viewer.scene.globe.enableLighting; // 默認(rèn)光照狀態(tài)
  const DEFAULT_SKY_ATMOSPHERE = viewer.scene.skyAtmosphere.show; // 默認(rèn)光照狀態(tài)
  let bgImglayer; // 地球底圖

  showAllImagery(false); // 隱藏所有圖層
  viewer.clock.multiplier = -2000.0;  // 時(shí)間加速！

  const provider = await Cesium.SingleTileImageryProvider.fromUrl('/src/assets/images/darkEarth.jpg')
  bgImglayer = viewer.imageryLayers.addImageryProvider(provider); // 加載背景底圖

  if (!DEFAULT_LIGHTING) {
    viewer.scene.globe.enableLighting = true; // 開啟光照
  }
  if (!DEFAULT_SKY_ATMOSPHERE) {
    viewer.scene.skyAtmosphere.show = true; // 開啟天空大氣，能在一定程度上降低地球輪廓鋸齒
  }

  // 添加鼠標(biāo)事件，觸發(fā)后停止漫游效果
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 交互句柄
  handler.setInputAction((event) => {
    isRoaming = false // 停止旋轉(zhuǎn)
    showAllImagery(true) // 顯示圖層
    if (!DEFAULT_LIGHTING) {
      viewer.scene.globe.enableLighting = false; // 關(guān)閉光照
    }
    if (!DEFAULT_SKY_ATMOSPHERE) {
      viewer.scene.skyAtmosphere.show = false; // 關(guān)閉光照
    }
    viewer.imageryLayers.remove(bgImglayer, true); // 移除圖層
    viewer.clock.multiplier = 1;  // 正常時(shí)間流速

    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 移除鼠標(biāo)事件監(jiān)聽
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  (function roamingEvent() {
    if (isRoaming) {
      // 控制相機(jī)圍繞 Z 軸旋轉(zhuǎn)
      viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(0.1));
      requestAnimationFrame(roamingEvent);
    }
  })()
}


export {
  roaming
}

調(diào)用：

import {roaming} from '@/utils/Visualization/roaming.js'

roaming()

其他

剛進(jìn)入時(shí)就是直接加載這種圖片作為SingleTileImageryProvider的，因?yàn)檫@樣能夠很快得加載出完整效果，而且不會像瓦片底圖那樣一張一張的加載。
文章來源地址http://www.zghlxwxcb.cn/news/detail-652575.html

到了這里，關(guān)于【W(wǎng)ebGIS實(shí)例】（10）Cesium開場效果（場景、相機(jī)旋轉(zhuǎn)，自定義圖片底圖）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！