本章介绍Cesium Viewer控件的imageryLayers容器,了解添加和叠加显示多个图层的方法。
主要包括以下内容:
- imageLayers图层容器
- 添加多个图层
1. imageryLayers图层容器
imageLayers是一个ImageryLayerCollection类型的对象,作为场景Scence类中的一个重要成员,通过添加(add)或者移除(remove)操作,可以动态调整场景中的所有图层,从而使Cesium Viewer可以根据需要来选取一个或多个不同地球覆盖图层。为了便于操作,Cesium Viewer也提供了一个imageLayers只读成员,其内部直接转向了Scence的imageLayers成员。
2. 添加多个图层
在Cesium入门(三):加载WMS地图服务节中,我们使用imageProvider加载了自定义的WMS地图服务,但是在地图可见区域之外的地球却没有什么覆盖物,这就是因为imageLayers中只有一个自定义的地图,缺少一个覆盖全球的图层。如果我们不直接赋值给imageProvider,而是将imageProvider设置为null或者不设置此参数,让Cesium去自动调用createWorldImagery()函数来加载一个全球的“底图”,然后再将自定义的图层通过addImageProvider()函数加入到图层容器中,此时的Viewer场景中将会保留这两个图层,从而让地球显示更加真实。
主要代码如下:
<script>
let viewer = new Cesium.Viewer("cesiumContainer", {
//sceneMode : Cesium.SceneMode.SCENE2D,
animation : false,
baseLayerPicker : false,
fullscreenButton : false,
vrButton : false,
geocoder : false,
homeButton : false,
infoBox : false,
sceneModePicker : false,
selectionIndicator : false,
timeline : false,
navigationHelpButton : false,
skyBox : false,
imageryProvider : null,
});
let wmsProvider = new Cesium.WebMapServiceImageryProvider({
url : 'http://localhost:8080/geoserver/wms',
layers : 'xian:satellite16',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
}
})
viewer.imageryLayers.addImageryProvider(wmsProvider);
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(108.73, 34.22, 100000),
});
</script>
在上述代码中,imageryProvider行也可以直接删除,但是如果将imageryProvider设置为false就会又看到Cesium入门(三):加载WMS地图服务中的那个蓝色的地球了。同时,还可以看到,由于在初始化Viewer时就设置了默认的图层,所以整个地球都被默认的Bing地图所覆盖,自定义的WMS图层在默认图层之上显示。由于这两个图层来自于不同的提供商,所以在某些地方还是能看到明显的细节和颜色上的差异。如果这个自定义图层是使用Bing地图制作,并逐层缓冲瓦片的话,就会几乎看不见这样的差异。
通过imageLayers可以同时加载多个图层,特别是在无法连接互联网的地方,所有的公共地图服务都会无法访问,此时可以通过设置自己的离线地图服务器来提供最基本的地图服务。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)