前言
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