SuperMap iclient3d for webgl loading TMS tiles

  author ：taco

         The tile format is tens of millions , In the process of using, we found that iserver There is no release in tms Tile method , So if we have a share in our hands tms The tiles on the wall , How to use it ？ And how it should be loaded ？ This article is about tms How tiles are loaded .

One 、TMS What is a tile ？

        TMS Its full name is Tile Map Service , By the open source spatial information foundation （Open Source Geospatial Foundation） A defined tile service . Cut the world map in the way of quadtree , The cut tiles are pyramid shaped from top to bottom . Corresponding level and quantity relationship , from 0 The layer corresponds to a tile File down ,1 Layer correspondence 4 individual titles,2 Layer correspondence 16 individual tiles The file is headed down with this 2 Of 2n Power tiles. The number and level can be through This link To make an inquiry . For more information, please refer to Wikipedia .

Two 、 How to get TMS Format tiles ？

        obtain TMS There are many ways to make tiles , You can act according to TMS standard , According to the pyramid level to process the image into the format we need . However, it takes a lot of effort to write a set of telephone bills , If you don't have any video resources , It can't be cut . We simply use other methods to get —— Direct download , Nowadays, there are many basic software that can be downloaded . Like water being injected ,bigemap, Tai Le et al , Can be directly downloaded to the map image , Although I didn't do it “ members ” Can only be downloaded to the first few levels . These products are not introduced here , Use it directly bigemap gis office Show me .

        open bigemap Software , Draw a rectangle box to select the location you want to download , Set the result path , And set the storage option to tile ：TMS, Then select the level you want to download .

         The downloaded tile format is shown in the figure above . But if you directly use the above tiles to configure , You can't get specific tiles at the front end , Will be submitted to the 404. Because a configuration file is missing , stay tms The map service needs to pass tilemapservice.xml To define tiles . Here we need to build a new one xml To configure （ notes ： If it is downloaded from Tai Le map tms Tile words , There will be a folder inside tile.xml file , This file is tilemapservice.xml It can be used directly .） Others need to be configured manually . Please refer to the following for specific configuration xml Content configuration in .

    <?xml version="1.0" encoding="utf-8"?>
     <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
     <Title> unnamed </Title>
     <Abstract></Abstract>
     <SRS>EPSG:4326</SRS>
     <BoundingBox miny="-90.00000000000000" minx="-180.00000000000000" maxy="90.00000000000000" maxx="180.00000000000000"/>
     <Origin y="-90.00000000000000" x="-180.00000000000000"/>
     <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
     <TileSets profile="geodetic">
     <TileSet href="0" units-per-pixel="0.70312500000000" order="0"/>
     <TileSet href="1" units-per-pixel="0.35156250000000" order="1"/>
     <TileSet href="2" units-per-pixel="0.17578125000000" order="2"/>
     <TileSet href="3" units-per-pixel="0.08789062500000" order="3"/>
     <TileSet href="4" units-per-pixel="0.0439453125" order="4"/>
     <TileSet href="5" units-per-pixel="0.02197265625" order="5"/>
     <TileSet href="6" units-per-pixel="0.010986328125" order="6"/>
     <TileSet href="7" units-per-pixel="0.0054931640625" order="7"/>
     <TileSet href="8" units-per-pixel="0.00274658203125" order="8"/>
     <TileSet href="9" units-per-pixel="0.001373291015625" order="9"/>
     <TileSet href="10" units-per-pixel="0.0006866455078125" order="10"/>
     <TileSet href="11" units-per-pixel="3.4332275390625e-4" order="11"/>
     <TileSet href="12" units-per-pixel="1.71661376953125e-4" order="12"/>
     <TileSet href="13" units-per-pixel="8.58306884765625e-5" order="13"/>
     <TileSet href="14" units-per-pixel="4.291534423828125e-5" order="14"/>
     <TileSet href="15" units-per-pixel="2.145767211914063e-5" order="15"/>
     <TileSet href="16" units-per-pixel="1.072883605957031e-5" order="16"/>
     <TileSet href="17" units-per-pixel="5.364418029785156e-6" order="17"/>
     </TileSets>
     </TileMap>

3、 ... and 、 How to load and use TMS tiles

        because iserver in , There is no separate format for publishing this tile . Most of the methods found on the Internet are deployed in tomcat Call directly . So we are following this pattern iserver You can use . Take us tms Tiles and xml Put the file in isever Of webapps Under the table of contents .

         stay bin Use... In the directory iserver.bat start-up iserver. When iserver After startup , We go directly to the front end http://localhost:8092/TMS To call this service .

        The interface used is createTileMapServiceImageryProvider, This method creates a UrlTemplateImageryProvider example , Use this example to translate our tms Tile the tiles to the top .

Name	Type	Default	Description
url	Resource  | String	'.'	Optional The path of the image block on the server .
fileExtension	String	'png'	Optional The file extension of the image on the server .
credit	Credit  | String	''	Optional The credit of the data source , Show on canvas .
minimumLevel	Number	0	Optional Minimum level of detail supported by the image provider . Be careful when specifying                  This means that the number of tiles at the lowest level is very small , For example, four or less . Maybe more                  Causes rendering problems .
maximumLevel	Number		Optional Maximum level of detail supported by the image provider , If there is no limit , Is undefined .
rectangle	Rectangle	Rectangle.MAX_VALUE	Optional The rectangle covered by the image （ In radians ）.
tilingScheme	TilingScheme		Optional The tiling scheme specifies that the oval surface is broken into tiles . If this parameter is not provided , be   WebMercatorTilingScheme   Use .
ellipsoid	Ellipsoid		Optional ellipsoid . If you specify tilingScheme,                    Ignore this parameter , Instead, use the ellipsoid of the slicing scheme . If neither                     Parameters , Then use WGS84 ellipsoid .
tileWidth	Number	256	Optional The pixel width of the image block .
tileHeight	Number	256	Optional The pixel height of the image block .
flipXY	Boolean		Optional The older gdal2tiles.py Version in tilemapresource.xml It's flipped X and Y value . Specifying this option will do the same , This allows these incorrect block sets to be loaded .

var tms = new Cesium.TileMapServiceImageryProvider({
   url : '../images/cesium_maptiler/Cesium_Logo_Color',
   fileExtension: 'png',
   maximumLevel: 4,
   rectangle: new Cesium.Rectangle(
       Cesium.Math.toRadians(-120.0),
       Cesium.Math.toRadians(20.0),
       Cesium.Math.toRadians(-60.0),
       Cesium.Math.toRadians(40.0))
});

The above is the loading method provided in the official document , And the parameter setting that can be adjusted independently . And we are webgl You can directly use this service interface in , The complete code is as follows

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title> Terrain image </title>
		<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<link href="./css/pretty.css" rel="stylesheet">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/spectrum.js"></script>
		<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>
		<script src="./js/config.js"></script>
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<div id='loadingbar' class="spinner">
			<div class="spinner-container container1">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container2">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
			<div class="spinner-container container3">
				<div class="circle1"></div>
				<div class="circle2"></div>
				<div class="circle3"></div>
				<div class="circle4"></div>
			</div>
		</div>
		<div id="toolbar" class="param-container tool-bar">
			<div class="param-item">
				<label> The terrain is obvious and hidden :</label>
				<label for="terrainVisible"> Terrain display </label>
				<input type="radio" name="isTerrainVisible" value="terrainVisible" id="terrainVisible" checked>
				<label for="terrainUnvisible"> Terrain hiding </label>
				<input type="radio" name="isTerrainVisible" value="terrainUnvisible" id="terrainUnvisible">
			</div>
			<div class="param-item">
				<label> The color is transparent </label>
				<input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
			</div>
			<div class="param-item">
				<label> Color transparency tolerance </label>
				<input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'"
					id="tolerance" style="display: block;width:200px;margin: 5px 0">
			</div>
		</div>

		<script>
			function onload(Cesium) {
				var viewer = new Cesium.Viewer('cesiumContainer');
				 var url = 'http://localhost:8092/TMS'; 


				var layer = viewer.imageryLayers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
					url: url,
				}));
				var viewModel = {
					color: '#ffffff',
					tolerance: 0
				};
				$("#colorPicker").spectrum({
					color: "rgba(255,0,0,1)",
					showPalette: true,
					showAlpha: true,
					localStorageKey: "spectrum.demo",
					palette: palette
				});
				$("#colorPicker").on('change', function(event) {
					var selectedColor = Cesium.Color.fromCssColorString(event.target.value);
					layer.transparentBackColor = selectedColor;
				});
				Cesium.knockout.track(viewModel);
				var toolbar = document.getElementById('toolbar');
				Cesium.knockout.applyBindings(viewModel, toolbar);
				Cesium.knockout.getObservable(viewModel, 'tolerance').subscribe(
					function(newValue) {
						layer.transparentBackColorTolerance = newValue;
					}
				);
				$("#terrainVisible").click(function() {
					viewer.terrainProvider.visible = true;
				});
				$("#terrainUnvisible").click(function() {
					viewer.terrainProvider.visible = false;
				});
				$('#loadingbar').remove();
				$('#toolbar').show();
			}
			if (typeof Cesium !== 'undefined') {
				window.startupCalled = true;
				onload(Cesium);
			}
		</script>
	</body>
</html>

So we will tms Tiles in webgl Used in . The effect is as follows

---

matters needing attention

If cross domain occurs during loading , There are usually two ways to solve .

1. At the Google browser icon , Right click to open its properties , In the file name （ The goal is （T） Add later --disable-web-security --user-data-dir=C:\MyChromeDevUserData,--user-data-dir）. And in C Create a new disk root directory MyChromeDevUserData Folder is ok .

2. To configure tomcat Configuration file in

stay tomcat Of lib Lower to two jar package ,cors-filter-2.5.jar and java-property-utils-1.9.1. You can search and download directly in Baidu . And in conf Found under folder web.xml. stay xml Add the following code to the .

<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>