cesium加載WFS服務(GeoServer發布)

需求:

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

思路：

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

工具：

    GeoServer 2.6.4,cesium,

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

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

1、獲取服務地址

  在GeoServer的LayerPreview圖層列表中的目標圖層后面，再select on中選擇GeoJson,如下圖所示。

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

2、使用AJAX獲取GeoJson數據

    var viewer = new Cesium.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

效果圖：