Cesium調用Geoserver發佈的 WMS、WFS服務

1 GeoServer服務發佈

1.1 WMS服務

下載GeoServer安裝版安裝，同時安裝geopackage擴展，以備使用。使用XX地圖下載器下載地圖，導出成GeoPackage地圖文件。

（1）下載 GeoPackage DEM數據

（2）打開GeoServer服務界面

（3）點擊左側工做區 ->添加新的工做區 ->輸入一個名字URL能夠隨意起，點擊提交（做者使用的名字是Cesium）

（4）點擊左側數據存儲->新建數據源，會發現兩個GeoPackage，此處根據下載的地圖類型選擇便可

（5）工做區選擇剛剛新建的工做區，數據源名稱能夠隨便起，鏈接參數點擊瀏覽選擇剛纔導出的GeoPackage文件

 

發佈成功後彈出以下窗口，點擊發布

 

點擊左側 -> Layer Perview 找的剛纔發佈的圖層，點擊 OpenLayers 

出現以下效果：

 

 

2 Cesium調用

2.1 WMS服務

打開Cesium工做區，添加以下代碼。

<script>  
        var viewer = new Cesium.Viewer('cesiumContainer');  
        var provider = new Cesium.WebMapServiceImageryProvider({  
                  url: 'http://localhost:8082/geoserver/cesium/wms',  
                  layers: 'cesium:taile',  
                  parameters: {  
                  <span style="white-space:pre"> </span>   service : 'WMS',  
                      format: 'image/png',  
                      transparent: true,  
                  }  
              });  
         viewer.imageryLayers.addImageryProvider(provider);  
      </script>

至此Cesium離線地圖服務完成

注意：最後訪問時使用谷歌瀏覽器跨域方式訪問，不然會出現WMS服務無響應的狀況。

 

2.2 WFS服務

需求: 爲了便於前端渲染數據,自定義圖層渲染。

思路：獲取地圖服務中的要素進行渲染。

工具：GeoServer2.6.4,cesium,

 

思路有了就開始找資料寫代碼,cesium有接口能夠加載WMS服務，可是加載的WMS服務獲取到的是切片,不可能將獲取到的要素進行渲染。因而想經過WFS服務來渲染數據，可是cesium沒有提供可用的接口，經過google,找到了一個比較靠譜的思路：geoserver的地圖服務支持不少格式，其中就能夠顯示GeoJson數據，而後經過AJAX獲取geoserver服務中的GeoJson數據，在經過cesium的GeoJsonDataSource進行數據的加載，而後渲染就好說了。

這裏假設geoserver的WFS服務已經發布好了。

 

獲取服務地址

在GeoServer的LayerPreview圖層列表中的目標圖層後面，再select on中選擇GeoJson。

這個時候頁面中會以GeoJson格式顯示該圖層的數據，而後地址欄中的連接就是咱們須要的地址，以下圖所示。

 

 

 

AJAX獲取GeoJson數據

 

var viewer = newCesium.Viewer('cesiumContainer');
   $.ajax({
           url:"http://localhost:8082/geoserver/mytest/ows?service=WFS&request=GetFeature&typeName=mytest:river4&outputFormat=application/json",
           cache: false,
           async: true,
           success: function(data) {
                 var datasource=Cesium.GeoJsonDataSource.load(data);
               viewer.dataSources.add(datasource);
           },
           error: function(data) {
                console.log("error");
           }
   });

 

這樣數據就被加載到cesium中了，而後使用 dataSource.entities.values，就能夠對圖層進行渲染了,代碼以下:

var entities = dataSource.entities.values;for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
    var polylineVolume = {
                    positions:entity.polyline._positions,
                    shape:computeCircle(50.0),
                    material:Cesium.Color.RED
                 }
    entity.polylineVolume=polylineVolume;
    entity.polyline=null;
}

 

PS:這裏還要解決跨域問題，不然ajax獲取不到GeoJson數據，解決方法：http://pan.baidu.com/s/1cpGg1o 或 Cesium_Load_GeoJson.rar

效果圖：

 

 

 

 

 

 

參考文章

kill5921，   Cesium 調用Geoserver WMS服務及Geoserver服務發佈

cesium加載WFS服務(GeoServer發佈)