Cesium 加载3dTiles倾斜摄影模型

2023-10-15 07:40

本文主要是介绍Cesium 加载3dTiles倾斜摄影模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:新手小白,初步探索流程。

一. Java及Tomcat环境配置

tomcat8.0.47版本,JAVA 8
在这里插入图片描述

1. 安装JAVA,并设置环境变量

JAVA正常安装即可,可以不更改安装目录。
配置环境变量JAVA_HOME及PATH:
在这里插入图片描述
在这里插入图片描述
输入where java 检查java安装目录,如果是刚才的安装目录,说明安装正确:
在这里插入图片描述

2. 安装tomcat绿色版

解压缩放置到指定的目录,然后设置环境变量。
新建环境变量:

CATALINA_BASE C:\tomcat\apache-tomcat-8.0.47
CATALINA_HOME C:\tomcat\apache-tomcat-8.0.47
PATH %CATALINA_HOME%\lib;%CATALINA_HOME%\bin;
添加到最后

设置tomcat服务和自动启动
安装服务---- install.bat
在C:\tomcat\apache-tomcat-8.0.47目录下创建install.bat文件,然后将以下线段中间代码拷贝到该文件中并保存。

@echo off
echo "开始执行安装"
echo 注册Tomcat8为系统服务call %~dp0%bin/service.bat install
echo 设置Tomcat8服务自动启动
sc config Tomcat8 start= autoecho 启动Tomcat8
net start Tomcat8echo "安装完成"
pause

拷贝完成之后,右键以管理员模式运行install.bat.如果安装成功,在service列表应该可以查看到tomcat服务。

卸载服务----delete.bat
如果安装不成功,可以创建卸载服务的delete.bat文件。将以下线段中间的代码拷贝到delete.bat文件中。

@echo off
echo "开始执行卸载"echo 停止Tomcat8服务
net stop Tomcat8echo 删除Tomcat8服务
call %~dp0%bin/service.bat removeecho "卸载完成"
pause

以管理员身份运行delete.bat文件,即可删除生成的tomcat服务。
然后再右键以管理员模式运行install.bat.如果安装成功,在service列表应该可以查看到tomcat服务。

Tomcat 访问界面:http://localhost:8080/

3. 跨域问题

(1)在web.xml文件中修改加入代码:
在这里插入图片描述
在这里插入图片描述

<filter><filter-name>CORS</filter-name><filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class><init-param><param-name>cors.allowOrigin</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.supportedMethods</param-name><param-value>GET,POST,HEAD,PUT,DELETE</param-value></init-param><init-param><param-name>cors.supportedHeaders</param-name><param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value></init-param><init-param><param-name>cors.exposedHeaders</param-name><param-value>Set-Cookie</param-value></init-param><init-param><param-name>cors.supportsCredentials</param-name><param-value>true</param-value></init-param>
</filter>
<filter-mapping><filter-name>CORS</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

(2)添加对应的跨域处理包:
在这里插入图片描述
下载地址:https://download.csdn.net/download/caozl1132/11759866

二. Cesium安装部署

官网下载地址:https://cesium.com/downloads/

将程序下载后放在Tomcat Webapp下:
在这里插入图片描述
可以新建自己的工程文件夹,在文件夹内创建自己的HTML文件。这里创建了test文件夹,可以将原本HelloWorld的文件拷贝到test下,在基础上修改:
在这里插入图片描述
通过以下地址查看应用:
在这里插入图片描述

三. 发布3dTiles模型

1. 拷贝发布三维模型

将三维模型Scene文件夹拷贝到webapp文件夹下:
在这里插入图片描述
加载时,加载对应的test3d模型的json文件:
在这里插入图片描述
加载模型部分代码:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 模型位置调整

模型在生产的时候可能和目前球体的坐标系不太符合,导致会出现漂浮在空中的情况,可以通过调整模型平移的参数来调整模型的位置:
在这里插入图片描述

四. 添加Shapefile数据

(1)拷贝数据
通过网上大神提供的CesiumVectorTile.js库实现加载,下载地址:https://download.csdn.net/download/suntongxue100/12715639
之后将道路shapefile数据拷贝到Cesium文件夹下:
在这里插入图片描述
(2)代码
添加引用:
在这里插入图片描述
在这里插入图片描述
显示效果:
在这里插入图片描述
遗留问题:目前shapefile数据显示会被三维模型覆盖,还在找贴合三维模型显示的方法。

五. 增加地形

制作dem切片数据,使用了gdal2srtmtiles工具,工具下载地址参考博客:https://blog.csdn.net/qq_36377037/article/details/86300330

工具使用文档解释非常完整,但是目前好像有一些问题,前端加载会有丢失tile的情况。

制作好的切片放置位置:
在这里插入图片描述
代码加载:
在这里插入图片描述
整体效果:
在这里插入图片描述
完整代码:

<!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>test</title><script src="../Build/Cesium/Cesium.js"></script><script src="../js/CesiumVectorTile.js"></script><style>@import url(../Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style></head><body><div id="cesiumContainer"></div><script>//var viewer = new Cesium.Viewer("cesiumContainer");var terrainProvider = new Cesium.CesiumTerrainProvider({ url: "../terraintiles" });var viewer = new Cesium.Viewer('cesiumContainer',{terrainProvider:terrainProvider,animation:false,       //是否显示动画控件homeButton:true,       //是否显示home键//geocoder:false,         //是否显示地名查找控件        如果设置为true,则无法查询baseLayerPicker:false, //是否显示图层选择控件timeline:false,        //是否显示时间线控件fullscreenButton:true, //是否全屏显示scene3DOnly:true,     //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源infoBox:true,         //是否显示点击要素之后显示的信息sceneModePicker:false,  //是否显示投影方式控件  三维/二维navigationInstructionsInitiallyVisible:false,navigationHelpButton:false,     //是否显示帮助信息控件selectionIndicator:false,        //是否显示指示器组件//加载谷歌卫星影像imageryProvider : new Cesium.UrlTemplateImageryProvider({url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"}) });viewer.scene.globe.depthTestAgainstTerrain = true;    //make the vector features stick to the terrainviewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息         //var tileset = new Cesium.Cesium3DTileset({ url: modeldata/3Dtilesdata(3839) });var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({    url: 'http://192.168.64.236:8080/Scene/test3d.json',maximumScreenSpaceError: 2,maximumNumberOfLoadedTiles: 1000})); //movevar translation=Cesium.Cartesian3.fromArray([20,50,-1aa0]);m= Cesium.Matrix4.fromTranslation(translation);//move生效tileset._modelMatrix = m;viewer.scene.primitives.add(tileset);      tileset.readyPromise.then(function(tileset) {viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));}).otherwise(function(error) {console.log(error);});//load shpfile		var VectorTileImageryProvider = Cesium.VectorTileImageryProvider;var roadsshp = new VectorTileImageryProvider({source: "../shp/roads.shp",defaultStyle: {outlineColor: "rgb(255,0,0)",lineWidth: 5});roadsshp.readyPromise.then(function () {viewer.imageryLayers.addImageryProvider(roadsshp);});</script></body>
</html>

这篇关于Cesium 加载3dTiles倾斜摄影模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/suntongxue100/article/details/108034719
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/216322

相关文章

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》:本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos

详解如何使用Python从零开始构建文本统计模型

《详解如何使用Python从零开始构建文本统计模型》在自然语言处理领域,词汇表构建是文本预处理的关键环节,本文通过Python代码实践,演示如何从原始文本中提取多尺度特征,并通过动态调整机制构建更精确... 目录一、项目背景与核心思想二、核心代码解析1. 数据加载与预处理2. 多尺度字符统计3. 统计结果可

SpringBoot整合Sa-Token实现RBAC权限模型的过程解析

《SpringBoot整合Sa-Token实现RBAC权限模型的过程解析》:本文主要介绍SpringBoot整合Sa-Token实现RBAC权限模型的过程解析,本文给大家介绍的非常详细,对大家的学... 目录前言一、基础概念1.1 RBAC模型核心概念1.2 Sa-Token核心功能1.3 环境准备二、表结

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

IDEA下"File is read-only"可能原因分析及"找不到或无法加载主类"的问题

《IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题》:本文主要介绍IDEA下Fileisread-only可能原因分析及找不到或无法加载主类的问题,具有很好的参... 目录1.File is read-only”可能原因2.“找不到或无法加载主类”问题的解决总结1.File

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》:本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一:使用 uic 模块动态加载 (不推荐用于大型项目)方法二:将 UI 文件编译为 python 模

Spring框架中@Lazy延迟加载原理和使用详解

《Spring框架中@Lazy延迟加载原理和使用详解》:本文主要介绍Spring框架中@Lazy延迟加载原理和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、@Lazy延迟加载原理1.延迟加载原理1.1 @Lazy三种配置方法1.2 @Component

SpringBoot中配置文件的加载顺序解读

《SpringBoot中配置文件的加载顺序解读》:本文主要介绍SpringBoot中配置文件的加载顺序,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot配置文件的加载顺序1、命令⾏参数2、Java系统属性3、操作系统环境变量5、项目【外部】的ap

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA