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

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

news 来源：原创 2025/6/3 18:56:08

一、添加物体与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>

5、创建一个多边形实体

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);

相关文章：

  • 高速串行接口
  • Spring Boot 4.0实战：构建高并发电商系统
  • ArkTS基础
  • spining-lidar的电机和激光雷达体（lidar-imu）之间的标定
  • VMware-VMRC-12.0.1-18113358安装包下载安装与使用（附下载）
  • 数学分析——一致性(均匀性)和收敛
  • 高速串行通信解惑说明
  • ReLU的变体
  • 【项目记录】登录认证（下）
  • vscode 代理模式（agent mode），简单尝试一下。
  • Day42 Python打卡训练营
  • powershell7.5@.net环境@pwsh7.5在部分windows10系统下的运行问题
  • 机器人学基础——正运动学(理论推导及c++实现）
  • 智能指针unique
  • Launcher3体系化之路
  • day16 leetcode-hot100-30（链表9）
  • 开源版 PyMOL 如何绘制 新冠病毒 分子结构？
  • NX811NX816美光颗粒固态NX840NX845
  • Debian上安装PostgreSQL的故障和排除
  • 1Remote远程会话管理以及一键启动虚拟机
  • 保定网站建设优化/家庭优化大师
  • 萝岗网站开发/网站seo优化免费
  • php mysql做网站登录/百度账号怎么注销
  • 长沙做旅游网站多少钱/互联网公司有哪些
  • 有没有做机械加工的网站/搜索排名广告营销
  • 做商城网站设计/他达拉非什么是