WFS support in Cesium

2,251 views
Skip to first unread message

Sushrut Shivaswamy

unread,
Mar 18, 2016, 8:31:05 AM3/18/16
to cesium-dev
Hey,

I had previously enquired about WFS support in Cesium here.

http://cesiumjs.org/forum.html#!msg/cesium-dev/QUUxLZCsQdw/-M_XIWlxBgAJ

By using some of the code in the pending pull request on GmlDataSource I have begun
working on a WFS  ImageryProvider that can query a server for feature info and then
render the features.
See :
    https://github.com/sushrut141/Cesium-WebFeatureService

I have the provider able to query and render simple features published as vector layers in Geoserver.
I was hoping to integrate this module into the Cesium tree.
I would appreciate any help in adding more features to the module that users see fit.

Regards,
Sushrut Shivaswamy

paula....@gmail.com

unread,
Nov 30, 2017, 10:12:17 AM11/30/17
to cesium-dev
Hi Sushrut,

I want to try your code. Can you tell me how to integrate it into Cesium?
Should I just put the WebFeatureServiceImageryProvider.js file somewhere in source code folders? I've put it in Source/Scene and wrote code for initialization in sandcastle, but an error occurs

//initialise cesium
var viewer = new Cesium.Viewer("cesiumContainer");

//initialise WFS provider
var wfs = new Cesium.WebFeatureServiceImageryProvider({

url : "http://localhost:8080/geoserver/xxxxxx",
layers : "xxxxxx",
viewer : viewer

});

Uncaught TypeError: Cesium.WebFeatureServiceImageryProvider is not a constructor (on line 5)

Sushrut Shivaswamy

unread,
Nov 30, 2017, 10:19:41 AM11/30/17
to cesiu...@googlegroups.com
Hi Paula, 

The wfs plugin file should be included in your main html page in a script tasg after the cesium.js file.

Regards,
Sushrut Shivaswamy

--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/Jkga8_8tPWA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

paula....@gmail.com

unread,
Dec 1, 2017, 3:58:55 AM12/1/17
to cesium-dev
Hi Sushrut,

thank you for quick answer and help, but I still don't manage to make the plugin work. I'm not very experienced in programming and I don't understand what do you mean by including the plugin in main html page in a script tags. I see there are Cesium.js and main.js files in Source folder but there's no main.html file. I've included the WebFeatureServiceImageryProvider in Cesium.js that looks like this:

define(['./Core/appendForwardSlash', './Core/arrayFill', *...LOTS OF SIMILAR CODE...*
, './Scene/WebFeatureServiceImageryProvider', *LOTS OF SIMILAR CODE*
Scene_WebFeatureServiceImageryProvider, *LOTS OF SIMILAR CODE*
Cesium['WebFeatureServiceImageryProvider'] = Scene_WebFeatureServiceImageryProvider; *LOTS OF SIMILAR CODE*

I haven't changed anything in sandcastle code except the url. Do I have to put something there?

Thank you again and best regards,
Paula

Sushrut Shivaswamy

unread,
Dec 1, 2017, 12:50:58 PM12/1/17
to cesiu...@googlegroups.com
Hi Paula,

The code hosted on github can be used in two ways.
By integrating the WFS module in Cesium source or using it as a plugin.
I would you suggest you stick to the second approach and use WFS as a plugin
since it does not involve changing the source code.
You can download the plugin from here :
The file will need to be included in the main html page of your app.
I'm not sure how that works in sandcastle but in a basic webpage you would have something like

<!DOCTYPE html>
<html>
<head>
  <script src='Cesium.js' type='text/javascript' />
  <script src='WFS.js' type='text/javascript' />
</head>
<body>
    <div id='viewer'></div>
      // instantiate the cesium globe
      var viewer = new Cesium.Viewer('viewer');

      // . create the wfs getter to load a vector layer on the globe.
     var wfs = new Cesium.WebFeatureServiceImageryProvider({
          url : "http://localhost:8080/geoserver/web",
          layers : "vectorLayerName",
          viewer : viewer
       });
</body>
</html>

Hope that makes sense. 

Regards,
Sushrut Shivaswamy


paula....@gmail.com

unread,
Dec 5, 2017, 10:21:04 AM12/5/17
to cesium-dev
Hi Sushrut,

I've followed your advice, but still getting "Uncaught TypeError: Cesium.WebFeatureServiceImageryProvider is not a constructor (on line 4)".
Do you have any idea why is that so and how can I fix that?
Do I have to put WFS.js in a particular folder or it doesn't matter where I put it (like can I put it for example on Desktop)?
Also, you mentioned Cesium.js script tag but in examples from sandcastle there is only Sandcastle-header.js script tag like in the code below.

Thank you so much and sorry for bothering you,
Paula

--------------------------------------
This is how my html looks:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Use Viewer to start building new applications or easily embed Cesium into existing applications.">
<meta name="cesium-sandcastle-labels" content="Beginner, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Sandcastle-header.js"></script>
<script type="text/javascript" src="C:/Program Files/Cesium-1.39/Source/WFS.js"></script>
<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
<script type="text/javascript">
require.config({
baseUrl : '../../../Source',
waitSeconds : 60
});
</script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';

//Sandcastle_Begin

var viewer = new Cesium.Viewer('cesiumContainer');

//initialise WFS provider


var wfs = new Cesium.WebFeatureServiceImageryProvider({

url : "http://localhost:8081/geoserver/web",
layers : "myLayer",
viewer : viewer

});

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
startup(Cesium);
} else if (typeof require === "function") {
require(["Cesium"], startup);
}
</script>
</body>
</html>

Sushrut Shivaswamy

unread,
Dec 5, 2017, 10:30:41 AM12/5/17
to cesiu...@googlegroups.com
<script type="text/javascript" src="../Sandcastle-header.js"></script>

<script type="text/javascript" src="C:/Program Files/Cesium-1.39/Source/WFS.js"></script>

You need to specify the relative path to WFS.js as has has been done for Sandcastle-header.js not the file system path.

paula....@gmail.com

unread,
Dec 5, 2017, 10:45:40 AM12/5/17
to cesium-dev
OK, now I've put the WFS.js in Source/Scene and wrote relative path -> "../../../Source/Scene/WFS.js" but still getting the same error

parameshwa...@gmail.com

unread,
Dec 24, 2018, 1:50:47 AM12/24/18
to cesium-dev
Hai paula iam also facing the same issue .. are you able to fix it or is their any other way?

Omar Shehata

unread,
Jan 2, 2019, 1:18:58 PM1/2/19
to cesium-dev
I haven't personally used this module, but from a quick search on the forum, it looks like TerriaJS (a library built on top of CesiumJS) supports WFS, see:

Reply all
Reply to author
Forward
0 new messages