cesium加載WFS服務(GeoServer發佈)

需求:

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

思路:

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

工具:

    GeoServer2.6.4,cesium,

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

    這裏假設geoserverWFS服務已經發布好了。

1、獲取服務地址

  GeoServerLayerPreview圖層列表中的目標圖層後面,再select on中選擇GeoJson,如下圖所示。

這個時候頁面中會以GeoJson格式顯示該圖層的數據,然後地址欄中的鏈接就是我們需要的地址,如下圖所示。

2、實用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

效果圖:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章