【CesiumJS入门】(1)创建Viewer及相关配置项

news/2024/5/22 10:12:01

前言

在上一篇博客中,我们直接在vue组件完成初始渲染并创建 DOM 节点后通过 const map = new Cesium.Viewer('cesiumContainer')构建了一个地球场景。

而本篇,我们将会专门把地球创建的方法写在一个js文件中,以便后续的调用。

同时,本篇会介绍new Cesium.Viewer (container, options )这个构造函数。

Viewer

Viewer - Cesium Documentation

Viewer 是一个场景,这个场景中包含了地球、天空盒、控件等等内容。

new Cesium.Viewer (container, options )

container:地球场景挂载的 DOM 元素或元素 ID
options :包含渲染Cesium场景的可选配置项

options

Cesium.Viewer.ConstructorOptions

const viewerOption = {
  animation: false, // 是否创建动画小器件,左下角仪表
  baseLayerPicker: false, // 是否显示图层选择器
  fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
  homeButton: false, // 是否显示Home按钮
  infoBox: false, // 是否显示信息框
  sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式, SCENE2D | SCENE3D | COLUMBUS_VIEW
  sceneModePicker: false, // 是否显示3D/2D选择器
  scene3DOnly: true, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
  selectionIndicator: false, // 是否显示选取指示器组件
  vrButton: false, // vr模式
  timeline: false, // 是否显示时间轴
  navigationHelpButton: false, // 是否显示右上角的帮助按钮
  baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
  shadows: false, // 是否显示背影
  shouldAnimate: true,
  clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
  imageryProvider: undefined, // 不添加默认影像图层
  selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型,仅baseLayerPicker设为true有意义
  imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
  selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型,仅baseLayerPicker设为true有意义
  terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
  terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 地形图层提供者,仅baseLayerPicker设为false有意义
  fullscreenElement: document.body, // 全屏时渲染的HTML元素,
  useDefaultRenderLoop: true, // 如果需要控制渲染循环,则设为true
  targetFrameRate: undefined, // 使用默认render loop时的帧率
  showRenderLoopErrors: false, // 如果设为true,将在一个HTML面板中显示错误信息
  automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
  contextOptions: undefined, // 传递给Scene对象的上下文参数(scene.options)
  mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
  dataSources: new Cesium.DataSourceCollection(), // 需要进行可视化的数据源的集合
  creditContainer: document.createElement('div'), // 创建空div,可实现移除版权信息的效果
}

代码

参考代码提交: feat: 新增创建地球场景构造函数 · ReBeX/cesium-tyro-blog - Gitee.com

首先,我们在之前创建的utils文件夹里新建一个js文件 createCesium.js,结合之前写的【WebGIS设计模式】(1)创建地图单例这篇博客,来简单得写一下:

/*
 * @Date: 2023-02-09 14:57:52
 * @LastEditTime: 2023-05-31 17:04:01
 * @FilePath: \cesium-tyro-blog\src\utils\createCesium.js
 * @Description: 创建地图单例
 */
import * as Cesium from 'cesium'

let viewer = {} // 地图对象

const viewerOption = {
  animation: false, // 是否创建动画小器件,左下角仪表
  baseLayerPicker: false, // 是否显示图层选择器
  fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
  homeButton: false, // 是否显示Home按钮
  infoBox: false, // 是否显示信息框
  sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式, SCENE2D | SCENE3D | COLUMBUS_VIEW
  sceneModePicker: false, // 是否显示3D/2D选择器
  scene3DOnly: true, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
  selectionIndicator: false, // 是否显示选取指示器组件
  vrButton: false, // vr模式
  timeline: false, // 是否显示时间轴
  navigationHelpButton: false, // 是否显示右上角的帮助按钮
  baselLayerPicker: false, // 将图层选择的控件关掉,才能添加其他影像数据
  shadows: false, // 是否显示背影
  shouldAnimate: true,
  clock: new Cesium.Clock(), // 用于控制当前时间的时钟对象
  imageryProvider: undefined, // 不添加默认影像图层
  selectedImageryProviderViewModel: undefined, // 当前图像图层的显示模型,仅baseLayerPicker设为true有意义
  imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker选择的图像图层ProviderViewModel数组
  selectedTerrainProviderViewModel: undefined, // 当前地形图层的显示模型,仅baseLayerPicker设为true有意义
  terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker选择的地形图层ProviderViewModel数组
  terrainProvider: new Cesium.EllipsoidTerrainProvider(), // 地形图层提供者,仅baseLayerPicker设为false有意义
  fullscreenElement: document.body, // 全屏时渲染的HTML元素,
  useDefaultRenderLoop: true, // 如果需要控制渲染循环,则设为true
  targetFrameRate: undefined, // 使用默认render loop时的帧率
  showRenderLoopErrors: false, // 如果设为true,将在一个HTML面板中显示错误信息
  automaticallyTrackDataSourceClocks: true, // 自动追踪最近添加的数据源的时钟设置
  contextOptions: undefined, // 传递给Scene对象的上下文参数(scene.options)
  mapProjection: new Cesium.WebMercatorProjection(), // 地图投影体系
  dataSources: new Cesium.DataSourceCollection(), // 需要进行可视化的数据源的集合
  creditContainer: document.createElement('div'), // 创建空div,可实现移除版权信息的效果
}

/**
 * @description: 初始化地球
 * @param {string} target - 地球挂载的div容器
 * @return {*}
 */
class CesiumMap {
  constructor (target, Option = viewerOption) {
    // 首次使用构造器实例
    if (!CesiumMap.instance) {
      this.target = target // Type: Element | String
      this.viewer = new Cesium.Viewer(target, Option)
      this.viewer.imageryLayers.removeAll() // 移除所有图层,只显示蓝色地球

      // 修改场景环境,关闭相关特效
      this.viewer.scene.debugShowFramesPerSecond = true// 显示fps
      this.viewer.scene.moon.show = false// 月亮
      this.viewer.scene.fog.enabled = false// 雾
      this.viewer.scene.sun.show = false// 太阳
      this.viewer.scene.skyBox.show = true// 天空盒
      this.viewer.scene.globe.enableLighting = false // 激活基于太阳位置的光照(场景光照
      this.viewer.resolutionScale = 1.0// 画面细度,默认值为1.0

      viewer = this.viewer
      
      // 将this挂载到CesiumMap这个类的instance属性上
      CesiumMap.instance = this
    }
    return CesiumMap.instance
  }
}

export {CesiumMap, viewer}

好了,然后修改一下App.vue

<script setup>
import { onMounted } from 'vue'
import { CesiumMap } from '@/utils/createCesium.js' // 引入新的类

onMounted(() => {
  new CesiumMap('cesiumContainer') // 创建我们的地球示例
})
</script>

<template>
  <div id="cesiumContainer"/>
</template>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

把项目跑起来,我们就会得到一个没有底图,没有控件的地球场景。后续,我们将在这个”纯净“的地球上继续学习CesiumJS的API。
在这里插入图片描述


http://lihuaxi.xjx100.cn/news/1190673.html

相关文章

交换求和顺序的条件

交换求和顺序 文章目录 交换求和顺序应用场景可以交换求和的条件&#xff08;部分内容来源ChatGPT&#xff09;不能交换的情况其他可以参考的资料 应用场景 在多重求和中&#xff0c;交换求和顺序的最常见情况是需要改变计算某个表达式&#xff08;通常是连乘或连加&#xff0…

前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

目录 一、前后端同步异步请求 1.同步请求&#xff1a; 2.异步请求&#xff1a; 3.跨域问题&#xff08;前端问题&#xff09; 4.axios框架&#xff08;封装后&#xff09; 二、后端向前端响应多个数据-JSON 一、前后端同步异步请求 1.同步请求&#xff1a; 发送一个请求…

C语言参悟-分支和跳转

C语言参悟-分支跳转 一、概述二、判断条件三、if else 条件判断1. 单判断2. 条件“并联”3. 条件“串联” 四、switch case 条件判断1. “单刀” 开关2. “多刀”开关 一、概述 下面只是我的对于C语言的认识拙见&#xff0c;可以多多提出批评建议&#x1f604; 计算机的诞生很…

8.Ansible Variables介绍

什么是Ansible Variables&#xff1f; 就像任何其他脚本或编程语言一样&#xff0c;变量用于存储变化的值&#xff61;例如, 假设我们要尝试执行相同的操作, 将修补程序应用于数百台服务器&#xff61;我们只需要一个playbook就可以满足所有100台服务器的需求&#xff61;但是,…

煤矿电子封条建设实施方案算法 yolov7

煤矿电子封条建设实施方案算法通过yolov7网络模型深度学习技术&#xff0c;煤矿电子封条建设实施方案算法作为一种智能化安全新模式被广泛应用于各类场景中。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff0c;研究团队希望它能够同时支持移动 GPU 和从边缘到云端的…

CF120E--1400

这是一道一般难度的博弈论题目。想一想就能想到。 题目简述 两个人在一个 n ∗ n n*n n∗n的棋盘上放马&#xff08;按按国际象棋中马的走法&#xff0c;没有别马脚这一说&#xff09;。让放置的马互相吃不到其他的马&#xff08;不分阵营&#xff09;。谁先无地可下&#xf…

SuperMap Hi-Fi 3D SDK for Unity设置渲染范围

kele 一、背景 在三维项目中经常会使用到大屏&#xff0c;有可能会用到4K屏、8K屏、长屏、带鱼屏等高分辨率的屏幕&#xff0c;这些屏幕的其中一个特点是其长宽比比较大&#xff0c;有些时候会是几块16&#xff1a;9的屏幕横向拼接而成&#xff0c;这就使得这整个屏幕在水平方向…

深入探讨JMeter中不为人知的JSONPath用法

在jmeter使用过程中&#xff0c;我们经常会看到接口返回数据类型为application/json&#xff0c;也就时我们常说的json格式。 而在功能测试时&#xff0c;我们经常会要对它的结果进行断言&#xff0c;确认结果是否与预期一致&#xff0c;有时候还会想从结果中提取某个值&#…