【WebGIS实例】(10)Cesium开场效果(场景、相机旋转,自定义图片底图)

效果

漫游效果视频:

【WebGIS实例】(10)Cesium开场效果(场景、相机

点击鼠标后将停止旋转并正常加载影像底图:

代码

可以直接看代码,注释写得应该比较清楚了:

js 复制代码
/*
 * @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: 相机漫游效果
 */

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; // 设置图像图层隐藏
  }
}

function roaming() {
  let isRoaming = true; // 漫游标志位
  const DEFAULT_LIGHTING = viewer.scene.globe.enableLighting; // 默认光照状态
  const DEFAULT_SKY_ATMOSPHERE = viewer.scene.skyAtmosphere.show; // 默认光照状态
  let bgImglayer; // 地球底图

  showAllImagery(false); // 隐藏所有图层
  viewer.clock.multiplier = -2000.0;  // 时间加速!

  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; // 开启天空大气,能在一定程度上降低地球轮廓锯齿
  }

  // 添加鼠标事件,触发后停止漫游效果
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // 交互句柄
  handler.setInputAction((event) => {
    isRoaming = false // 停止旋转
    showAllImagery(true) // 显示图层
    if (!DEFAULT_LIGHTING) {
      viewer.scene.globe.enableLighting = false; // 关闭光照
    }
    if (!DEFAULT_SKY_ATMOSPHERE) {
      viewer.scene.skyAtmosphere.show = false; // 关闭光照
    }
    viewer.imageryLayers.remove(bgImglayer, true); // 移除图层
    viewer.clock.multiplier = 1;  // 正常时间流速

    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 移除鼠标事件监听
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  (function roamingEvent() {
    if (isRoaming) {
      // 控制相机围绕 Z 轴旋转
      viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(0.1));
      requestAnimationFrame(roamingEvent);
    }
  })()
}


export {
  roaming
}

调用:

js 复制代码
import {roaming} from '@/utils/Visualization/roaming.js'

roaming()

其他

刚进入时就是直接加载这种图片作为SingleTileImageryProvider的,因为这样能够很快得加载出完整效果,而且不会像瓦片底图那样一张一张的加载。

相关推荐
小桥风满袖4 小时前
极简三分钟ES6 - 类与继承
前端·javascript
子兮曰4 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f4 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖4 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰4 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
练习时长两年半的Java练习生(升级中)4 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
良木林4 小时前
JS中正则表达式的运用
前端·javascript·正则表达式
芭拉拉小魔仙5 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
吃饭睡觉打豆豆嘛6 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man6 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试