使用ArcGIS Javascript API将Geoserver中的WFS图层加载到webmap

时间:2017-06-09 10:28:39

标签: arcgis geoserver arcgis-js-api wms

我正在尝试加载存储在Geoserver中的wfs图层,以使用ArcGIS Javascript API创建webmap。我已经设法用WMS做到这一点,但我无法使用WFSLayer工作。有谁知道这是否可能?

到目前为止我的代码:

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); });

1 个答案:

答案 0 :(得分:2)

您应该为您的网络服务器设置proxy。因为WFSLayer需要使用代理页面。所以在您的代码中,spoxy字符串应该是您本地计算机上的代理路径。

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

1.准备你的proxy.Esri提供了3种推荐的代理方式,包括dotnet,php和java.Let以dotnet方式为例。有关设置代理的详细信息或其他方法,请参阅Using the proxy

一个。下载dotnet代理文件;下载github Esri/resource-proxy zip文件,解压缩DotNet文件夹。

湾关注dotnet proxy Instructions

  
      
  • 打开IIS管理器;

  •   
  • 如果您将DotNet文件夹放在wwwroot中,请右键单击它并选择“转换为应用程序”。

  •   
  • 确保“应用程序池”至少为4.0。

  •   

℃。修改proxy.config file.Add serverUrl元素到serverUrls,以指明您要代理的服务器网址。

<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.在代码中设置代理网址。

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);

最终代码。注意:为了使代码正常运行,您应该根据上述说明为您的Web服务器设置代理。

<!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

希望你能。