当前位置： 首页 > ai >正文

Cesium快速入门到精通系列教程三

ai 2025/7/16 20:55:57

一、添加物体与3D建筑物

1、添加一个点：

在 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 MAP_KEY = '7bb06f53f4753bbfe922d81d9d3006c1';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>

2、添加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>

3、添加标签与广告牌

  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>

4、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>

http://www.xdnf.cn/news/10380.html

相关文章：

  • c++学习值---模版
  • 【计算机网络】第3章：传输层—可靠数据传输的原理
  • [蓝桥杯]外卖店优先级
  • 【极客日常】分享go开发中wire和interface配合的一些经验
  • C++ 之 多态 【虚函数表、多态的原理、动态绑定与静态绑定】
  • Scratch节日 | 六一儿童节射击游戏
  • ​​技术深度解析：《鸿蒙5.0+：全场景能效的产业革命》​
  • idea中springboot2.7（由于步入另一个线程，已跳过 xxx 处的断点）
  • Azure Devops 系列之三- vscode部署function app
  • 017搜索之深度优先搜索——算法备赛
  • 智语心桥：当AI遇上“星星的孩子”，科技如何点亮沟通之路？
  • 目标检测我来惹1 R-CNN
  • 嵌入式学习笔记 - FreeRTOS v9.0.0 与v10.0.1不同版本占用资源对比
  • 2025——》NumPy中的np.random.randn使用/在什么场景下适合使用np.random.randn？NumPy标准正态分布生成全解析
  • [SAP] 矩阵复制(Matrix Copy)
  • C#里与嵌入式系统W5500网络通讯（4）
  • Python Day39 学习（复习日志Day4）
  • 【HarmonyOS Next之旅】DevEco Studio使用指南(二十九) -＞ 开发云数据库
  • [ElasticSearch] RestAPI
  • 数据存储与运算
  • 多端学习方案起笔
  • Linux基础 文件描述符，重定向及缓冲区理解
  • MCU如何从向量表到中断服务
  • Goreplay最新版本的安装和简单使用
  • asyncpg - Python异步PostgreSQL客户端库
  • 4、获取树莓派温度
  • Jenkins：自动化流水线的基石，开启 DevOps 新时代
  • 【Linux网络编程】数据链路层
  • 6个月Python学习计划 Day 11 - 列表推导式、内置函数进阶、模块封装实战
  • 让编程更智能高效：探索Claude Code工具的强大功能