cesium渲染3DTiles模型和glb模型

cesium渲染3DTiles模型和glb模型

在这里插入图片描述

相关网站:

1.快速入门:https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

2.webpack配置:https://github.com/CesiumGS/cesium-webpack-example#cesium-webpack-example

3.说明文档(找中文文档请看清楚人家的版本和你下载的版本!大坑):https://cesium.com/learn/cesiumjs/ref-doc/

4.实例地址:https://sandcastle.cesium.com/?src=3D%20Tiles%20Feature%20Styling.html

5.模型文件下载:https://blog.csdn.net/lu6545311/article/details/142628319?spm=1001.2014.3001.5502

6.demo的下载(也有模型文件):https://github.com/ljy-110/vue-cesium-model/tree/main/vue2-cesium-model

一、安装cesium

1.安装cesium

1.1 NPM 安装

npm install cesium

1.2 CDN引入

<script src="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

二、获取token

登录注册cesium(https://ion.cesium.com/signin/),进入个人中心

在这里插入图片描述

然后创建token

在这里插入图片描述

三、安装拿到token之后,我们开始运行,先把地球给搞出来先

因为我测试的,所以直接使用了CDN的引入

<div id="Model" ref="mapDiv" class="divTdtMap" style="height:100%;width:100%;margin:auto;"></div>
Cesium.Ion.defaultAccessToken = "";  //放你的token
viewer = new Cesium.Viewer("Model", {  
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
});
      // 隐藏版权
      viewer._cesiumWidget._creditContainer.style.display = "none";

最终的展示效果,出现一个地球

在这里插入图片描述

四、开始渲染3DTiles模型

4、模型的来源可以去看看的另一个文章(测试使用的是香港地区的模型)

https://blog.csdn.net/lu6545311/article/details/142628319?spm=1001.2014.3001.5502

let tilesetUrl = '/model/tile_20_27_CESIUM/tileset.json'  //模型地址这是本地的,如果是服务器的就直接把路径放进来就行了
      let property = {
        skipLevelOfDetail: true,
        maximumScreenSpaceError: 16,
        cullWithChildrenBounds: true,
        baseScreenSpaceError: 100, // 基本屏幕错误阈值
        skipScreenSpaceErrorFactor: 16, // 跳过屏幕错误因子
        skipLevels: 3, // 跳过的层数
        immediatelyLoadDesiredLevelOfDetail: false, // 是否立即加载所需的细节级别
        loadSiblings: false, // 是否加载同级别的其他3DTiles
      }
      tileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl, property);
      // 加载完成的回调
      // tileset.allTilesLoaded.addEventListener(function() {
      //     console.log('All tiles are loaded');
      // });
      viewer.scene.primitives.add(tileset);
      //加载完成后缩放到模型位置
      viewer.zoomTo(tileset);

直接展示模型,会发现这个模型视角太大了,看到的模型距离很近

在这里插入图片描述

4.2 所以我们要通过调整摄像头来达到我们想要的效果

viewer.camera.flyTo({
        // fromDegrees()方法,将经纬度和高程转换为世界坐标,这里定位到渔港
        destination: Cesium.Cartesian3.fromDegrees(114.15877963610748, 22.276363621909915, 500.0),
        orientation: {
          // heading: Cesium.Math.toRadians(0),// 指向
          pitch: Cesium.Math.toRadians(-30),// 视角
          roll: 0.0,
        },
      });

最后效果如下

在这里插入图片描述

4.3 在调试的时候发现这个很麻烦,很难调整,特别是改变了高度或者视角,旋转都会导致其他的效果不一样,所以可以使用下面的方法来调整他们的位置,拿到对应的数据

//camera.moveEnd  摄像头移动结束后的回调  
viewer.camera.moveEnd.addEventListener(function() {  
          // 获取相机当前的位置(笛卡尔坐标)  
          var cartesian = viewer.camera.positionCartographic;  
          // 转换为经纬度和高度的对象  
          var longitude = Cesium.Math.toDegrees(cartesian.longitude);  
          var latitude = Cesium.Math.toDegrees(cartesian.latitude);  
          var height = cartesian.height;
    		console.log('经纬度:', longitude, latitude);  
    		console.log('高度:', height);  
          // 获取相机的朝向和俯仰角  
          var heading = Cesium.Math.toDegrees(viewer.camera.heading);  
          var pitch = Cesium.Math.toDegrees(viewer.camera.pitch);  
          var roll = Cesium.Math.toDegrees(viewer.camera.roll);
    	console.log('朝向(度):', heading);
    	console.log('俯仰角(度):', pitch);
    	console.log("(翻滚角):",roll);
});

4.4 允许缩放的范围

// 最小缩放高度(米)
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
      // 最大缩放高度(米)
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10000;

五、在这个基础上,再渲染一个glb模型,飞机模型在上空展示

模型文件看相关地址

let modelUrl = '/model/Airplane.glb'
      // 创建一个Entity  
      let entity = new Cesium.Entity({
        name: '飞机',
        position: Cesium.Cartesian3.fromDegrees(114.158025, 22.282767, 200.0), // 设置模型的位置  
        model: {
          uri: modelUrl,
          scale: 30.0, // 根据需要调整模型大小  
          // minimumPixelSize: 128,
          // maximumScale: 20000  
        },
      });
      // 将Entity添加到Cesium Viewer的entities集合中  
      viewer.entities.add(entity);

最新效果

在这里插入图片描述

六、cesium的地图改成天地图

const tianditu = new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=你的ak',
        layer: 'img_w',
        style: 'default',
        format: 'tiles',
        tileMatrixSetID: 'w',
        subdomains:['t0','t1','t2','t3','t4','t5','t6','t7'],
        maximumLevel: 18,
        credit: new Cesium.Credit('天地图'),
      })  

      // 将天地图层添加到观众实例的影像图层集合中
      viewer.imageryLayers.addImageryProvider(tianditu)

在这里插入图片描述

七、地图添加地点的文字标注提示

viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url:
            "http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
            "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
            "&style=default&format=tiles&tk=你的ak",
          layer: "vec_w",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "w",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", ],
          maximumLevel: 18,
          show: false,
        })
      );

在这里插入图片描述

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

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

相关文章

灰狼优化算法

一、简介 1.1 灰狼优化算法-Grey Wolf Optimizer 通过模拟灰狼群体捕食行为&#xff0c;基于狼群群体协 作的机制来达到优化的目的。&#xff27;&#xff37;&#xff2f;算法具有结构简单、需 要调节的参数少、容易实现等特点&#xff0c;其中存在能够自适应调整 的收敛因子…

新日撸java三百行` 新手小白java学习记录 `Day1

新日撸java三百行新手小白java学习记录 Day1 模拟多线程回调机制 文章目录 新日撸java三百行 新手小白java学习记录 前言一 、模拟异步机制提出问题解决方案 前言 古人称长江为江&#xff0c;黄河为河。长江水清&#xff0c;黄河水浊&#xff0c;长江在流&#xff0c;黄河也在…

【Unity Bug 随记】unity version control 报 xx is not in a workspace.

可能原因是更改了仓库或者项目名称。 解决办法就是重置Unity Version Control&#xff0c;去Hub disconnect 然后重新connect cloud和UVC UVC可能连不上&#xff0c;直接进入项目就行&#xff0c;打开版本管理标签会让你重新连工作区&#xff0c;选择你的仓库和工作区 然后In…

Go语言入门教案

文章目录 一、教学目标二、教学重难点&#xff08;一&#xff09;重点&#xff08;二&#xff09;难点 三、教学方法四、教学过程&#xff08;一&#xff09;Go语言简介&#xff08;二&#xff09;环境搭建1. 下载和安装Go语言开发环境2. 配置Go语言环境变量3. 命令行查看Go语言…

[2024最新] java八股文实用版(附带原理)---java集合篇

介绍一下常见的list实现类&#xff1f; ArrayList 线程不安全&#xff0c;内部是通过数组实现的&#xff0c;继承了AbstractList&#xff0c;实现了List&#xff0c;适合随机查找和遍历&#xff0c;不适合插入和删除。排列有序&#xff0c;可重复&#xff0c;当容量不够的时候…

7天用Go从零实现分布式缓存GeeCache(学习)(3)

目录结构 ├── geecache │ ├── byteview.go │ ├── cache.go │ ├── consistenthash │ │ ├── consistenthash.go │ │ └── consistenthash_test.go │ ├── geecache.go │ ├── go.mod │ ├── http.go │ ├── lru │ …

OpenHarmony-1.启动流程

OpenHarmony启动流程 1.kernel的启动 流程图如下所示&#xff1a;   OpenHarmony(简称OH)的标准系统的底层系统是linux&#xff0c;所以调用如下代码&#xff1a; linux-5.10/init/main.c: noinline void __ref rest_init(void) {struct task_struct *tsk;int pid;rcu_sch…

HTB:Precious[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机TCP端口进行开放扫描 使用curl访问靶机80端口 使用ffuf爆破一下子域 使用浏览器访问该域名 使用curl访问该域名响应头 使用exiftool工具查看该pdf信息 横向移动 USER_FLAG&#xff1a;adf5793a876a190f0c08b3b6247cec32…

jsmind 思维导图 + monaco-editor + vue3 + ts

Index.vue: <template><div class"m-jsmind-wrap"><div class"m-jsmind-header"><el-button type"primary" click"() > handleReset()">重置</el-button><el-button type"primary" cl…

在arm64架构下, Ubuntu 18.04.5 LTS 用命令安装和卸载qt4、qt5

问题&#xff1a;需要在 arm64下安装Qt&#xff0c;QT源码编译失败以后&#xff0c;选择在线安装&#xff01; 最后安装的版本是Qt5.9.5 和QtCreator 4.5.2 。 一、ubuntu安装qt4的命令(亲测有效)&#xff1a; sudo add-apt-repository ppa:rock-core/qt4 sudo apt updat…

AIGC学习笔记(5)——AI大模型开发工程师

文章目录 AI大模型开发工程师004 垂直领域的智能在线搜索平台1 智能在线搜索平台需求分析大模型不够“聪明”增强大模型的方式需求分析2 智能在线搜索平台方案设计方案设计技术选型大模型版本GLM-4大模型注册使用Google Cloud平台注册创建可编程的搜索引擎3 智能在线搜索平台代…

【React】状态管理之Redux

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 状态管理之Redux引言1. Redux 的核心概念1.1 单一数据源&#xff08;Single Sou…

Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了玩家属性栏&#xff0c;仓库&#xff0c;物品栏UI的制作 UI_StatSlot.cs 这个脚本是用来在Unity的UI上显示玩家属性&#xf…

蓝桥杯每日真题 - 第7天

题目&#xff1a;&#xff08;爬山&#xff09; 题目描述&#xff08;X届 C&C B组X题&#xff09; 解题思路&#xff1a; 前缀和构造&#xff1a;为了高效地计算子数组的和&#xff0c;我们可以先构造前缀和数组 a&#xff0c;其中 a[i] 表示从第 1 个元素到第 i 个元素的…

Llama旋转位置编码代码实现及详解

旋转位置编码RoPE 在旋转位置编码与Transformer和BERT之间的区别中介绍了旋转位置编码&#xff08;RoPE&#xff09;的特点和优势&#xff0c;这种输入长度动态可变的优势使得在Llama编码时&#xff0c;不需要掩码将多余的嵌入掩住。为了详细了解RoPE是如何实现的&#xff0c;…

WebSocket和HTTP协议的性能比较与选择

WebSocket和HTTP协议的性能比较与选择 引言&#xff1a; 在web应用开发中&#xff0c;无论是实时聊天应用、多人在线游戏还是实时数据传输&#xff0c;网络连接的稳定性和传输效率都是关键要素之一。目前&#xff0c;WebSocket和HTTP是两种常用的网络传输协议&#xff0c;它们…

WebRTC项目一对一视频

开发步骤 1.客户端显示界面 2.打开摄像头并显示到页面 3.websocket连接 4.join、new-peer、resp-join信令实现 5.leave、peer-leave信令实现 6.offer、answer、candidate信令实现 7.综合调试和完善 1.客户端显示界面 步骤&#xff1a;创建html页面 主要是input、button、vide…

GIS基础知识:WKT格式、WKB格式

什么是WKT格式&#xff1f; WKT&#xff08;Well-Known Text&#xff09;是一种用于描述地理空间几何对象的文本格式。 这种格式是由Open Geospatial Consortium&#xff08;OGC&#xff09;定义并维护的一种开放标准&#xff0c;主要用于在不同的GIS系统和数据库之间交换空间…

力扣(LeetCode)611. 有效三角形的个数(Java)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f439;今日诗词:雾失楼台&#xff0c;月迷津渡&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&#x1f64f; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主…

Mac Nginx 前端打包部署

安装homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 安装Nginx brew install nginx nginx相关命令 nginx启动命令&#xff1a;nginx nginx -s reload #重新加载配置 nginx -s reopen #重启 nginx -s stop #…