当前位置：网站首页>Cesium:cesiumlab makes image slices and loads slices

Cesium:cesiumlab makes image slices and loads slices

2022-06-13 04:40:00 【I don't seem to know you】

Main idea ： utilize Cesium Can be based on tiff Image data and coordinate reference information to make image slices , And make use of Cesium Provided UrlTemplateImageryProvider Interface loaded into 3D scene .

TIF Image data preparation

    CesiumLab The following formats of image data are supported , The following TIF Format image as an example .
Insert picture description here
    TIF The image data preview is shown below （ If necessary, you can leave a message at the end of the text , Can help download ）,16 Level image , A resolution of 4m, The coordinate system is WGS84 Longitude and latitude projection coordinate system , The format is *.tif Format . The background can be selected as transparent color when downloading , Otherwise, you need to process the white background after downloading .
Insert picture description here
     The image data download directory is as follows ,

CesiumLab Making image tiles

Parameter setting

     utilize CesiumLab Making image tiles , Need to provide image data + Coordinate reference file （prj File format is enough , The downloaded folder already contains ）.
     start-up CesiumLab After service , Select image slice , And select image data , Set coordinate reference information , Then select the output type as hash file , And set the output folder path .
     meanwhile , Before slicing , You can set the transparent color rgb value , To avoid tif The image data has its own white edge / The black edge problem （ The premise is to clearly know that there is no data area rgb Pixel values , I deal with white edges here , adopt PS Pipette tool to get the white edge part rgb The value is 255,255,255）, So you don't have to go through PS Or other software has handled it additionally .

Insert picture description here

Image slice

     The image slicing folder after production is as follows ,layer.json and meta.json The file records the folder structure information of image slices , There is no need to care about the details .
Insert picture description here
     The following is slice data , You can see clearly on the desktop , The white edge problem of raw data has been CesiumLab The software has handled it , The background color is transparent .

     Compare the untreated , The background color still exists .
Insert picture description here

Publish image slices

Release of image slice data , In fact, it is the release of static resource data , Can pass Tomcat、Nginx、IIS And so on . The following Tomcat Server publishing as an example ,
Slice the cut image into a folder , Entire copy to Tomcat Of webapps Under the table of contents , Or through conf Under the server.xml Realize service publishing by file configuration . Copy it here directly to Tomcat Under the same level directory , be based on conf/catalina/localhost The configuration file is created separately under the directory . The profile information is as follows ,
Insert picture description here

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

Insert picture description here

Load image slice

Load image slice , adopt Cesium Provided UrlTemplateImageryProvider Interface , You can load image slices into a 3D scene , The sample code and loading effect are as follows , Attach the contrast effect of untreated white edge and treated white edge ,
Besides , In the sample code rectangle Four to parameter information corresponding to the parameter , It can be downloaded from txt Directly from the file ,
Insert picture description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-Billboard Compression fuzzy problem </title>
  <!-- introduce cesium Development resources -->
  <script src="../../Build/Cesium/Cesium.js"></script>
  <!-- introduce cesium Style resources -->
  <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){
       // load 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), }) // add to CesiumLab Sliced tiles  _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), }) // add to CesiumLab Sliced tiles  _viewer.imageryLayers.addImageryProvider(labImageTiles) } // Initialize 3D scene  const viewer = initCesiumViewer("viewerContainer",{
       _hideGlobe:true, _defineBgImage:false, }); viewer.imageryLayers.removeAll(true); // load geojson Boundary data  loadGeoJson(viewer); // load CesiumLab Made image slices  // loadCesiumLabImageTiles(viewer);// Image slices with unprocessed white edges  loadCesiumLabTransImageTiles(viewer);// Processed image slices with white edges  </script>
</html>