Cesium快速入门到精通系列教程三：添加物体与3D建筑物

Cesium中添加物体与3D建筑物，对于大规模城市模型，推荐使用 3D Tileset；对于简单几何图形，可以使用 Entity API；对于复杂模型，可以使用 GLTF 格式：

一、添加一个点：

在 Cesium 1.93 中在广州塔（经度：113.3244，纬度：23.1049）上空 800 米处添加一个红点

<template><div id="cesiumContainer"></div><div class="controls"><h3>交互控制</h3><button id="flyToGZTBtn">飞向广州塔</button><button id="toggleRedPointBtn">显示/隐藏红点</button><button id="resetViewBtn">重置视角</button><div style="margin-top: 10px;"><strong>红点位置:</strong><br>经度: 113.3244°<br>纬度: 23.1049°<br>高度: 800米</div></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'defaultAccessToken'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});viewer.cesiumWidget.creditContainer.style.display = "none"; // 隐藏logo// 广州塔位置（经纬度和高度）const guangzhouTowerPosition = {longitude: 113.3244,latitude: 23.1049,height: 600  // 广州塔实际高度约600米};// 红点位置（广州塔上空800米）const redPointPosition = {longitude: guangzhouTowerPosition.longitude,latitude: guangzhouTowerPosition.latitude,height: guangzhouTowerPosition.height + 800  // 上空800米};// 创建红点实体const redPointEntity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(redPointPosition.longitude,redPointPosition.latitude,redPointPosition.height),point: {color: Cesium.Color.RED,         // 红色pixelSize: 10,                   // 像素大小outlineColor: Cesium.Color.WHITE, // 白色边框outlineWidth: 2,                 // 边框宽度heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND // 相对地面高度},label: {text: '广州塔上空800米',font: '14pt monospace',fillColor: Cesium.Color.WHITE,backgroundColor: Cesium.Color.BLACK.withAlpha(0.5),padding: new Cesium.Cartesian2(7, 5),showBackground: true,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,pixelOffset: new Cesium.Cartesian2(0, -10),disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终显示在最前面}});// 初始视角（中国东南部）const initialView = {destination: Cesium.Cartesian3.fromDegrees(113.3, 23.1, 15000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-30.0),roll: 0.0}};// 广州塔视角const guangzhouTowerView = {destination: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude,guangzhouTowerPosition.latitude,2000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-30.0),roll: 0.0},duration: 3 // 飞行时间（秒）};// 设置初始视角viewer.camera.setView(initialView);// 按钮事件document.getElementById('flyToGZTBtn').addEventListener('click', function () {viewer.camera.flyTo(guangzhouTowerView);});document.getElementById('toggleRedPointBtn').addEventListener('click', function () {redPointEntity.show = !redPointEntity.show;});document.getElementById('resetViewBtn').addEventListener('click', function () {viewer.camera.setView(initialView);});
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}.controls {position: absolute;top: 10px;right: 10px;background-color: rgba(0, 0, 0, 0.7);color: white;padding: 10px;border-radius: 5px;font-family: Arial, sans-serif;font-size: 14px;z-index: 100;
}button {margin-top: 5px;width: 100%;padding: 5px;cursor: pointer;
}
</style>

二、添加Cesium自带的建筑：

以广州塔为中心添加Cesium自带的建筑

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'edefaultAccessToken'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});const guangzhouTowerPosition = {longitude: 113.3244,latitude: 23.1049,height: 600  // 广州塔实际高度约600米};// 广州塔视角const guangzhouTowerView = {destination: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude,guangzhouTowerPosition.latitude,2000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-30.0),roll: 0.0},duration: 3 // 飞行时间（秒）};viewer.scene.primitives.add(new Cesium.createOsmBuildings());viewer.camera.flyTo(guangzhouTowerView);
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}
</style>

三、添加标签与广告牌

  viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude, guangzhouTowerPosition.latitude, guangzhouTowerPosition.height + 50), // 广告牌位于塔顶上方50米billboard: {image: './gzt.png', // 在public目录width: 60,height: 60,horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中verticalOrigin: Cesium.VerticalOrigin.BOTTOM,    // 垂直底部对齐scale: 1.0,color: Cesium.Color.RED.withAlpha(0.8)           // 半透明红色},label: {text: '广州塔',font: '30px Microsoft YaHei', // 字体样式fillColor: Cesium.Color.WHITE,  // 文字颜色outlineColor: Cesium.Color.BLACK, // 描边颜色outlineWidth: 2,                // 描边宽度style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 填充+描边horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.TOP, // 标签位于广告牌上方pixelOffset: new Cesium.Cartesian2(0, 20), // 垂直偏移量scale: 0.8}});

完整代码

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'defaultAccessToken'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});const guangzhouTowerPosition = {longitude: 113.3244,latitude: 23.1049,height: 600  // 广州塔实际高度约600米};// 广州塔视角const guangzhouTowerView = {destination: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude,guangzhouTowerPosition.latitude,2000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-30.0),roll: 0.0},duration: 3 // 飞行时间（秒）};viewer.scene.primitives.add(new Cesium.createOsmBuildings());viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude, guangzhouTowerPosition.latitude, guangzhouTowerPosition.height + 50), // 广告牌位于塔顶上方50米billboard: {image: './gzt.png', // 替换为实际图标路径width: 60,height: 60,horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中verticalOrigin: Cesium.VerticalOrigin.BOTTOM,    // 垂直底部对齐scale: 1.0,color: Cesium.Color.RED.withAlpha(0.8)           // 半透明红色},label: {text: '广州塔',font: '30px Microsoft YaHei', // 字体样式fillColor: Cesium.Color.WHITE,  // 文字颜色outlineColor: Cesium.Color.BLACK, // 描边颜色outlineWidth: 2,                // 描边宽度style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 填充+描边horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.TOP, // 标签位于广告牌上方pixelOffset: new Cesium.Cartesian2(0, 20), // 垂直偏移量scale: 0.8}});viewer.camera.flyTo(guangzhouTowerView);
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}
</style>

四、3D模型添加与设置

在广州塔上空添加一架GLB模型飞机

  const guangzhouTowerPosition = {longitude: 113.3244,latitude: 23.1049,height: 600  // 广州塔实际高度约600米};viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude + 0.001,  // 东经偏移100米guangzhouTowerPosition.latitude + 0.0005, // 北纬偏移50米1500                 // 飞行高度100米),model: {uri: './model/Cesium_Air.glb', // Cesium_Air.glb在public目录下scale: 1.0,                  // 缩放比例（根据模型实际尺寸调整）minimumPixelSize: 128,maximumScale: 10000,// 启用动画（假设模型包含螺旋桨动画）animations: [{id: 'propeller',loop: Cesium.ModelAnimationLoop.REPEAT,speed: 2.0 // 转速倍数}]}});

完整代码

<template><div id="cesiumContainer"></div>
</template><script setup>
Cesium.Ion.defaultAccessToken = 'defaultAccessToken'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";window.CESIUM_BASE_URL = "/"; // 设置Cesium静态资源路径（public目录）// 设置Cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, // 西边经度20.4, // 南边维度110.4, // 东边经度61.2) // 北边维度onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //设置搜索框可见homeButton: false, // 返回初始位置键是否可见sceneModePicker: false, // 查看器选择模式选择键是否可见baseLayerPicker: false, // 图层选择键是否可见navigationHelpButton: false, // 是否显示帮助按钮animation: false, // 是否显示播放控制按钮timeline: false, // 是否显示时间轴fullscreenButton: false, // 是否显示全屏按钮});const guangzhouTowerPosition = {longitude: 113.3244,latitude: 23.1049,height: 600  // 广州塔实际高度约600米};// 广州塔视角const guangzhouTowerView = {destination: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude,guangzhouTowerPosition.latitude,2000),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-30.0),roll: 0.0},duration: 3 // 飞行时间（秒）};viewer.scene.primitives.add(new Cesium.createOsmBuildings());viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(guangzhouTowerPosition.longitude + 0.001,  // 东经偏移100米guangzhouTowerPosition.latitude + 0.0005, // 北纬偏移50米1500                 // 飞行高度100米),model: {uri: './model/Cesium_Air.glb', // 替换为实际模型路径scale: 1.0,                  // 缩放比例（根据模型实际尺寸调整）minimumPixelSize: 128,maximumScale: 10000,// 启用动画（假设模型包含螺旋桨动画）animations: [{id: 'propeller',loop: Cesium.ModelAnimationLoop.REPEAT,speed: 2.0 // 转速倍数}]}});viewer.camera.flyTo(guangzhouTowerView);
})</script><style scoped>
* {margin: 0;padding: 0;
}#cesiumContainer {width: 100wh;height: 100vh;
}
</style>

五、创建一个多边形实体

const viewer = new Cesium.Viewer("cesiumContainer");const wyoming = viewer.entities.add({polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596,-104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429,-107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429,-111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073,]),height: 0,material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.BLACK,},
});// viewer.flyTo(viewer.entities);
viewer.zoomTo(wyoming);