How to request WFS service from geoserver and load geojson data as a layer in cesium?

Question

How can I load GeoJSON data dynamically from Geoserver, and load it to Cesium.js?

Answer 1

Cesium currently does not support loading in GeoJSON directly via some sort of "WFSProvider". That being said, the Cesium team apparently has plans to support WFS 3.0 sometime in the future.

For now, you would need to manually make an HTTP request to the WFS server for GeoJSON and load it into Cesium using the Cesium.GeoJsonDataSource class. Here is an example of this:

The idea is that you have a WFS server that is running somewhere. Once you have a WFS server that you can access, you can then write some JavaScript to make that request for GeoJSON:

const geoJsonPromise = fetch('http://example.com/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=namespace:featuretype').then(res => res.json());

The above code would return a WFS response wrapped within a JavaScript Promise. From here, you could then do something like...

    const viewer = new Cesium.viewer('cesiumContainer');
    geoJsonPromise.then(geoJson =>
       viewer.dataSources.add(
         Cesium.GeoJsonDataSource.load(
            geoJson,
            { fill: Cesium.Color.PINK }
           )
       )
    );

You could also create your own "WFSProvider" or, more accurately, "WFSDataSource" class that wraps the above functionality in a more generic fashion (could support more data formats) and abstracts it away.