Class: WFSLayer

WFSLayer

new WFSLayer(options)

document/layer/ogc/WFSLayer.js, line 20

WFS 图层。

用于接入 OGC WFS 服务并加载矢量要素,支持按子图层查询、客户端渲染与服务端过滤。 图层会在加载阶段自动解析服务元信息和空间参考系,建议在图层加载完成后执行要素查询与样式配置。

Name Type Default Description
options Object {} 可选

构造参数

Name Type Default Description
url String 可选

服务基地址,目前支持的服务如下:
1、IGS1.0的WFS服务:http://{ip}:{port}/igs/rest/ogc/layer/{folder}:{serviceName}/WFSServer,
2、IGS2.0的WFS服务:http://{ip}:{port}/igs/rest/services/{folder}/{serviceName}/WFSServer,示例如下:
[1、添加IGS要素图层-不指定图层]
[2、添加IGS要素图层-指定图层名称]
删除图层方法:[删除图层]

sublayerId String 可选

WFS服务的子图层名称,有如下规则:
1、不指定子图层ID则查询第0个子图层,指定时,则查询指定sublayerId的子图层
2、仅支持单图层的要素查询,不支持多图层和子图层的要素查询

id String 可选

图层id,不给则给一个随机的id

index Number 可选

图层顺序,参考示例:[图层顺序]

opacity Number 1 可选

图层透明度,0到1之间的值,0为完全透明,1为不透明,参考示例:[设置图层透明度]

visible Boolean true 可选

图层显示或隐藏,true则显示,false则隐藏,参考示例:[设置图层显示或隐藏]

renderer BaseRenderer | Object | null 可选

渲染样式,详细的几何类型样式请参考支持的渲染样式文档,所有支持的渲染样式如下:
1、单值专题图
2、分段专题图
3、统一专题图
参考示例:
[1、单值专题图]
[2、分段专题图]
[3、统一专题图]

labelsVisible Boolean false 可选

是否开启动态注记,仅支持三维场景

labelingInfo Array.<LabelClass> [] 可选

注记样式数组,可以和renderer同时启用,默认取数组的第一个样式, 仅支持三维场景,参考示例:[注记样式]

elevationInfo ElevationInfo 可选

高程样式,仅支持三维场景

isReverseXY Boolean | null null 可选

是否翻转x、y坐标。默认为null,未设置是否翻转x,y坐标,按照内部默认情况处理IGS、GeoServer、SuperMap、ArcGIS服务。不同图层参考系和不同厂商,服务元数据中的BoundingBox、以及要素的坐标值XY的顺序会不同,可根据服务的具体情况配置此参数。

renderMode String 'client' 可选

渲染模式,支持客户端渲染'client'; 网格化渲染'grid'(目前仅支持leaflet引擎,解决大数据量要素渲染问题,设置renderer时不支持聚类渲染器以及热力图渲染器)

definitionExpression String '' 可选

sql语句查询,例如name ='wuhan', 优先级要高于serverFilter选项。内部会转换成OGC Filter语法进行查询,目前仅支持简单的SQL语法,例如field1=value1 AND field2=value2,不支持复杂SQL语法和函数。

serverFilter FeatureFilter null 可选

服务端要素过滤选项

Fires
Examples

添加IGS2.0的WFS图层-不指定图层示例

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 初始化WFS图层
const wfsLayer = new WFSLayer({
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
})

添加IGS2.0的WFS图层-不指定图层示例

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 初始化WFS图层
const wfsLayer = new WFSLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
})

添加IGS2.0的WFS图层-指定图层名称示例

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 初始化WFS图层
const wfsLayer = new WFSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 通过图层名称指定要查询的图层
  sublayerId: 'Map_Hubei4326:t2'
})

单值专题图

// ES5引入方式
const { WFSLayer } = zondy.layer
const { UniqueValueRenderer } = zondy.renderer
const { SimpleFillSymbol } = zondy.symbol
const { Color } = zondy

// ES6引入方式
import { WFSLayer, UniqueValueRenderer, SimpleFillSymbol, Color } from "@mapgis/webclient-common"
const wfsLayer = new WFSLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置渲染样式-单值专题图
  renderer: new UniqueValueRenderer({
    // 专题图过滤字段名
    field: '字段名',
    // 默认样式,当没有匹配到指定值时,会使用默认样式
    // 因为该数据的几何类型为区,因此设置区样式
    defaultSymbol: new SimpleFillSymbol({
      // 填充颜色
      color: new Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽
        width: 1
      })
    }),
    // 单值专题图过滤条件数组
    uniqueValueInfos: [
      {
        //指定字段值
        value: '过滤字段值1',
        //匹配到该值后的样式
        // 因为该数据的几何类型为区,因此设置区样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: new Color(255, 0, 0)
        })
      },
      {
        //指定字段值
        // 因为该数据的几何类型为区,因此设置区样式
        value: '过滤字段值2',
        //匹配到该值后的样式
        // 因为该数据的几何类型为区,因此设置区样式
        symbol: new SimpleFillSymbol({
          // 填充颜色
          color: 'rgb(255, 123, 220)'
        })
      }
    ]
  })
})

分段专题图

// ES5引入方式
const { WFSLayer } = zondy.layer
const { ClassBreakRenderer } = zondy.renderer
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy

// ES6引入方式
import { WFSLayer, UniqueValueRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
const wfsLayer = new WFSLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置渲染样式-分段专题图
  renderer: new ClassBreakRenderer({
    // 专题图过滤字段名
    field: '字段名',
    // 默认样式,当没有匹配到指定值时,会使用默认样式
    // 因为该数据的几何类型为线,因此设置线样式
    defaultSymbol: new SimpleLineSymbol({
      // 线符号颜色
      color: new Color(1, 244, 0),
      // 线宽
      width: 3
    }),
    // 分段专题图过滤条件数组
    classBreakInfos: [
      {
        // 最小过滤范围,field对应的值大于等于minValue
        minValue: 0,
        // 最大过滤范围,field对应的值小于maxValue
        maxValue: 2,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线,因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(1, 244, 0),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围,field对应的值大于等于minValue
        minValue: 3,
        // 最大过滤范围,field对应的值小于maxValue
        maxValue: 5,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线,因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(111, 144, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围,field对应的值大于等于minValue
        minValue: 5,
        // 最大过滤范围,field对应的值小于maxValue
        maxValue: 7,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线,因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(22, 244, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围,field对应的值大于等于minValue
        minValue: 7,
        // 最大过滤范围,field对应的值小于maxValue
        maxValue: 9,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线,因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color: new Color(33, 44, 10),
          // 线宽
          width: 3
        })
      },
      {
        // 最小过滤范围,field对应的值大于等于minValue
        minValue: 9,
        // 最大过滤范围,field对应的值小于maxValue
        maxValue: 20,
        // 匹配到该值后的样式
        // 因为该数据的几何类型为线,因此设置线样式
        symbol: new SimpleLineSymbol({
          // 线符号颜色
          color:  new Color(123, 124, 110),
          // 线宽
          width: 3
        })
      }
    ]
  })
})

统一专题图

// ES5引入方式
const { WFSLayer } = zondy.layer
const { SimpleRenderer } = zondy.renderer
const { SimpleLineSymbol } = zondy.symbol
const { Color } = zondy

// ES6引入方式
import { WFSLayer, SimpleRenderer, SimpleLineSymbol, Color } from "@mapgis/webclient-common"
const wfsLayer = new WFSLayer({
  // 服务基地址,当不指定图层名称时,默认查询第一个子图层
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置渲染样式-统一专题图
  renderer: new SimpleRenderer({
    // 因为该数据的几何类型为区,因此设置区样式
    symbol: new SimpleFillSymbol({
      // 填充颜色
      color: new Color(255, 0, 0),
      // 外边线样式
      outline: new SimpleLineSymbol({
        // 线颜色
        color: new Color(0, 0, 0),
        // 线宽度
        width: 1
      })
    })
  })
})

启用注记

// ES5引入方式
const { LabelClass, Color, Font } = zondy
const { TextSymbol } = zondy.symbol
const { WFSLayer } = zondy.layer

// ES6引入方式
import { LabelClass, Color, Font, TextSymbol, WFSLayer } from "@mapgis/webclient-common"
// 初始化LabelClass
const labelClass = new LabelClass({
  // 指定文本符号样式
  symbol: new TextSymbol({
    // 文字颜色
    color: new Color(252, 100, 22, 1),
    // 文字样式
    font: new Font({
      // 字体
      family: "微软雅黑",
      // 文字大小,单位像素
      size: 30,
      // 文字是否为斜体,正常模式
      style: "normal",
      // 文字粗细
      weight: "normal"
    })
  })
})
// 初始化WFS图层
const wfsLayer = new WFSLayer({
  // 服务
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 可在此处设置渲染样式
  renderer: {},
  // 启用注记
  labelsVisible: true,
  // 设置注记样式
  labelingInfo: [labelClass]
})
// 添加到容器中
map.add(wfsLayer)

图层顺序

// ES5引入方式
const { IGSMapImageLayer, WFSLayer } = zondy.layer

// ES6引入方式
import { IGSMapImageLayer, WFSLayer } from "@mapgis/webclient-common"
// 加载地图图片图层,设置index为3
const igsMapImageLayer = new IGSMapImageLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/MapServer',
  // 设置index
  index: 3
});

// 加载完毕后,更改图层顺序
map.reorder(layer, '要移动到的index');

// 初始化WFS图层
const wfsLayer = new WFSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置index
  index: 4
})

设置图层透明度

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 初始化时指定透明度
const wfsLayer = new WFSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置opacity
  opacity: 1
})
// 添加到容器中
map.add(wfsLayer)

// 加载完毕后设置透明度
wfsLayer.opacity = 0.5

设置图层可见性

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 在初始化时设置
const wfsLayer = new WFSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer',
  // 设置图层可见性
  visible: true
})

// 加载完毕后设置可见性
wfsLayer.visible = false

Extends

Members

autoAddTo2DBoolean

是否自动添加到二维引擎的地图对象。

该属性主要用于部分第三方引擎:图层的加载与添加由应用侧自行控制,而不是框架自动添加。

Default Value:
true

autoAddTo3DBoolean

是否自动添加到三维引擎的场景对象。

该属性主要用于部分第三方引擎:图层的加载与添加由应用侧自行控制,而不是框架自动添加。

Default Value:
true

capabilitiesObject

图层支持能力。

capabilities 通常由两部分组成:

  • client:客户端(渲染引擎)侧能力描述(如是否可加载、属性是否可读写等)
  • server:服务端能力描述(不同服务类型可扩展)

基类默认认为:所有引擎均支持加载该图层;服务端能力为空。

版权所有

corporationTypeNumber

地图服务的公司代码

customLayerParametersObject

图层自定义查询参数customLayerParameters

customParametersObject

自定义查询参数customParameters

definitionExpressionString

要素过滤条件,类似sql语句

descriptionString

图层描述

elevationInfoElevationInfo

高程模式参数

extendPropsObject

额外属性,当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中

Default Value:
{}

extensionOptionsObject

初始化图层的额外参数,可以通过该参数传入引擎原生的构造参数

Default Value:
{}

extentExtent null

图层的范围。从元信息或数据中获取,默认为null表示取不到范围。

forceRefreshDebounceDelayNumber

强制刷新防抖延迟(毫秒)。

某些引擎实现会将刷新请求做合并/防抖处理,该参数用于控制防抖窗口。

Default Value:
5

geometryTypeGeometryType

服务元数据的几何类型

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

isReverseXYBoolean

是否翻转x,y坐标

labelingInfoArray.<LabelClass>

注记样式数组,默认取数组的第一个样式,仅支持三维动态注记渲染

labelsVisibleBoolean

是否开启动态注记,仅支持三维动态注记渲染

loadErrorObject

请求失败后的错误信息,toJSON方法不会导出该属性

Default Value:
null

loadStatusString

图层加载状态

Default Value:
not-loaded

loadedBoolean

是否加载完毕

Default Value:
false

maxScaleNumber

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,如果图层是瓦片类型,maxScale、minScale的默认值能和tileInfo上的保持一致,如果图层是动态图层,则和地图视图保持一致。maxScale应该始终小于minScale。

Default Value:
0

minScaleNumber

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,如果图层是瓦片类型,maxScale、minScale的默认值能和tileInfo上的保持一致,如果图层是动态图层,则和地图视图保持一致。minScale应该始终大于maxScale。

Default Value:
0

opacityNumber

图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。

outFieldsArray.<String>

服务数据库的所有字段名数组

renderModeString

渲染模式,支持客户端渲染'client';服务器端渲染'server'(不支持renderer),目前仅当gdbp存在时,server模式生效;网格化渲染'grid'网格化渲染'grid'(目前仅支持leaflet引擎,解决大数据量要素渲染问题,设置renderer时不支持聚类渲染器以及热力图渲染器)

rendererBaseRenderer

renderer渲染器

serverFilterFeatureFilter

服务器端过滤选项

spatialReferenceSpatialReference null

图层坐标系对象

sublayerIdString

图层id

titleString

图层名称

tokenAttachTypeTokenAttachType

token附加类型。默认 post 请求优先附加到 body,get 请求优先附加到 url 末尾。

tokenKeyString

token名

Default Value:
token

tokenValueString

token值

typeLayerType

图层类型

urlString

服务地址

versionString

WFS服务版本号

visibleBoolean

图层显示或隐藏,true则显示,false则隐藏,会触发图层更新完毕事件

wfsCapabilitiesString

wfsCapabilities信息

Events

inherited layer-update

document/layer/baseLayer/Layer.js, line 126

图层属性更新事件。

当调用 refresh()setProperty() 或图层内部主动触发更新时,会向 Map/View 分发该事件。 该事件主要用于渲染层同步图层状态。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

Properties
Name Type Default Description
type String 'layer-update' 可选

事件类型

layer Layer 可选

图层对象

updateContent Array.<Object> 可选

更新详情

Example

Create Layer instance

// ES5 import style
const { Layer } = zondy

// ES6 import style
import { Layer } from '@mapgis/webclient-common'

inherited layerview-created

document/layer/baseLayer/Layer.js, line 52

图层在视图中创建完毕事件。

当图层被添加到 View,并且该引擎对应的图层视图对象创建成功后触发。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-created' 可选

事件类型

message String null 可选

描述信息

layer Layer null 可选

图层对象

layerView * null 可选

图层视图对象(不同引擎类型不同)

sourceTarget * null 可选

事件发起对象

target * null 可选

事件接收对象(通常为 View/Map)

Example
layer.on('layerview-created', (event) => {
  console.log('图层视图创建完毕', event.layer, event.layerView)
})

inherited layerview-remove

document/layer/baseLayer/Layer.js, line 71

图层从视图中移除事件。

当图层从 View 移除,并且对应的图层视图对象已释放后触发。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-remove' 可选

事件类型

message String null 可选

描述信息

layer Layer null 可选

图层对象

layerView * null 可选

图层视图对象

sourceTarget * null 可选

事件发起对象

target * null 可选

事件接收对象(通常为 View/Map)

Example
layer.on('layerview-remove', (event) => {
  console.log('图层视图已移除', event.layer)
})

inherited layerview-scale-visible

document/layer/baseLayer/Layer.js, line 109

图层比例尺显示/隐藏状态更新事件。

该事件由 View 层在比例尺变化导致图层显示状态(因 minScale/maxScale 约束)变化时触发。 当前仅支持非组图层以及场景子图层。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-scale-visible' 可选

事件类型

target * 可选

事件接收对象

sourceTarget * 可选

事件发起对象

Example
layer.on('layerview-scale-visible', (event) => {
  console.log('比例尺可见性变更', event)
})

inherited layerview-update

document/layer/baseLayer/Layer.js, line 90

图层视图更新事件。

该事件通常由 View 层触发,用于通知外部“渲染层已完成一次图层更新”。 event.updateContent 中会描述本次更新涉及的属性或方法(例如:visibleopacityrefresh)。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

Properties
Name Type Description
updateContent Array.<Object> 可选

更新详情数组

Example
layer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  const hasVisibleChange = updateContent.some((c) => c.name === 'visible')
  const hasOpacityChange = updateContent.some((c) => c.name === 'opacity')
  const hasRefresh = updateContent.some((c) => c.name === 'refresh')
  console.log('更新完毕', { hasVisibleChange, hasOpacityChange, hasRefresh })
})

Methods

clone(){WFSLayer}

document/layer/ogc/WFSLayer.js, line 1003

克隆WFSLayer对象

Returns:
Type Description
WFSLayer 克隆后的WFSLayer实例

inherited destroy(){void}

document/layer/baseLayer/Layer.js, line 594

销毁图层。

基类不做具体释放逻辑,子类可根据需要重写(例如:释放请求、解绑引擎对象等)。

Returns:
Type Description
void

inherited getProperty(path){*}

document/layer/baseLayer/Layer.js, line 825

获取属性或属性路径对应的值。

Name Type Description
path String

属性路径

Returns:
Type Description
* 属性值

inherited isLoaded(){Boolean}

document/layer/baseLayer/Layer.js, line 530

判断图层是否加载成功

Returns:
Type Description
Boolean 图层是否加载成功

load()

document/layer/ogc/WFSLayer.js, line 707

加载图层资源

Example

不加载图层,仅获取图层信息

// ES5引入方式
const { WFSLayer } = zondy.layer

// ES6引入方式
import { WFSLayer } from "@mapgis/webclient-common"
// 初始化图层
const wfsLayer = new WFSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
});
wfsLayer.load().then((result) => {
  // 获取完图层信息
  console.log(wfsLayer)
})

queryFeatures(queryOptions){Promise.<FeatureSet>}

document/layer/ogc/WFSLayer.js, line 873

指定图层的要素查询

Name Type Description
queryOptions Object

参考此接口的入参WFSServer#queryFeatures

Returns:
Type Description
Promise.<FeatureSet>
Example

指定图层的要素查询

wfsLayer.queryFeatures({
  // 图层id
  layerId: '0',
  // where语句
  where: "查询条件"
}).then((result) => {
  console.log('查询结果:', result)
})

queryFeaturesCount(queryOptions){Promise.<Number>}

document/layer/ogc/WFSLayer.js, line 906

查询要素数量

Name Type Description
queryOptions Object

参考此接口的入参WFSServer#queryFeatures

Returns:
Type Description
Promise.<Number>
Example

查询要素数量

igsFeatureLayer.queryFeaturesCount({
  // 图层id
  layerId: '0',
  // where语句
  where: "查询条件"
}).then((result) => {
  console.log('查询结果:', result)
})

refresh(){*}

document/layer/ogc/WFSLayer.js, line 1012

刷新图层。

Returns:
Type Description
*

inherited setMap(map){void}

document/layer/baseLayer/Layer.js, line 581

设置图层所属的地图/场景管理容器。

该方法通常由 Map 在添加图层时调用,外部一般无需手动调用。

Name Type Description
map *

地图/场景管理对象(不同引擎类型不同)

Returns:
Type Description
void

inherited setProperty(path, value){Boolean}

document/layer/baseLayer/Layer.js, line 777

设置属性值或属性路径对应的值。

由于默认仅支持第一级属性响应,此方法提供“属性路径”写入能力。 例如:setProperty('tileInfo.startLevel', 3) 可更新 tileInfo.startLevel

若设置的是多级属性路径,会额外触发一次 layer-update 事件(updateContent.name 为路径字符串)。

Name Type Description
path String

属性路径,可以传入单个属性后者一个属性的路径

value *
Returns:
Type Description
Boolean 是否设置成功

toJSON(){Object}

document/layer/ogc/WFSLayer.js, line 971

转换为 JSON 对象

Returns:
Type Description
Object JSON 对象

WFSLayer.fromJSON(json)

document/layer/ogc/WFSLayer.js, line 954

通过传入的 JSON 构造并返回一个新的图层对象

Name Type Description
json Object 可选

JSON 对象

Example

通过传入的 JSON 构造并返回一个新的图层对象

const json = {
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
}
const wfsLayer = zondy.layer.WFSLayer.fromJSON(json)