new WFSLayer(options)
WFS 图层。
用于接入 OGC WFS 服务并加载矢量要素,支持按子图层查询、客户端渲染与服务端过滤。 图层会在加载阶段自动解析服务元信息和空间参考系,建议在图层加载完成后执行要素查询与样式配置。
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object | {} |
可选
构造参数
|
Fires
- Layer#event:layerview-created
- Layer#event:layerview-remove
- Layer#event:layer-update
- Layer#event:layerview-update
Examples
// 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'
})
// 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'
})
// 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:服务端能力描述(不同服务类型可扩展)
基类默认认为:所有引擎均支持加载该图层;服务端能力为空。
copyrightString
版权所有
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 eventLayerViewUpdateEvent 事件对象
Properties
Name Type Default Description typeString 'layer-update' 可选 事件类型
layerLayer 可选 图层对象
updateContentArray.<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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-created' 可选 事件类型
messageString null 可选 描述信息
layerLayer 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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-remove' 可选 事件类型
messageString null 可选 描述信息
layerLayer 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 eventObject 事件对象
Properties
Name Type Default Description typeString '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中会描述本次更新涉及的属性或方法(例如:visible、opacity、refresh)。Properties:
Name Type Description eventLayerViewUpdateEvent 事件对象
Properties
Name Type Description updateContentArray.<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 pathString 属性路径
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 queryOptionsObject 参考此接口的入参
WFSServer#queryFeaturesReturns:
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 queryOptionsObject 参考此接口的入参
WFSServer#queryFeaturesReturns:
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 pathString 属性路径,可以传入单个属性后者一个属性的路径
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 jsonObject 可选 JSON 对象
Example
通过传入的 JSON 构造并返回一个新的图层对象 const json = { // 服务基地址 url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer' } const wfsLayer = zondy.layer.WFSLayer.fromJSON(json)