Cesium 加载3dTiles倾斜摄影模型

最新推荐文章于 2024-02-29 17:29:24 发布
最新推荐文章于 2024-02-29 17:29:24 发布
阅读量4.8k 收藏 34
点赞数 5
分类专栏： 开源笔记 文章标签： gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suntongxue100/article/details/108034719
版权

前言：新手小白，初步探索流程。

一． 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= auto

echo 启动Tomcat8
net start Tomcat8

echo "安装完成"
pause

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

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

@echo off
echo "开始执行卸载"

echo 停止Tomcat8服务
net stop Tomcat8

echo 删除Tomcat8服务
call %~dp0%bin/service.bat remove

echo "卸载完成"
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. -->
    <meta
      name="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 terrain
		viewer._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
		})); 
		
		//move
		var 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>
孙同学的一个笔记本
关注
  • 5
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium加载3dtiles格式的倾斜摄影模型数据
05-03
该资源是3dtiles格式的倾斜摄影模型数据，可供用cesium加载模型提供该格式的数据源
Cesium 之加载倾斜摄影3d模型（解决倾斜漂移问题）
wokao253615105的专栏
03-19 6042
以Cesium3DTileset方式加载服务发布的倾斜摄影静态资源Json文件，参考如下： item.url='倾斜摄影的json地址/tileset.json'; let tileset = window.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: item.url, // modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, ...
【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置
最新发布
m0_56023096的博客
02-29 989
【代码】【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置。
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载详细过程
wo_buzhidao的博客
08-28 3892
Vue3.0+Cesium+Tomcat服务下倾斜摄影数据加载 1.Vue-cli 3.0 + cesium 构建 参考资料地址Vue-cli 3.0 + cesium 构建 注意，因为文档中设置默认地址设置为http://localhost:9999（文档中写的为http://localhost:8080） 2. 将倾斜摄影的模型（3dtile模型）放在tomcat资源文件webapps文件夹下...
Cesium 加载倾斜摄影模型记录(osgb切片，shp拔高切片、模型加载、鼠标移入选中、点选查询功能)
冰雪为融的博客
12-01 2575
2、如果你的shp数据中有高度字段的话，可以选择高度字段，如果没有的话，设置固定高度的高度比你的模型稍微高一点，可以保证包着整个模型，也可以对shp数据稍微做一些缓冲区设置，使其可以前后左右包围整个模型。如果模型区域比较大的话，如果一些shp数据变化，就要对所有的shp数据重新切片，比较麻烦，所以有两种方式可以避免这种情况发生。shp如果数据量过大，做分类处理，加载会异常慢，所以需要先对其进行分割之后再进行切片(用qgis即可)1、分类未正常显示，原因：shp数据量过大，导致分类要做很多算法，加载不出来。
Cesium--倾斜摄影加载详细攻略
李卓书
06-25 1万+
cesium加载倾斜摄影信息攻略 这里是借用的一群里网友的数据. 几个概念重要的 摄影测量的格式 常见的有: osgb dae gltf b3dm …其他格式 这里我主要介绍OSGB格式的倾斜摄影测量 OSGB是OSG三维引擎定义的数据格式.OSG为二进制格式,然后贴上纹理图片就可以转换为OSGB 几大主流三维引擎介绍 目前,图形处理上,比较出色的引擎有OGRE,OpenGVS,Vtree,OSG等 逻辑串行...
【cesium-0】cesium加载倾斜摄影模型全流程
WXG1011的博客
03-15 2899
cesium加载倾斜摄影模型全流程
Cesium教程(十五)：倾斜摄影模型加载
WwLK123的博客
06-09 1384
Cesium加载倾斜摄影模型案例。包括完整代码和所用的数据
cesium加载倾斜摄影模型
devil的博客
10-25 1095
cesium加载倾斜摄影模型
非专业无人机进行倾斜摄影并且通过cesium加载
weixin_45174000的博客
03-14 1940
本文记载用非专业的测绘无人机进行倾斜摄影并且通过cesium加载
Cesium3Dtiles数据
06-01
Cesium3Dtiles格式数据，数据内附在Cesium案例中，可直接运行。
mapbox加载3dtiles倾斜摄影模型demo
07-06
mapbox加载3dtiles倾斜摄影模型demo mapbox+deck.gl加载cesium定义的3dtiles数据，方便加载倾斜摄影模型
cesium-3d-tile/倾斜摄影超大场景（14GB）
05-13
超大倾斜摄影模型,由倾斜摄影osgb转换的3Dtiles格式，cesium可直接使用，亲测可用，模型为国内某一个景区摄影，高精度，范围广。
GEE 01 -Sentinel2A 哨兵数据下载
热门推荐
suntongxue100的博客
02-01 2万+
Google Earth Engine 引擎平台有大量影像数据，Landsat系列、Sentinel系列、Modis系列，可在线查询、获取数据、在线处理数据。 一、引擎介绍 首先，你需要能访问到引擎（https://code.earthengine.google.com/）。其次，你还需要一个Google账号。然后，就可以登录并访问Code在线编辑器了。 二、下载数据 这里只是演示，通过上传矢量数据shapefile文件，查询一定范围内的哨兵数据，选取蓝绿红三个波段组合后，导出GeoTiff文件到Goog
* GDAL替换影像0值为NAN
suntongxue100的博客
09-08 3352
由于ArcMap中的影像背景值需要为NAN才能设置为透明，而有的经过预处理的影像数据的背景值为0，可通过以下方式修改: from osgeo import gdal import numpy as np dataset = gdal.Open("G:\mypython3\gdal\data\mosaic.tif") cols = dataset.RasterXSize rows = dataset.RasterYSize proj=dataset.GetProjection() im_bands = da
01-GDAL影像简单处理操作
suntongxue100的博客
09-07 1411
一. 读取、显示并保存 1. 获取基础信息 from osgeo import gdal import numpy as np dataset = gdal.Open("G:\mypython3\gdal\data\can_tmr.img") cols = dataset.RasterXSize rows = dataset.RasterYSize bands = dataset.RasterCount 2. 获取波段信息并组合 band = dataset.GetRasterBand(3) r =
Windows下GDAL环境部署
suntongxue100的博客
09-07 1273
一. Python离线包下载 下载地址：https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 按照字母表顺序找到自己的版本对应gdal的whl文件，如果安装32的Python，就下载32位的gdal包，如果安装的64位的python，就下载64位的gdal包。同样，例如这里下载的GDAL-3.0.1-cp36-cp36m-win64.whl（cp36代表的是3.6.0版本，win64代表适用64位的Python） 二. Virtualenv 安装使用 1. Vi
cesium加载3dtiles地形数据
06-03
要在Cesium中加载3DTiles地形数据，您需要使用Cesium的3DTilesLoader。以下是一些基本的步骤： 1. 导入Cesium和3DTilesLoader： ```javascript import Cesium from 'cesium/Cesium'; import { Cesium3DTileset } from 'cesium/3DTileset'; ``` 2. 创建Cesium Viewer： ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); ``` 3. 创建一个Cesium3DTileset对象并指定3DTiles数据的URL： ```javascript const tileset = new Cesium3DTileset({ url: 'path/to/3DTiles/data', }); ``` 4. 将Cesium3DTileset对象添加到Viewer中： ```javascript viewer.scene.primitives.add(tileset); ``` 5. 等待3DTiles数据加载完成： ```javascript tileset.readyPromise.then(function (tileset) { // 3DTiles数据加载完成 }); ``` 6. 如果需要，可以对3DTiles数据进行一些配置，例如调整可见性、设置颜色、设置高度偏移等： ```javascript tileset.show = true; // 设置可见性 tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE; // 设置颜色模式 tileset.colorBlendAmount = 0.5; // 设置颜色混合程度 tileset.heightOffset = 10; // 设置高度偏移 ``` 这些是基本的步骤，您可以根据自己的需要进行调整和修改。希望这可以帮助您开始加载3DTiles地形数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孙同学的一个笔记本

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值