本章介绍Cesium JS库的TilingScheme类,并以GeoServer服务器为例演示了加载EPSG:4326网络的瓦片地图。
主要包括以下内容:
- TilingScheme
- 添加EPSG:4326瓦片图层
在Cesium入门(五):加载WMTS瓦片地图服务中,通过创建一个WebMapTileServiceImageryProvider类,在设置了必要的参数后就可以访问GeoServer发布的地图瓦片服务了。但是细心的读者可能已经发现,使用上述代码只能访问使用EPSG:900913(标准名为EPSG:3875)网格切分的瓦片。当将tileMatrixSetID设置为 'EPSG:4326',想要对于另外一个常用的EPSG:4326网络的瓦片进行访问时,浏览器会报一个瓦片“列(或行)超出范围”的错误,不能正确加载显示瓦片图像。究其原因是因为,WebMapTileServiceImageryProvider的切片方案tilingScheme默认使用EPSG:3875投影,即伪墨卡托网格访问切片,与EPSG:4326网格的切片方案存在较大差异,故而无法正确访问。那么什么又是tilingScheme切片方案呢?
1. TilingScheme
Tiling是一种椭球体表面上的几何图形或图像的平铺方案。在详细级别为0,即最粗、最不详细的级别上,瓦片的数量是可配置的。在详细级别为1级以上,每个是一级级瓦片经纬两个方向上扩展为两个瓦片,共有四个子瓦片。如此扩展到最大的缩放级别,这也构成了一个图像瓦片的金字塔。TillingScheme有一个参数ellipsoid用来决定切处时使用的椭球,另外两个比较重要的参数numberOfLevelZeroTilesX和numberOfLevelZeroTilesY,用来决定0级瓦片的数量。
Name | Type | Description |
ellipsoid | Ellipsoid | 被切片的椭球对象,默认为WGS84椭球 |
numberOfLevelZeroTilesX | Number | X方向上0级瓦片的数量,默认为1 |
numberOfLevelZeroTilesY | Number | Y方向上0级瓦片的数量,默认为1 |
TilingSchemee有两个子类,为WebMercatorTilingScheme和GeographicTilingScheme。其中WebMercatorTilingScheme对应于EPSG:3857切片方案,常见于谷歌地图、微软必应地图以及大多数的ArcGIS在线地图,也是Cesium中默认的切片方案。
GeographicTilingScheme对应于EPSG:4326切片方案,是一个简单的地理投影方案,可直接将经纬度映射为X和Y,这种投影通常被称为地理投影、等矩形投影、等距圆柱形投影等。
由于在X方向上,WebMercatorTilingScheme只有一个0级瓦片,而GeographicTilingScheme却有2个,这就导致了默认的EPSG:3857切片方案不能正确加载EPSG:4326切片方案的瓦片图像。
2. 添加EPSG:4326瓦片图层
明白了两种切片方案之间的不同之后,当想要加载EPSG:4326瓦片服务时,只需要创建一个GeographicTilingScheme对象即可。
<script>
let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url : '/map/gwc/service/wmts/rest/xian:satellite/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
style : 'raster',
tileMatrixSetID : 'EPSG:4326',
tilingScheme: new Cesium.GeographicTilingScheme(),
});
var viewer = new Cesium.Viewer("cesiumContainer", {
//sceneMode : Cesium.SceneMode.SCENE2D,
imageryProvider: false,
animation : false,
baseLayerPicker : false,
fullscreenButton : false,
vrButton : false,
geocoder : false,
homeButton : false,
infoBox : false,
sceneModePicker : false,
selectionIndicator : false,
timeline : false,
navigationHelpButton : false,
navigationInstructionsInitiallyVisible : false,
skyBox : false,
skyAtmosphere : false,
});
viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(108.73, 34.22, 300000),
});
</script>
通过“Web开发者工具”可以查看到确实请求到了WMTS瓦片图像。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)