当前位置：网站首页>Cesium:CesiumLab制作影像切片与切片加载

Cesium:CesiumLab制作影像切片与切片加载

2022-06-13 04:36:00 【似曾不相识】

主要思路：利用Cesium可以基于tiff影像数据与坐标参考信息制作影像切片，并利用Cesium提供的UrlTemplateImageryProvider 接口加载到三维场景中。

TIF影像数据准备

    CesiumLab支持以下格式的影像数据，以下以TIF格式的影像为例进行操作。
在这里插入图片描述
    TIF影像数据预览图如下所示（有需要的也可以在文末留言，可帮忙下载），16级的影像，分辨率为4m，坐标系为WGS84经纬度投影坐标系，格式即为*.tif格式。下载时背景可选择透明色，否则下载之后还需要用对白色背景进行处理。
在这里插入图片描述
    影像数据下载目录如下，

CesiumLab制作影像瓦片

参数设置

    利用CesiumLab制作影像瓦片，需要提供影像数据+坐标参考文件（prj格式的文件即可，下载的文件夹中已经包含了）。
    启动CesiumLab服务后，选择影像切片，并选择影像数据，设置坐标参考信息，然后选择输出类型为散列文件，并设置输出文件夹路径即可。
    同时，在执行切片之前，可以通过设置透明色的rgb值，来规避tif影像数据的自带白边/黑边问题（前提是清楚知道无数据区域的rgb像素值，我这里是处理白边，通过PS吸管工具获取白边部分的rgb值为255,255,255），这样就不用通过PS或者其他软件额外处理了。

在这里插入图片描述

影像切片

    制作完成后的影像切片文件夹如下所示，layer.json和meta.json文件记录了影像切片的文件夹结构信息，具体细节无需关心。
在这里插入图片描述
    以下为切片数据，放到桌面可以明确看到，原始数据的白边问题已经被CesiumLab软件处理好了，背景色为透明色。

    对比一下未处理好的，背景色仍旧存在。

发布影像切片

影像切片数据的发布，其实就是静态资源数据的发布，可以通过Tomcat、Nginx、IIS等服务器实现数据的发布。以下以Tomcat服务器发布为例，
将切好的影像切片文件夹，整个拷贝至Tomcat的webapps目录下，或者是通过conf下的server.xml文件配置的方式实现服务发布。此处直接将其拷贝到Tomcat同级别目录下，基于conf/catalina/localhost目录下单独创建配置文件的方式进行发布。配置文件信息如下，
在这里插入图片描述

<Context docBase="F:\Java-dependencies\apache-tomcat-9.0.43\zaozhuang" 
path="/zaozhuang" reloadable="true"/>

在这里插入图片描述

加载影像切片

加载影像切片，通过Cesium提供的UrlTemplateImageryProvider 接口，可将影像切片加载到三维场景中，示例代码和加载效果如下，附上未处理白边和已处理白边的对比效果，
此外，示例代码中rectangle参数对应的四至参数信息，可以从txt文件中直接获取，
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-Billboard压缩模糊问题</title>
  <!--引入cesium开发资源-->
  <script src="../../Build/Cesium/Cesium.js"></script>
  <!--引入cesium样式资源-->
  <style> @import url("../../Build/Cesium/Widgets/widgets.css"); html,body, #viewerContainer{
       width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style>
</head>
<body>
  <div id="viewerContainer"></div>
</body>
<script src="./utils/initCesiumViewer.js"></script>
<script> function loadGeoJson(_viewer){
       //加载geojson const promise = Cesium.GeoJsonDataSource.load("./data/zaozhuang.json", {
      }); promise.then(function (dataSource) {
       _viewer.dataSources.add(dataSource); _viewer.zoomTo(dataSource); let entities = dataSource.entities.values; entities.some(function (value, index, arrat) {
       value.polygon.fill = false; value.polygon.outline = true; value.polygon.outlineColor = Cesium.Color.SKYBLUE; }) }) } function loadCesiumLabImageTiles(_viewer){
       let labImageTiles = new Cesium.UrlTemplateImageryProvider({
       url: 'http://localhost:8010/zaozhuang/zz_tiles/{z}/{x}/{y}.png', rectangle:Cesium.Rectangle.fromDegrees( 116.805696177188 , 34.462626856461, 117.826845335666, 35.320719164506), }) //添加CesiumLab切分的瓦片 _viewer.imageryLayers.addImageryProvider(labImageTiles) } function loadCesiumLabTransImageTiles(_viewer){
       let labImageTiles = new Cesium.UrlTemplateImageryProvider({
       url: 'http://localhost:8010/zaozhuang/zzt_tiles/{z}/{x}/{y}.png', rectangle:Cesium.Rectangle.fromDegrees( 116.805696177188 , 34.462626856461, 117.826845335666, 35.320719164506), }) //添加CesiumLab切分的瓦片 _viewer.imageryLayers.addImageryProvider(labImageTiles) } //初始化三维场景 const viewer = initCesiumViewer("viewerContainer",{
       _hideGlobe:true, _defineBgImage:false, }); viewer.imageryLayers.removeAll(true); //加载geojson边界数据 loadGeoJson(viewer); //加载CesiumLab制作的影像切片 // loadCesiumLabImageTiles(viewer);//未处理白边的影像切片 loadCesiumLabTransImageTiles(viewer);//已处理白边的影像切片 </script>
</html>