Cesium入门教程

最新推荐文章于 2025-03-25 21:48:34 发布

不做牛马的咩咩羊

最新推荐文章于 2025-03-25 21:48:34 发布

阅读量5.6k

点赞数 62

CC 4.0 BY-SA版权

文章标签： vue.js 前端 typescript 经验分享

本文链接：https://blog.csdn.net/qq_58978006/article/details/141418040

文章目录

前言
Cesium的初始化
Scene场景
Camera相机
Clock时钟
Entity实体
问题注意点
参考

前言

Cesium 是一个开源的 JavaScript 库，用于在 Web 浏览器中创建和显示三维地球和地图。它提供了高性能的图形渲染能力和丰富的 API，用于处理地理数据、展示 3D 模型、分析空间数据等。Cesium 常用于创建虚拟地球应用、地理信息系统（GIS）和模拟环境。
本章将从Cesium的基本使用入手，了解它的常见对象并介绍相应属性及方法。后续也会继续发布关于Cesium的综合运用案例。

Cesium的初始化

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup lang="ts">
//AccessTokens需要到官网获取，详细看问题注意点
Cesium.Ion.defaultAccessToken = '你的AccessTokens'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Cesium";
const init = ()=>{
	const viewer = new Cesium.Viewer("cesiumContainer", {
	  homeButton: true, //首页位置，点击之后将视图跳转到默认视角
	  sceneModePicker: true, //是否显示投影方式控件
	  baseLayerPicker: true, //是否显示图层选择控件
	  navigationHelpButton: true, //是否显示帮助信息控件
	  geocoder: false, //是否显示地名查找控件
	  animation: false, //是否显示动画控件
	  timeline: false, //是否显示时间线控件
	  fullscreenButton: false, //视察全屏按钮
	  vrButton: false,//是否启用虚拟现实 (VR) 模式
	  shadows: true, //影子
	  infoBox: false, //是否显示点击要素之后显示的信息
	});
}

onMounted(()=>{
  init()
})
</script>

在这里插入图片描述

使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体

const viewer = new Cesium.Viewer("cesiumContainer", {
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestWaterMask: true,
      requestVertexNormals: true
    }),
});

使用前
在这里插入图片描述
使用后

关闭左下角版权信息

在这里插入图片描述

viewer._cesiumWidget._creditContainer.style.display = "none";

Scene场景

Cesium 中表示场景的对象，包含多个属性，用于控制和管理 3D 场景的各个方面。

Cesium.viewer.scene常见属性与方法

  const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //camera
  //设置相机的位置
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000),
  });
  
  // screenSpaceCameraController
  //禁用相机的旋转功能,没有办法拖拽平移
  viewer.scene.screenSpaceCameraController.enableRotate = true;
  
  //mode 
  //指示场景是在2D、3D或2.5D哥伦布视图
  viewer.scene.mode = Cesium.SceneMode.SCENE3D;
  //viewer.scene.mode = Cesium.SceneMode.SCENE2D;
  //viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
  
  //fog
  //场景中的雾效果设置
  viewer.scene.fog.enabled = true; // 启用雾效果
  viewer.scene.fog.density = 0; // 设置雾的密度
  
  //backgroundColor 
  // 设置背景颜色为青色
  viewer.scene.backgroundColor = Cesium.Color.CYAN;
  
  //sun,moon
  viewer.scene.sun.show = true; // 显示太阳
  viewer.scene.moon.show = true; // 隐藏月球
  
  //skyBox 
  //场景的天空盒,用于设置背景的天空图像
  viewer.scene.skyBox = new Cesium.SkyBox({
    sources: {
      positiveX: "src/assets/images/image.png",
      negativeX: "src/assets/images/image.png",
      positiveY: "src/assets/images/image.png",
      negativeY: "src/assets/images/image.png",
      positiveZ: "src/assets/images/image.png",
      negativeZ: "src/assets/images/image.png",
    },
  });
  
  //scene.globe,场景中的地球对象,控制地球的显示属性
  //globe.enableLighting 
  //是否启用地球的光照效果
  viewer.scene.globe.enableLighting = true; // 启用光照
  
  //globe.dynamicAtmosphereLighting 
  //对大气和雾启用动态光照效果
  viewer.scene.globe.dynamicAtmosphereLighting = false;
  
  //globe.imageryLayers
  //用于管理和操作地球表面图像图层的集合
  const imageryLayers = viewer.scene.globe.imageryLayers;
  
  //globe.baseColor 
  //地球的基础颜色
  viewer.scene.globe.baseColor = Cesium.Color.BLUE; // 设置地球的基础颜色为蓝色
  
  //globe.show 
  //控制地球是否可见
  viewer.scene.globe.show = true; // 隐藏地球

skyBox天空盒实现效果

在这里插入图片描述

完整可参考Cesium官网-Scene

Camera相机

Cesium 中用于控制视图的相机对象，具有多个属性来调整视角和相机行为。

Cesium.viewer.camera常见属性与方法

  const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //setView
  //设置相机的视图，通过提供目标位置、方向等参数来调整视角
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 38, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(90.0),
      pitch: Cesium.Math.toRadians(-30.0),
      roll: 0.0,
    },
  });
  
  //flyTo
  //平滑地移动相机到指定的位置和视角。
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-75.1, 39.57, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(90.0),
      pitch: Cesium.Math.toRadians(-30.0),
      roll: 0.0,
    },
  });
  
  //lookAt
  // 使相机平视某个目标点
  viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(-75.1, 39.57), // 目标位置
    new Cesium.Cartesian3(0.0, 0.0, 1000.0) // 相机位置
  );

flyTo实现效果
在这里插入图片描述

补充：

destination：摄像机视角的目标位置，指定摄像机的中心点。
Cartesian3：三维笛卡尔直角坐标。当用来表示位置的时候，这个坐标指在地固坐标系下，相对地球中心的坐标位置，单位是米。（可以看作，以椭球中心为原点的空间直角坐标系中的一个点的坐标）
fromDegrees(longitude, latitude, height)：将经纬度和高度转换为地球中心坐标系中的三维坐标。
orientation：摄像机的方向和姿态，定义了摄像机的朝向、俯仰和滚转角度。
heading：摄像机的航向角，以弧度为单位。表示摄像机的左右旋转角度。0 弧度表示正北方向，90 弧度表示正东方向。
pitch：摄像机的俯仰角，以弧度为单位。表示摄像机的上下旋转角度。负值表示向下看，正值表示向上看。
roll：摄像机的滚转角，以弧度为单位。表示摄像机绕其自身轴线的旋转。

完整可参考Cesium官网-Camera

Clock时钟

Cesium 中的时钟对象，用于控制时间和动画。它管理时间的流逝，允许你设置、调整和查询当前的时间以及时间相关的设置。

Cesium.viewer.clock常见属性与方法

  const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //currentTime
  // 当前的时间
  const currentTime = viewer.clock.currentTime;
  
  //startTime 
  //时钟的起始时间点
  viewer.clock.startTime = Cesium.JulianDate.fromDate(new Date(2024, 0, 1));

  //stopTime 
  //时钟的停止时间点
  viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(2024, 12, 31));
  
  //clockRange 
  //时钟的范围限制，指定时钟是否可以超出 startTime 和 stopTime 的范围
  //时间轴会在达到最大时间时回到最小时间继续循环，但不会超出范围。用户可以看到时间在循环
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

  //时间轴的范围被限制在最小和最大时间之间，用户无法超出此范围。时间自动回到范围内的最后一个有效时间点
  //viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

  //时间轴没有限制，用户可以随意向前或向后移动时间，不受最小和最大时间的限制
  //viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  
  //multiplier 
  //时间乘数，控制时间流逝的速度
  viewer.clock.multiplier = 10; // 将时间流逝速度设为正常的 10 倍

  //shouldAnimate 
  //时钟是否处于动画状态
  viewer.clock.shouldAnimate = true; // 启用动画

  //onTick
  //时钟滴答事件的回调函数，每次时钟更新时触发
  viewer.clock.onTick.addEventListener(function (clock) {
    console.log("Clock ticked:", clock.currentTime);
  });

  //clockStep 
  //时间推进步长，控制时间更新的频率
  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK; // 使用系统时钟来推进时间

补充：

currentTime、startTime、stopTime ：通常都是一个 Cesium.JulianDate 对象。
JulianDate：Cesium 中用于表示时间的类，基于儒略日系统。它提供了精确的时间表示，适合高精度的时间计算。
fromDate：JulianDate 类的一个静态方法。它接受一个 JavaScript 的 Date 对象，并将其转换为儒略日期格式，这种格式用于 Cesium 的时间系统中。

完整可参考：Cesium官网-Clock

Entity实体

Cesium.viewer 的 entities 属性是一个 Cesium.EntityCollection 对象，用于管理和操作场景中的所有实体（如点、线、面、模型等）。

Cesium.viewer.entities 常见属性与方法

  const viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //add
  //将一个实体对象添加到 EntityCollection 中
  const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1, 39.57),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
    },
  });
  
  //remove
  //从 EntityCollection 中移除一个实体对象
  viewer.entities.remove(entity);

  //removeAll
  //移除 EntityCollection 中的所有实体
  viewer.entities.removeAll();

  //getById
  //根据实体的 ID 获取实体对象
  const specifiedEntity = viewer.entities.getById("1");
  console.log("specifiedEntity", specifiedEntity);

  //suspendEvents()
  //暂停所有与 EntityCollection 相关的事件处理。可以用来临时禁用事件，减少性能开销
  viewer.entities.suspendEvents();

  //resumeEvents()
  // 恢复之前暂停的事件处理
  viewer.entities.resumeEvents();

  //contains(entity)
  //检查 EntityCollection 中是否包含指定的实体
  const containsEntity = viewer.entities.contains(entity);

添加Cesium.Entity实体的详细配置选项

//add
const heading = Cesium.Math.toRadians(135);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const entity = viewer.entities.add({
  //实体的唯一标识符，用于区分不同的实体
  id: "1",
  //实体的名称，便于描述和识别
  name: "UFC综合格斗轻量级世界冠军崇拜者",
  //实体的朝向，描述其旋转状态
  orientation: Cesium.Transforms.headingPitchRollQuaternion(position, hpr),
  //实体的位置。可以是固定的位置或随时间变化的 CallbackProperty
  position: Cesium.Cartesian3.fromDegrees(116.391, 39.917),
  //配置点的外观
  point: {
    pixelSize: 50, //点的大小
    color: Cesium.Color.CYAN, //点的颜色
    outlineColor: Cesium.Color.CORAL, //点的轮廓颜色
    outlineWidth: 10, //轮廓宽度
  },

在这里插入图片描述

 //配置标签的样式
  label: {
    text: "Hello", //标签文本
    //font: 字体
    fillColor: Cesium.Color.RED, //填充颜色
    //outlineColor: 轮廓颜色
    outlineWidth: 50, //轮廓宽度
    //style: 标签样式（如填充、轮廓等）
  },

在这里插入图片描述

 //配置广告牌的样式
  billboard: {
    image: "src/assets/images/image2.webp", //图片 URL
    scale: 2, //缩放比例
    width: 100, //图片宽度
    height: 100, //图片高度
    color: Cesium.Color.WHITE, //图片颜色
  },

在这里插入图片描述

 //配置折线的样式
  polyline: {
  //折线的坐标数组
  positions: Cesium.Cartesian3.fromDegreesArray([
	116.391,
	39.921, // 点1
    116.386,
    39.921, // 点2
    116.386,
    39.916, // 点3
    116.386,
    39.912, // 点4
  ]),
  width: 5.0, // 折线宽度
  material: Cesium.Color.RED, //折线颜色
  arcType: Cesium.ArcType.NONE, // 弧类型，NONE 表示不弯曲
},

在这里插入图片描述

 //配置走廊的样式
  corridor: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        116.391,
        39.921, // 点1
        116.396,
        39.921, // 点2
        116.396,
        39.916, // 点3
        116.396,
        39.912, // 点4
      ]),
      width: 30, //走廊宽度
      material: Cesium.Color.CORAL, //走廊颜色
    },

在这里插入图片描述

 //配置模型的样式
  model: {
   uri: "/models/Cesium_Man.glb", //模型文件的 URL
    scale: 300, //模型的缩放比例
    color: Cesium.Color.WHITE, //模型颜色
    minimumPixelSize: 2, //最小像素尺寸
  },
});

在这里插入图片描述

补充：

Cesium.HeadingPitchRoll： Cesium 中一个用于表示实体旋转的类。
heading： 沿Z轴的旋转角度，通常表示实体的朝向（偏航角）。它控制实体在水平面上的旋转，类似于一个航向角。
pitch： 沿X轴的旋转角度，表示实体的俯仰角。它控制实体的上下倾斜，即前后方向的旋转。
roll： 沿Y轴的旋转角度，表示实体的滚转角。它控制实体绕前后轴的旋转，即左右倾斜。

完整可参考：Cesium官网-Entity

问题注意点

地图加载失败Invalid access token
在这里插入图片描述

解决方法

进入https://ion.cesium.com/stories官网
申请账号拿到AccessTokens
在创建Cesium地图前使用Cesium.Ion.defaultAccessToken = ‘你的AccessTokens’

参考

Cesium教程：
http://cesium.coinidea.com/getstart.html
https://blog.csdn.net/sinat_36226553/article/details/105896271