CODEWITHSUNDEEP
arcgisgeoserverarcgis-js-apiwms
user8136435
user8136435

Reputation: 67

Load WFS layer from Geoserver to webmap using ArcGIS Javascript API

I am trying to load a wfs layer stored in Geoserver to create a webmap using ArcGIS Javascript API. I have managed to do this ok with a WMS but I can't get it to work using WFSLayer. Does anyone know if this is even possible?

My code so far:

var layer = new WFSLayer();
var opts = { "url": "localhost:8080/geoserver/wfs";,
    "version": "1.0.0",
    "name": "RSAC:RSAC_Field_boundary_WGS84_2",
    "wkid": 4326,
    "maxFeatures": 100 }; 
esriConfig.defaults.io.proxyUrl = "/sproxy/";;
layer.fromJson(opts);
map.addLayer(layer); });

Upvotes: 2

Views: 2356

Answers (1)

YinchaoOnline
YinchaoOnline

Reputation: 188

You should set proxy for your web server.Because WFSLayer requires using a proxy page.So in your code,the spoxy string should be your proxy path on your local computer.

esriConfig.defaults.io.proxyUrl = "/sproxy/";

1.prepare your proxy.Esri has provided 3 recommended ways to proxy,including dotnet,php and java.Let take dotnet way for example.For details or other ways to set proxy,see Using the proxy.

a. Download dotnet proxy files; download github Esri/resource-proxy zip files,extract the DotNet folder.

b. Follow dotnet proxy Instructions.

  • Open IIS Manager;

  • If you put the DotNet folder within wwwroot, right-click it and select "Convert to Application".

  • Make sure the "Application pool" is at least 4.0.

c. Edit the proxy.config file.Add serverUrl element to serverUrls to indicate which server url you would like to proxy.

<serverUrls>
    <serverUrl url="http://services.arcgisonline.com"
               matchAll="true"/>
    <serverUrl url="http://suite.opengeo.org/geoserver/wfs"
               matchAll="true"/>
    <serverUrl url="http://localhost:8080/geoserver/wfs"
               matchAll="true"/>
</serverUrls>

2.setup the proxy url in your code.

map = new Map("map", {
  basemap: "topo",
  center: [-122.836, 42.346],
  zoom: 13
});

var layer = new WFSLayer(); 

var opts = {
    "url": "http://suite.opengeo.org/geoserver/wfs",// your wfs layer url goes here
    "version": "1.1.0",
    "name": "citylimits",
    "wkid": 3857,
    "maxFeatures": 100
};

//relative path,namely: C:\inetpub\wwwroot\DotNet\proxy.ashx
esriConfig.defaults.io.proxyUrl = "/DotNet/proxy.ashx";

layer.fromJson(opts);

map.addLayer(layer);

Final code.Note: to make code run normally,you should set proxy for your web server according the above instructions.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>WFS Layer</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;

    require(["esri/map", "esri/InfoTemplate", "esri/layers/WFSLayer", "esri/config", "dojo/domReady!"], function(Map, InfoTemplate, WFSLayer, esriConfig) {
      map = new Map("map", {
        basemap: "topo",
        center: [-122.836, 42.346],
        zoom: 13
      });

      var layer = new WFSLayer();

      var opts = {
        "url": "http://suite.opengeo.org/geoserver/wfs",
        "version": "1.1.0",
        "name": "citylimits",
        "wkid": 3857,
        "maxFeatures": 100
      };

      //relative path,namely: C:\inetpub\wwwroot\DotNet\proxy.ashx
      esriConfig.defaults.io.proxyUrl = "/DotNet/proxy.ashx";

      layer.fromJson(opts);

      map.addLayer(layer);

    });
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

enter image description here

Hope it could you.

Upvotes: 3

Related Questions