SuperMap iClient3D for WebGL 加载TMS瓦片

最新推荐文章于 2024-04-25 16:43:58 发布

supermapsupport

最新推荐文章于 2024-04-25 16:43:58 发布

阅读量691

点赞数

分类专栏：三维GIS 文章标签：前端 javascript

原文链接：https://blog.csdn.net/weixin_42532695/article/details/125358901?spm=1001.2014.3001.5502

版权

三维GIS 专栏收录该内容

417 篇文章 227 订阅

订阅专栏

作者：taco

瓦片格式千千万，在使用的过程中我们发现iserver中并没有发布tms瓦片的方法，那么我们手里如果拥有了一份tms的瓦片，应该如何去使用呢？以及他应该怎么去加载呢？本片文章来介绍一下关于tms瓦片加载的方式。

一、TMS瓦片是什么？

TMS全称为Tile Map Service ，是由开源空间信息基金会（Open Source Geospatial Foundation）定义的一种瓦片服务。将世界地图按照四叉树的方式进行切割，切割后的瓦片从上到下呈现为金字塔型。对应层级及数量关系，由0层对应一个tile文件向下，1层对应4个titles，2层对应16个tiles文件以此向下为2的2n次方 tiles。编号和层级可以通过这个链接去进行查询。关于更多的介绍可以参考维基百科。

二、如何拿到TMS格式的瓦片？

获取TMS瓦片的方法有多种，可以自行根据TMS标准，按照金字塔层级去将影像处理成我们需要的格式。不过自己再去写一套的话费时费力，如果本身自己就没有影像资源的话，也是切不了的。索性我们直接使用其他方式去获取——直接下载，现如今有很多基础软件是提供下载方式的。像水经注，bigemap，太乐等，都是可以直接下载到地图影像的，虽然没办“会员”的话只能下载到前几级。这里对这些产品不过多介绍，直接使用bigemap gis office 演示一下下。

打开bigemap软件，绘制矩形框框选中所需要下载的位置，设置结果路径，并设置存储选项为瓦片：TMS，然后选择自己需要的层级就可以执行下载了。

下载后的瓦片格式如上图。但是如果直接使用上面的瓦片去配置的话，前端是拿不到具体瓦片的，会报404。因为少了一个配置文件，在tms地图服务中需要通过tilemapservice.xml去对瓦片进行定义。在这里我们需要去新建一个xml去进行配置（注：如果使用的是太乐地图下载的tms瓦片的话，文件夹内部会自带一个tile.xml文件，这个文件就是tilemapservice.xml可以直接使用的。）其他的话需要手动配置。具体配置可以参考下面xml中内容配置。

    <?xml version="1.0" encoding="utf-8"?>
     <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
     <Title>未命名</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>

三、如何加载使用TMS瓦片

由于iserver中，没有单独去发布这个瓦片的格式。在网上查到的方法也大多都是部署在tomcat中直接调用。所以我们就仿照这个方式也在iserver中直接使用。将我们的tms瓦片及xml文件放至在isever的webapps目录下。

在bin目录下使用iserver.bat启动iserver。当iserver启动完成后，我们直接前端通过http://localhost:8092/TMS去调用这个服务。

使用的接口为createTileMapServiceImageryProvider，该方法创建了一个UrlTemplateImageryProvider实例，用这个实例去将我们的tms瓦片平铺到上面去。

Name	Type	Default	Description
`url`	Resource \| String	`'.'`	可选服务器上图像图块的路径。
`fileExtension`	String	`'png'`	可选服务器上图像的文件扩展名。
`credit`	Credit \| String	`''`	可选数据源的信用，显示在画布上。
`minimumLevel`	Number	`0`	可选图像提供者支持的最低详细程度。指定时要小心这表示最低级别的图块数量很小，例如四个或更少。可能数量更大导致渲染问题。
`maximumLevel`	Number		可选图像提供程序支持的最大详细程度，如果没有限制，则为未定义。
`rectangle`	Rectangle	`Rectangle.MAX_VALUE`	可选图像所覆盖的矩形（以弧度表示）。
`tilingScheme`	TilingScheme		可选平铺方案指定椭圆形表面碎成瓷砖。如果未提供此参数，则 WebMercatorTilingScheme 使用。
`ellipsoid`	Ellipsoid		可选椭球。如果指定了tilingScheme，忽略此参数，而是使用切片方案的椭球。如果两者都不参数，则使用WGS84椭球。
`tileWidth`	Number	`256`	可选图像图块的像素宽度。
`tileHeight`	Number	`256`	可选图像图块的像素高度。
`flipXY`	Boolean		可选较旧的gdal2tiles.py版本在tilemapresource.xml中翻转了X和Y值。指定此选项将执行相同的操作，从而允许加载这些不正确的图块集。

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))
});

以上是官方文档中提供加载的方式，以及可自主调控的参数设置。而我们在webgl中直接掉用这个服务接口即可，完整代码如下

<!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>地形影像</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>地形显隐:</label>
				<label for="terrainVisible">地形显示</label>
				<input type="radio" name="isTerrainVisible" value="terrainVisible" id="terrainVisible" checked>
				<label for="terrainUnvisible">地形隐藏</label>
				<input type="radio" name="isTerrainVisible" value="terrainUnvisible" id="terrainUnvisible">
			</div>
			<div class="param-item">
				<label>颜色透明</label>
				<input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
			</div>
			<div class="param-item">
				<label>颜色透明容限</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>

这样我们就将tms瓦片在webgl中使用了呢。效果如下图

注意事项

如果加载出现跨域等情况，通常有两种方法解决。

1.在谷歌浏览器图标处，右键打开其属性，在文件名称（目标（T）后面添加 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，--user-data-dir）。并且在C盘根目录新建MyChromeDevUserData文件夹即可。

2.配置tomcat中的配置文件

在tomcat的lib下放至两个jar包，cors-filter-2.5.jar和java-property-utils-1.9.1。可以直接百度中搜索下载。并在conf文件夹下找到web.xml。在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>

supermapsupport

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SuperMap iClient3D for WebGL 加载TMS瓦片

瓦片格式千千万，在使用的过程中我们发现iserver中并没有发布tms瓦片的方法，那么我们手里如果拥有了一份tms的瓦片，应该如何去使用呢？以及他应该怎么去加载呢？本片文章来介绍一下关于tms瓦片加载的方式。...
复制链接

扫一扫