当前位置：网站首页>SuperMap iClient3D for WebGL 加载TMS瓦片
SuperMap iClient3D for WebGL 加载TMS瓦片
2022-06-30 11:59:00 【supermapsupport】
作者：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>
边栏推荐
- Object mapping - mapping Mapster
- STM32 移植 RT-Thread 标准版的 FinSH 组件
- 695.最大岛屿面积
- Go 语言入门很简单：Go 处理 XML 文件
- R语言ggplot2可视化分面图（facet）：gganimate包基于transition_time函数创建动态散点图动画(gif)、使用labs函数为动画图添加动态时间标题
- R language ggplot2 visualization: use ggplot2 visualization scatter diagram and the color parameter in AES function to specify that data points in different groups are displayed in different colors
- R language ggplot2 visualization: use ggplot2 visualization scatter diagram and the size parameter in AES function to specify the size of data points (point size)
- 解决服务器重装无法通过ssh连接的问题
- R语言ggplot2可视化：使用ggplot2可视化散点图、使用scale_size函数配置数据点的大小的（size）度量调整的范围
- iServer发布ES服务查询设置最大返回数量
猜你喜欢
随机推荐
海思3559开发常识储备：相关名词全解
NoSQL——Redis的配置与优化
Flutter 从零开始 005 图片及Icon
Swagger2自动生成APi文档
ModelAtrs声音检测，基于声学特征的异响检测
After the node is installed in the NVM, the display is not internal or external when the NPM instruction is used
Use of polarplot function in MATLAB
go-zero微服务实战系列（八、如何处理每秒上万次的下单请求）
品达通用权限系统(Day 7~Day 8)
8253计数器介绍
3D视觉检测在生产流水的应用有哪些
R语言ggplot2可视化：使用ggplot2可视化散点图、使用scale_color_viridis_d函数指定数据点的配色方案
1254. 统计封闭岛屿的数目
Embedded sig | multi OS hybrid deployment framework
1020. number of enclaves
List集合
海思3559万能平台搭建：获取数据帧修改后编码
Yolov5 export the pit encountered by onnx
Go 语言入门很简单：Go 处理 XML 文件
并行接口8255A