Cesium入门（三）：加载WMS地图服务

本章介绍Cesium Viewer控件的是如何加载地图的，并以GeoServer服务器为例演示了WMS服务的加载过程。

主要包括以下内容：

• ImageryProvider
• 加载GeoServer发布的WMS服务

在Cesium入门（二）：Viewer控件参数与外观定制中，通过设置Viewer的构造参数，去除了一些小组件和功能按钮，在浏览器中显示出了一个非常简洁的可交互界面。尽管界面上没有显示baseLayerPicker组件，但是地球上面还是贴上了默认的Bing地图，这一切都是怎么实现的呢？如果想要换上其他的地图或者加载显示自己的地图时又该怎么办呢？

事实上，Cesium Viewer除了提供基本的图层拾取器来选取不同的地图服务之外，可以在构造Viewer对象时通过ImageryProvider来任意选用公开的地图服务，还可以通过操作imageryLayers图层集合加载自定义的地图。

1. ImageryProvider

在众多的Viewer构造参数中，有一个imageryProvider参数用来设置地球上面将要覆盖的图层：

根据参数定义，baseLayerPicker默认值为true，此时Viewer会显示基本图层指示器，创建默认的图层集合imageryLayers，并选择其中的第一个图层来覆盖地球表面。

当baseLayerPicker为假时，Viewer不创建基本的图层指示器，然后清空图层集合imageryLayers，并将imageryProvider所指的图层对象加入imageryLayers图层集合，当页面需要渲染时，Viewer会使用这个图层作为地球表面的覆盖图层。

此时，若imageryProvider为false，则会显示一个没有任何覆盖物的蓝色地球。

若imageryProvider为空或者缺失未定义，Viewer就会调用createWorldImagery()函数来自动创建一个Bing地图来覆盖地球，这也是为什么在Cesium入门（二）：Viewer控件参数与外观定制中没有定义imageryProvider但是还是出现了Bing地图的原因。

2. 加载GeoServer发布的WMS服务

从上节可以知道，在Viewer构造参数中设置imageryProvider对象，就可以去掉默认的背景地图，换上自已定义的地图服务商了。WebMapServiceImageryProvider正好可以完成对一个Web Map Service (WMS)服务的封装工作，其主要的初始化选项如下：

以GeoServer为例，在“图层预览”页面以Openlayer方式预览选中的图层，然后在浏览器“Web开发人员工具”中查看WMS服务的访问地址，如：

http://localhost:8080/map/wms?service=WMS&version=1.1.0&request=GetMap&layers=xian:satellite16&bbox=1.1981657057757802E7,3988178.3878073078,1.2226255548270363E7,4130045.512304593&width=768&height=445&srs=EPSG:3857&styles=&format=application/openlayers

从这个地址中提取url、layers、service、format等参数，构造一个ImageryProvider就可以在地球上看到自己的地图了。

主要代码如下：

<div id="cesiumContainer"></div>
<script>
    var 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 : new Cesium.WebMapServiceImageryProvider({
            url : 'http://localhost:8080/geoserver/wms',
            layers : 'xian:satellite16', 
            parameters: {
                service : 'WMS',
                format: 'image/png',
                transparent: true,
              }  
        }),
    });

    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(106.23, 38.65, 100000)
    });
</script>

在这段代码的最后，添加了一段控制摄像机飞行的代码，里面的三个参数分别为指定地点的经纬度和摄像机的高度。把经纬度设置为所加图层的中心点，然后刷新界面，就可以看到摄像机自动飞行到了指定的地点，简直是太酷了，快点试试吧！