使用FeatureLayer加载WFS服务

Posted on | Post modified: | In
Words count in article: 339 | Reading time ≈ 1

ArcGIS JS API 在当前（4.15版本）提供有WebTileLayer、WMSLayer、WMTSLayer等图层类，但并没有提供加载WFS服务的图层类。所以使用FeatureLayer来实现加载。

WFS，Web Feature Service，网络要素服务

思路

手动构造FeatureLayer的source 属性。

1
2
3
4
5
6
st=>start: Start
req=>operation: WFS请求
xml=>operation: 解析XML
feature=>operation: 实例化FeatureLayer
e=>end
st->req->xml->feature->e

WFS请求

GetCapabilities

参数说明：

参数 是否必须 默认值
SERVICE Y WFS
REQUEST=GetCapabilities Y

请求示例：

1
2
3
4
5
http://www.someserver.com/wfs?

SERVICE=WFS&

REQUEST=GetCapabilities

GetFeature

参数说明：

参数 是否必须 默认值
VERSION Y 1.1.0
SERVICE Y WFS
REQUEST=GetFeature Y
TYPENAME Y
OUTPUTFORMAT text/xml; subtype=gml/3.1.1
BBOX
FILTER
SORTBY
MAXFEATURES
PROPERTYNAME
SRSNAME
FEATUREID
EXPIRY
RESULTTYPE results
FEATUREVERSION

请求示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
http://www.someserver.com/wfs？

SERVICE=WFS&

VERSION=1.1.0&

REQUEST=GetFeature&

PROPERTYNAME=InWaterA_1M/wkbGeom,InWaterA_1M/tileId&

TYPENAME=InWaterA_1M&

FILTER=InWaterA_1M/wkbGeom

解析XML

从返回的XML中解析数据，构造Features数组。

解析过程示例代码：

1
2
3
4
5
6
const parser = new DOMParser();
const xml = parser.parseFromString(response, 'text/xml');
const htmlCollection = xml.getElementsByTagName('wfs:FeatureCollection');
for (let i = 0, len = htmlCollection.length; i < len; i++) {
  console.log(htmlCollection[i].innerHTML);
}

Features数组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const features = [
 {
   geometry: {
     type: "point",
     x: -100,
     y: 38
   },
   attributes: {
     ObjectID: 1,
     DepArpt: "KATL",
     MsgTime: Date.now(),
     FltId: "UAL1"
   }
 },
 ...
];

实例化FeatureLayer

1
2
3
4
const layer = new FeatureLayer({
  source: features,  // autocast as a Collection of new Graphic()
  objectIdField: "ObjectID"
});