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. -->
    <meta
            name="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 调整模型大小

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/60101.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ClickHouse SQL与引擎--基本使用(一)

ClickHouse SQL与引擎--基本使用(一)

1.查看所有的数据库 show databases; 2.创建库 CREATE DATABASE zabbix ENGINE Ordinary; ATTACH DATABASE ck_test ENGINE Ordinary;3.创建本地表 CREATE TABLE IF NOT EXISTS test01(id UInt64,name String,time UInt64,age UInt8,flag UInt8 ) ENGINE MergeTree PARTI…
阅读更多...
【单调栈part03】| 84.柱状图中的最大矩形

【单调栈part03】| 84.柱状图中的最大矩形

&#x1f388;LeetCode84.柱状图中的最大矩形 链接&#xff1a;84.柱状图中的最大矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积 public static in…
阅读更多...
金融学复习博迪(第1-5章）

金融学复习博迪(第1-5章）

第一部分 金融和金融体系 第1章 金融学 金融&#xff1a;资金的流通&#xff0c;即储蓄&#xff0c;信贷、汇兑、股票和证券交易等经济活动的总称。 金融学&#xff1a;研究货币流通的学问。 传统的金融学研究领域大致有两个方向&#xff1a; >宏观层面的金融市场运行理论…
阅读更多...
【C++】数据结构与算法：常用排序算法

【C++】数据结构与算法：常用排序算法

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍常用排序算法。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#x1…
阅读更多...
2023年C++面试宝典

2023年C++面试宝典

目录 第一章&#xff1a;C基础知识1.1 C语言起源与发展1.2 C的重要特点和优点1.3 C的数据类型和变量1.4 函数和命名空间1.5 运算符和表达式 第二章&#xff1a;面向对象编程2.1 类与对象的概念2.2 封装、继承和多态2.3 构造函数和析构函数2.4 静态成员和常量成员2.5 虚函数和纯…
阅读更多...
服务器的shell脚本

服务器的shell脚本

shell脚本语句可以执行linux的操作语句。 linux相当于网页&#xff0c;shell相当于java。可以解释编写执行逻辑。 shell的开头以&#xff1a;#!bin/sh 定义解析方式&#xff0c;不同的linuxe内核解释方式不同。大多数内核支持sh&#xff08;bash&#xff09;方式。 执行sh文件可…
阅读更多...
Intellij IDEA运行报Command line is too long的解决办法

Intellij IDEA运行报Command line is too long的解决办法

想哭&#xff0c;vue前端运行起来&#xff0c;对应的后端也得起服务。 后端出的这个bug&#xff0c;下面的博客写的第二种方法&#xff0c;完整截图是下面这个。 ​​​​​​​​​​​​​​​​​​​​Intellij IDEA运行报Command line is too long的解决办法 - 知乎 (zh…
阅读更多...
Jmeter组件作用域及执行顺序

Jmeter组件作用域及执行顺序

目录 一、Jmeter八大可执行元件 二、组件执行顺序 三、组件作用域 四、特殊说明 一、Jmeter八大可执行元件 配置元件---Config Element 用于初始化默认值和变量&#xff0c;以便后续采样器使用。配置元件大其作用域的初始阶段处理&#xff0c;配置元件仅对其所在的测试树分…
阅读更多...
【C++】做一个飞机空战小游戏(五)——getch()控制两个飞机图标移动(控制光标位置)

【C++】做一个飞机空战小游戏(五)——getch()控制两个飞机图标移动(控制光标位置)

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…
阅读更多...
【云原生】K8S二进制搭建二：部署CNI网络组件

【云原生】K8S二进制搭建二：部署CNI网络组件

目录 一、K8S提供三大接口1.1容器运行时接口CRI1.2云原生网络接口CNI1.3云原生存储接口CSI 二、Flannel网络插件2.1K8S中Pod网络通信2.2Overlay Network2.3VXLAN2.4Flannel 三、Flannel udp 模式的工作原理3.1ETCD 之 Flannel 提供说明 四、vxlan 模式4.1Flannel vxlan 模式的工…
阅读更多...
Total Variation loss

Total Variation loss

Total Variation loss 适合任务 图像复原、去噪等 处理的问题 图像上的一点点噪声可能就会对复原的结果产生非常大的影响&#xff0c;很多复原算法都会放大噪声。因此需要在最优化问题的模型中添加一些正则项来保持图像的光滑性&#xff0c;图片中相邻像素值的差异可以通过…
阅读更多...
ardupilot 中坐标变换矩阵和坐标系变换矩阵区别

ardupilot 中坐标变换矩阵和坐标系变换矩阵区别

目录 文章目录 目录摘要1.坐标变换矩阵与坐标系变换矩阵摘要 本节主要记录ardupilot 中坐标变换矩阵和坐标系变换矩阵的区别，这里非常重要，特别是进行姿态误差计算时，如果理解错误，很难搞明白后面算法。 1.坐标变换矩阵与坐标系变换矩阵 坐标变换矩阵的本质含义：是可以把…
阅读更多...
【visual studio2019】如何打开即时窗口

【visual studio2019】如何打开即时窗口

在 Visual Studio2019 中打开即时窗口&#xff0c;有两种方法&#xff1a; 1、可以通过“调试”菜单&#xff0c;然后选择“窗口”下的“即时窗口”选项 2、直接使用快捷键“Ctrl Alt I” 此时即时窗口将显示在 Visual Studio2019 的底部。在即时窗口中&#xff0c;可以执…
阅读更多...
MongoDB文档--基本概念

MongoDB文档--基本概念

阿丹&#xff1a; 不断拓展自己的技术栈&#xff0c;不断学习新技术。 基本概念 MongoDB中文手册|官方文档中文版 - MongoDB-CN-Manual mongdb是文档数据库 MongoDB中的记录是一个文档&#xff0c;它是由字段和值对组成的数据结构。MongoDB文档类似于JSON对象。字段的值可以包…
阅读更多...
使用ChatGPT编写技术文档

使用ChatGPT编写技术文档

技术文档对于任何项目都是至关重要的&#xff0c;因为它确保所有利益相关者都在同一层面上&#xff0c;并允许有效的沟通和协作。创建详细而准确的技术文档可能既耗时又具有挑战性&#xff0c;特别是对于那些不熟悉主题或缺乏强大写作技巧的人来说。ChatGPT 是一个强大的人工智…
阅读更多...
对python中多态详细教程

对python中多态详细教程

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一、多态 多态是指一类事物有多种形态&#xff0c;比如动物类&#xff0c;可以有猫&#xff0c;狗&#xff0c;猪等等。 &#xff08;一个抽象类有多个子类&#xff0c;因而多态的概念依赖于继承&#xff09; import…
阅读更多...
【使用bat脚本实现批量创建文件夹、批量复制文件至对应文件夹中】

【使用bat脚本实现批量创建文件夹、批量复制文件至对应文件夹中】

使用bat脚本实现批量创建文件夹、批量复制文件至对应文件夹中 常用cmd命令 场景一&#xff1a;在指定位置批量创建文件夹 在桌面创建一个txt文件编写创建目录代码 //在桌面"五保户结算单"的文件夹下创建名称为"1张三"的文件夹 md E:\桌面\五保户结算单\…
阅读更多...
【深度学习_TensorFlow】感知机、全连接层、神经网络

【深度学习_TensorFlow】感知机、全连接层、神经网络

写在前面 感知机、全连接层、神经网络是什么意思&#xff1f; 感知机&#xff1a; 是最简单的神经网络结构&#xff0c;可以对线性可分的数据进行分类。 全连接层&#xff1a; 是神经网络中的一种层结构&#xff0c;每个神经元与上一层的所有神经元相连接,实现全连接。 神经…
阅读更多...
2023年08月IDE流行度最新排名

2023年08月IDE流行度最新排名

点击查看最新IDE流行度最新排名&#xff08;每月更新&#xff09; 2023年08月IDE流行度最新排名 顶级IDE排名是通过分析在谷歌上搜索IDE下载页面的频率而创建的 一个IDE被搜索的次数越多&#xff0c;这个IDE就被认为越受欢迎。原始数据来自谷歌Trends 如果您相信集体智慧&am…
阅读更多...
京品优送元宇宙 上海布袋除尘器后一家太平洋百货月底停业

京品优送元宇宙 上海布袋除尘器后一家太平洋百货月底停业

上海布袋除尘器后一家太平洋百货即将停业。 7月31日&#xff0c;上海太平洋百货微信公号发布公告称&#xff0c;由于与合资方的合作期限今年届满&#xff0c;上海太平洋百货徐汇店将于2023年8月31日营业结束后正式谢幕&#xff0c;终止经营&#xff0c;并于即日起开展大型主题感…
阅读更多...
最新文章

Copyright @ 2022~2023