Cesium 实战教程 - 调整 3dtiles 倾斜摄影大小
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 倾斜摄影大小 核心代码完整代码在线示例 之前由于误解遇到一个特殊的需求：想要把三维球上叠加倾斜摄影进行自由放大缩小，跟随地图的缩放进行缩放。 后来经过搜索、尝试，终于实现了需求。 但是，后…...
python机器学习（七）决策树(下) 特征工程、字典特征、文本特征、决策树算法API、可视化、解决回归问题
决策树算法 特征工程-特征提取 特征提取就是将任意数据转换为可用于机器学习的数字特征。计算机无法直接识别字符串，将字符串转换为机器可以读懂的数字特征，才能让计算机理解该字符串(特征)表达的意义。 主要分为：字典特征提取(特征离散化)…...
数据结构与算法中的双向链表
链表概念在现实世界中使用得很普遍。当我们使用 Spotify 播放队列中的下一首歌曲时，我们学到的单链表的概念就开始发挥作用。但是要播放队列中的上一首歌曲到底可以做什么呢？ 在这篇博客中，我们将了解与数据结构相关的另一个概念，…...
数据安全治理的关键-数据分类分级工具
强大的资产发现能力 多种资产发现方式的组合应用，能够最大程度地提高资产发现能力。 灵活的敏感数据分类分级规则 内置丰富的敏感数据分类分级规则，支持正则表达式、关键词组、非结构化指纹、结构化指纹、机器聚类等多种匹配方式，并且规则…...
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 ⭐作者介绍࿱…...
Java正则校验密码至少包含：字母数字特殊符号中的2种
一、语法 字符说明\将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如， n匹配字符 n。\n 匹配换行符。序列 \\\\ 匹配 \\ ，\\( 匹配 (。^匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与"\n…...
Stable Diffusion教程(6) - 扩展安装
打开stable diffusion webUI界面 加载插件列表 依次点击扩展->可用->加载自 搜索插件 首先在搜索框输入你要安装的插件，然后点击插件后面的安装按钮 如果你需要的插件这里面没有找到，可通过通网址安装的方式安装。 在git仓库网址输入框输入的你插件…...
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…...
字母异位词分组 LeetCode热题100
题目 给你一个字符串数组，请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 思路 将字符串按字符升序排列后作为key，原字符串作为value存储到map上。 代码 class Solution…...
使用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=".…...
安达发制造工业迈向智能化：APS高级计划排程助力提升生产效率
随着市场竞争的加剧，制造企业纷纷寻求提高生产效率和降低成本的方法。近年来，越来越多的制造企业开始采用APS(高级计划与排程)系统，以优化生产计划和排程，提高生产效率，并在竞争中取得优势。 现代制造业通常面临复杂的…...
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. 自定…...
【项目 线程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…...
Filebeat+ELK 部署
目录 //在 Node1 节点上操作 1．安装 Filebeat 2．设置 filebeat 的主配置文件 3．在 Logstash 组件所在节点上新建一个 Logstash 配置文件 4．浏览器访问 http://192.168.193.40:5601 登录 Kibana，单击“Create In…...
el-table点击表格某一行添加到URL参数，访问带参URL加载表格内容并滚动到选中行位置 [Vue3] [Element-plus 2.3]
写在最前 需求：有个表格列出了一些行数据，每个行数据点击后会加载出对应的详细数据，想要在点击了某一行后，能够将该点击反应到URL中，这样我复制这个URL发给其他人，他们打开时也能看到同样的行数据。 url会根…...
【树】 二叉树 堆与堆排序 平衡(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 二叉链结构与初始化…...
信号平滑或移动平均滤波研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
黑客技术（网络安全）自学
一、黑客是什么 原是指热心于计算机技术，水平高超的电脑专家，尤其是程序设计人员。但后来，黑客一词已被用于泛指那些专门利用电脑网络搞破坏或者恶作剧的家伙。 二、学习黑客技术的原因 其实，网络信息空间安全已经成为海陆空之…...
使用七牛云、阿里云、腾讯云的对象存储上传文件
说明：存在部分步骤省略的情况，请根据具体文档进行操作 下载相关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…...
使用阿里云DataX完成数据同步
DataX DataX 是阿里云 DataWorks 数据集成的开源版本，在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, datab…...
---命令解析和工具映射蓉)
【GUI-Agent】阶跃星辰 GUI-MCP 解读---()---命令解析和工具映射蓉
先回顾：三次握手（建立连接）核心流程（实际版） 为了让挥手流程衔接更顺畅，咱们先快速回顾三次握手的实际核心，避免上下文脱节： 第一步（客户端→服务器）…...
GCC优化禁用指南：精准控制编译行为的5种方法
1. 为什么需要禁用GCC优化？ 在嵌入式开发或者调试过程中，我们经常会遇到一些奇怪的bug：明明代码逻辑没有问题，但程序运行时却出现异常。这时候很可能就是编译器优化在"捣鬼"。GCC作为最常用的开源编译器，它的…...
2.1 线程创建、优先级与调度算法
操作系统与实时内核：为什么需要线程？ 最近在调试一个电机控制项目，遇到了一个典型问题：主循环里既要处理串口指令，又要实时刷新PWM占空比，还得盯着温度保护。烧录进去跑起来，电机一转，串口数据就开始丢包。用逻辑分析仪抓波形，发现PWM更新周期时不时跳变一下——某个…...
【typst-rs】greet.rs文件
以下是对greet.rs的详细解析。 use std::io::{self, Read};/// This is shown to users who just type typst the first time. #[rustfmt::skip] const GREETING: &str color_print::cstr!("\ <s>Welcome to Typst, we are glad to have you here!</> ❤…...
给嵌入式开发者的698协议实战拆解：从报文抓包到C语言解析（附代码）
给嵌入式开发者的698协议实战拆解：从报文抓包到C语言解析（附代码） 在智能电表与集中器通信领域，698协议正逐渐成为主流标准。不同于传统645协议的简单数据标识，698协议采用面向对象的设计思想，为开发者提供…...
小团队福音：用两台服务器搞定Redis高可用（Keepalived+互为主从配置）
小团队福音：用两台服务器构建轻量级Redis高可用架构 在初创公司和小型技术团队中，服务器资源往往捉襟见肘。当业务需要Redis作为缓存或数据库时，传统的高可用方案如哨兵模式需要至少三台服务器，这对资源有限的团队来说可能过于奢侈…...
从零搭建一个RAG应用：我为什么最终放弃了ChromaDB而选择了Milvus？
从零搭建一个RAG应用：我为什么最终放弃了ChromaDB而选择了Milvus？ 去年夏天，当我接到为企业内部构建文档知识库系统的任务时，本以为选择向量数据库会是整个项目中最简单的决策。毕竟ChromaDB在开发者社区的口碑极佳，文…...
隐私优先的AI助手：OpenClaw+Qwen3-4B离线处理敏感财务文档
隐私优先的AI助手：OpenClawQwen3-4B离线处理敏感财务文档 1. 为什么需要离线AI财务助手 去年整理家庭年度支出时，我遇到了一个尴尬问题：想把银行流水导出到Excel做分类统计，但账单PDF包含太多敏感信息（账户号、交易对…...
魔兽争霸III运行卡顿、画面变形？WarcraftHelper开源工具助你解决经典游戏兼容难题
魔兽争霸III运行卡顿、画面变形？WarcraftHelper开源工具助你解决经典游戏兼容难题 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 经典游戏…...
SMART200与FANUC机器人Profinet通讯：除了组态，这些调试‘玄学’问题你遇到过吗？
SMART200与FANUC机器人Profinet通讯实战：那些手册上没写的调试技巧 第一次在项目现场看到FANUC机器人手臂突然停止动作，而SMART200 PLC的指示灯还在正常闪烁时，我就知道遇到了传说中的"通讯玄学"问题。这种场景对于自动化工程师来说…...