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

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

news 2026/2/9 20:29:46

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

- 核心代码
- 完整代码
- 在线示例

之前由于误解遇到一个特殊的需求：想要把三维球上叠加倾斜摄影进行自由放大缩小，跟随地图的缩放进行缩放。

后来经过搜索、尝试，终于实现了需求。

但是，后来发现是误解需求了，甲方只是需要放大缩小地图，不需要改变倾斜摄影的比例。

不过也算是学习了一个功能，这里记录一下。

本文主要包括核心代码、完整代码、在线示例三部分。

核心代码

这里介绍一下修改倾斜摄影比例缩放的方法。

由于 Cesium 近期版本变动，本文介绍的内容包含 Cesium 1.107.0 之前的版本以及之后的版本。

两个版本最主要的区别是改变了 3dtile 的加载方式以及异步解析方式。

1. 1.107.0 以及之后的版本核心代码：

在这里插入图片描述

注意：await 关键字，需要在异步方法内使用！

比如：


async function addCesium3DTileset() {try {const tileset = await Cesium.Cesium3DTileset.fromUrl(url, options);viewer.scene.primitives.add(tileSet);} catch (error) {console.log(`Failed to load tileset: ${error}`);}
}

异步加载倾斜摄影核心代码：

这里注意：Cesium 沙盒中应该本身就是异步方法，因此可以直接使用。


// 获取倾斜摄影
// 注意，Cesium 1.107.0 及以后版本需要通过异步方式加载倾斜摄影
const tileSet = await Cesium.Cesium3DTileset.fromUrl("https://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json");// 创建倾斜摄影
viewer.scene.primitives.add(tileSet);// 定位至倾斜摄影
viewer.zoomTo(tileSet, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0));// 设置瓦片加载完成监听事件
tileSet.initialTilesLoaded.addEventListener(function () {// 获取倾斜摄影中心点const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);// 获取表面坐标const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);// 记录局部坐标系scaleFrame = Cesium.Transforms.eastNorthUpToFixedFrame(surface);// 缩放if (scale) {// 获取比例四元数const _scale = Cesium.Matrix4.fromUniformScale(scale);// 记录比例四元数scaleMatrix4 = _scale.clone();Cesium.Matrix4.multiply(scaleFrame, _scale, scaleFrame);}// 倾斜摄影重新设置比例tileSet._root.transform = scaleFrame;// 添加参照点const entity = {point: new Cesium.PointGraphics({// 设置贴地heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,// 设置颜色color: Cesium.Color.fromCssColorString("#ff0033"),// 设置大小pixelSize: 30,// 设置外边框outlineColor: Cesium.Color.fromCssColorString("#ff0033"),// 外边框宽度outlineWidth: 1,}),position: surface};viewer.entities.add(entity);
});

2. 1.107.0 之前的版本核心代码：


// 初始化倾斜摄影
const tileSet = new Cesium.Cesium3DTileset({url: "https://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json"
});// 异步读取倾斜摄影数据，并进行修改
tileSet.readyPromise.then(function () {// 添加倾斜摄影到地球中viewer.scene.primitives.add(tileSet);// 定位viewer.flyTo(tileSet);// 获取倾斜摄影中心点const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);// 记录局部坐标系const m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);// 缩放if (scale) {const _scale = Cesium.Matrix4.fromUniformScale(scale);Cesium.Matrix4.multiply(m, _scale, m);}tileSet._root.transform = m;//参照点const entity = {id: "test",point: new Cesium.PointGraphics({heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.fromCssColorString("#ff0033"),pixelSize: 30,outlineColor: Cesium.Color.fromCssColorString("#ff0033"),outlineWidth: 1,}),position: surface};viewer.entities.add(entity);
});

完整代码


<!DOCTYPE html>
<html lang="en">
<head><!-- Use correct character set. --><meta charset="utf-8"/><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>Cesium model video</title><link rel="stylesheet" href="./popup.css" type="text/css"><script src="http://openlayers.vip/examples/csdn/Cesium.js"></script><script src="./cesium_init.js"></script><script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script><script src="./CesiumPopup.js"></script><style>@import url(./Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head>
<body>
<div id="cesiumContainer"></div>
<script>// 创建三维球const viewer = init();// 初始化地球
const viewer = new Cesium.Viewer('cesiumContainer');// 获取倾斜摄影
const tileSet = await Cesium.Cesium3DTileset.fromUrl("https://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json");// 创建倾斜摄影
viewer.scene.primitives.add(tileSet);// 定位至倾斜摄影
viewer.zoomTo(tileSet, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 0));// 初始偏移参数
// 平移参数
const tx = 200;
const ty = 0;
const tz = -430;// 旋转参数
const rx = 0;
const ry = 0;
const rz = 0;// 初始比例
const scale = 1;// 局部坐标系
let scaleFrame;// 比例四元数
let scaleMatrix4;// 设置瓦片加载完成监听事件
tileSet.initialTilesLoaded.addEventListener(function () {// 获取倾斜摄影中心点const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);// 记录局部坐标系scaleFrame = Cesium.Transforms.eastNorthUpToFixedFrame(surface);//平移const _tx = tx ? tx : 0;const _ty = ty ? ty : 0;const _tz = tz ? tz : 0;const tempTranslation = new Cesium.Cartesian3(_tx, _ty, _tz);const offset = Cesium.Matrix4.multiplyByPoint(scaleFrame, tempTranslation, new Cesium.Cartesian3(0, 0, 0));const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);//旋转if (rx) {const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rx));const rotate = Cesium.Matrix4.fromRotationTranslation(mx);Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame);}if (ry) {const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(ry));const rotate = Cesium.Matrix4.fromRotationTranslation(my);Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame);}if (rz) {const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rz));const rotate = Cesium.Matrix4.fromRotationTranslation(mz);Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame);}// 缩放if (scale) {const _scale = Cesium.Matrix4.fromUniformScale(scale);// 记录比例四元数scaleMatrix4 = _scale.clone();Cesium.Matrix4.multiply(scaleFrame, _scale, scaleFrame);}tileSet._root.transform = scaleFrame;// 参照点const entity = {point: new Cesium.PointGraphics({heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,color: Cesium.Color.fromCssColorString("#ff0033"),pixelSize: 30,outlineColor: Cesium.Color.fromCssColorString("#ff0033"),outlineWidth: 1,}),position: surface};viewer.entities.add(entity);
});// 还原比例
function revertTransform(mtx4) {let inverse = Cesium.Matrix4.inverse(mtx4.clone(), new Cesium.Matrix4());Cesium.Matrix4.multiply(scaleFrame, inverse.clone(), scaleFrame);
}// 默认缩放
const viewModel = {tileScale: 50,
};// cesium 沙盒内置组件
Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);Cesium.knockout.getObservable(viewModel, "tileScale").subscribe(function (newValue) {console.log(newValue);// 缩放if (newValue) {// 修改后的比例const _scale = Cesium.Matrix4.fromUniformScale(parseFloat(newValue) / 50);// 还原模型比例revertTransform(scaleMatrix4);scaleMatrix4 = _scale.clone();// 设置模型比例Cesium.Matrix4.multiply(scaleFrame, _scale, scaleFrame);}tileSet._root.transform = scaleFrame;});</script>
</body>
</html>

在这里插入图片描述

在线示例

Cesium 1.107.0 及以上版本调整模型大小（可手动调整模型大小）

Cesium 1.106.1 调整模型大小

在这里插入图片描述

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小核心代码完整代码在线示例之前由于误解遇到一个特殊的需求：想要把三维球上叠加倾斜摄影进行自由放大缩小，跟随地图的缩放进行缩放。后来经过搜索、尝试，终于实现了需求。但是，后…...

编程日记 2023/8/5 11:50:52

python机器学习（七）决策树(下) 特征工程、字典特征、文本特征、决策树算法API、可视化、解决回归问题

决策树算法特征工程-特征提取特征提取就是将任意数据转换为可用于机器学习的数字特征。计算机无法直接识别字符串，将字符串转换为机器可以读懂的数字特征，才能让计算机理解该字符串(特征)表达的意义。主要分为：字典特征提取(特征离散化)…...

编程日记 2023/8/5 11:49:49

数据结构与算法中的双向链表

链表概念在现实世界中使用得很普遍。当我们使用 Spotify 播放队列中的下一首歌曲时，我们学到的单链表的概念就开始发挥作用。但是要播放队列中的上一首歌曲到底可以做什么呢？ 在这篇博客中，我们将了解与数据结构相关的另一个概念&#xff0c…...

编程日记 2023/8/5 11:48:49

数据安全治理的关键-数据分类分级工具

强大的资产发现能力多种资产发现方式的组合应用，能够最大程度地提高资产发现能力。灵活的敏感数据分类分级规则内置丰富的敏感数据分类分级规则，支持正则表达式、关键词组、非结构化指纹、结构化指纹、机器聚类等多种匹配方式，并且规则…...

编程日记 2023/8/5 11:47:48

Spring集成Junit

目录 1、简介 2、Junit存在的问题 3、回顾Junit注解 4、集成步骤 4.1、导入坐标 4.2、Runwith 4.3、ContextConfiguration 4.4、Autowired 4.5、Test 4.6、代码 5、补充说明 5.1、Runwith 5.2、BlockJUnit4ClassRunner 5.3、没有配置Runwith ⭐作者介绍&#xff1…...

编程日记 2023/8/5 11:46:47

Java正则校验密码至少包含：字母数字特殊符号中的2种

一、语法字符说明\将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如， n匹配字符 n。\n 匹配换行符。序列 \\\\ 匹配 \\ ，\\( 匹配 (。^匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与"\n…...

编程日记 2023/8/5 11:45:46

Stable Diffusion教程(6) - 扩展安装

打开stable diffusion webUI界面加载插件列表依次点击扩展->可用->加载自搜索插件首先在搜索框输入你要安装的插件，然后点击插件后面的安装按钮如果你需要的插件这里面没有找到，可通过通网址安装的方式安装。在git仓库网址输入框输入的你插件…...

编程日记 2023/8/5 11:44:44

Jenkins通过OpenSSH发布WinServer2016

上一篇文章> Jenkins集成SonarQube代码质量检测一、实验环境 jenkins环境 jenkins入门与安装容器为docker 主机IP系统版本jenkins10.10.10.10rhel7.5 二、OpenSSH安装 1、下载官网地址：https://learn.microsoft.com/zh-cn/windows-server/administration/op…...

编程日记 2023/8/5 11:43:43

字母异位词分组 LeetCode热题100

题目给你一个字符串数组，请你将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。思路将字符串按字符升序排列后作为key，原字符串作为value存储到map上。代码 class Solution…...

编程日记 2023/8/5 11:42:42

使用angular和electron 构建桌面应用

使用angular和electron 构建桌面应用初始设置新建一个angular app npm install -g @angular/cli ng new angular-electron cd angular-electron修改src/index.html文件内容将绝对路径改为相对路径，加个点，使electron可以访问到angular文件资源 <base href=".…...

编程日记 2023/8/5 11:41:41

安达发制造工业迈向智能化：APS高级计划排程助力提升生产效率

随着市场竞争的加剧，制造企业纷纷寻求提高生产效率和降低成本的方法。近年来，越来越多的制造企业开始采用APS(高级计划与排程)系统，以优化生产计划和排程，提高生产效率，并在竞争中取得优势。现代制造业通常面临复杂的…...

编程日记 2023/8/5 11:40:40

Flink - sink算子

水善利万物而不争，处众人之所恶，故几于道💦 文章目录 1. Kafka_Sink 2. Kafka_Sink - 自定义序列化器 3. Redis_Sink_String 4. Redis_Sink_list 5. Redis_Sink_set 6. Redis_Sink_hash 7. 有界流数据写入到ES 8. 无界流数据写入到ES 9. 自定…...

编程日记 2023/8/5 11:39:39

【项目线程2】3.5 线程的分离 3.6线程取消 3.7线程属性

3.5 线程的分离 #include <stdio.h> #include <pthread.h> #include <string.h> #include <unistd.h>void * callback(void * arg) {printf("chid thread id : %ld\n", pthread_self());return NULL; }int main() {// 创建一个子线程pthread…...

编程日记 2023/8/5 11:38:37

Filebeat+ELK 部署

目录 //在 Node1 节点上操作 1．安装 Filebeat 2．设置 filebeat 的主配置文件 3．在 Logstash 组件所在节点上新建一个 Logstash 配置文件 4．浏览器访问 http://192.168.193.40:5601 登录 Kibana，单击“Create In…...

编程日记 2023/8/5 11:37:36

el-table点击表格某一行添加到URL参数，访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]

写在最前需求：有个表格列出了一些行数据，每个行数据点击后会加载出对应的详细数据，想要在点击了某一行后，能够将该点击反应到URL中，这样我复制这个URL发给其他人，他们打开时也能看到同样的行数据。 url会根…...

编程日记 2023/8/5 11:36:33

【树】二叉树堆与堆排序平衡(AVL)树红黑(RB)树

目录 1 树1.1 认识树1.2 树的相关概念1.3 树的表示孩子兄弟表示法 2 二叉树2.1 概念2. 2 特殊二叉树2.3 二叉树的性质2.4 二叉树的存储结构 3 堆 — 完全二叉树的顺序结构实现3.1 堆的概念3.2 核心代码3.3 堆应用1 堆排序2 TOP-K问题 4 二叉树的链式存储4.1 二叉链结构与初始化…...

编程日记 2023/8/5 11:35:31

信号平滑或移动平均滤波研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/5 11:34:30

黑客技术（网络安全）自学

一、黑客是什么原是指热心于计算机技术，水平高超的电脑专家，尤其是程序设计人员。但后来，黑客一词已被用于泛指那些专门利用电脑网络搞破坏或者恶作剧的家伙。二、学习黑客技术的原因其实，网络信息空间安全已经成为海陆空之…...

编程日记 2023/8/5 11:33:29

使用七牛云、阿里云、腾讯云的对象存储上传文件

说明：存在部分步骤省略的情况，请根据具体文档进行操作下载相关sdk composer require qiniu/php-sdkcomposer require aliyuncs/oss-sdk-php composer require alibabacloud/sts-20150401composer require qcloud/cos-sdk-v5 composer require qcloud_s…...

编程日记 2023/8/5 11:32:28

使用阿里云DataX完成数据同步

DataX DataX 是阿里云 DataWorks 数据集成的开源版本，在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, datab…...

编程日记 2023/8/5 11:31:26

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

椭圆曲线密码学(ECC)

一、ECC算法概述椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

Unity3D中Gfx.WaitForPresent优化方案

前言在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2026/1/12 10:41:22

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2026/1/31 11:58:35

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

Springboot社区养老保险系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...

编程新知 2026/1/26 2:48:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小

核心代码

完整代码

在线示例

相关文章：