# new WFSLayer(options)
WFS图层,
目前二维和三维上支持4326(包括4490,4214以及4610),3857以及EPSG支持的自定义坐标系,WFS服务会自动读取元信息上的坐标系,不需要用户指定
[ES5引入方式]:
zondy.layer.WFSLayer()
[ES6引入方式]:
import { WFSLayer } from "@mapgis/webclient-common"
针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码,则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options |
Object | 构造参数 |
|
url |
String | 服务基地址,目前支持的服务如下: |
|
sublayerId |
String | WFS服务的子图层名称,有如下规则: |
|
id |
String | 图层id,不给则给一个随机的id |
|
index |
Number | 图层顺序,参考示例:[图层顺序] |
|
opacity |
Number | 1 | 图层透明度,0到1之间的值,0为完全透明,1为不透明,参考示例:[设置图层透明度] |
visible |
Boolean | true | 图层显示或隐藏,true则显示,false则隐藏,参考示例:[设置图层显示或隐藏] |
renderer |
Object | 渲染样式,详细的几何类型样式请参考支持的渲染样式文档,所有支持的渲染样式如下: |
|
labelsVisible |
Boolean | false | 是否开启动态注记,仅支持三维场景 |
labelingInfo |
Array.<LabelClass> | [] | 注记样式数组,可以和renderer同时启用,默认取数组的第一个样式,
仅支持三维场景,参考示例:[注记样式] |
elevationInfo |
ElevationInfo | 高程样式,仅支持三维场景 |
支持如下方法:
[1、加载图层资源][2、指定图层的要素查询]
[3、查询要素数量]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象
示例
// 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
继承关系
成员变量
# maxScale
最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。
- Inherited From:
- Default Value:
- 0
# minScale
最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。
- Inherited From:
- Default Value:
- 0
# opacity
图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。
- Inherited From:
方法
# static fromJSON(jsonopt)
参数:
名称 | 类型 | 描述 |
---|---|---|
json |
Object | JSON对象 |
示例
const json = {
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WFSServer'
}
const wfsLayer = new zondy.layer.WFSLayer.fromJSON(json)
# load()
示例
// 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)
参数:
名称 | 类型 | 描述 |
---|---|---|
queryOptions |
Object | 参考此接口的入参 |
示例
wfsLayer.queryFeatures({
// 图层id
layerId: '0',
// where语句
where: "查询条件"
}).then((result) => {
console.log('查询结果:', result)
})
# queryFeaturesCount(queryOptions)
参数:
名称 | 类型 | 描述 |
---|---|---|
queryOptions |
Object | 参考此接口的入参 |
示例
igsFeatureLayer.queryFeaturesCount({
// 图层id
layerId: '0',
// where语句
where: "查询条件"
}).then((result) => {
console.log('查询结果:', result)
})
事件
# 图层刷新完毕事件
图层刷新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-update' | 图层更新完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
图层刷新完毕事件
Layer.on('layerview-update', function (event) {
// 获取更新事件对象
console.log("更新完毕:", event)
// 获取更新详情数组
const updateContent = event.updateContent
// 循环数组,根据事件名进行后续操作
for (let i = 0; i < updateContent.length; i++) {
// 图层刷新完毕事件
if(updateContent[i].name === 'refresh'){
console.log("图层刷新完毕事件:", event);
}
}
});
# 图层加载完毕事件
图层加载完毕事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-created' | 图层加载完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
UpdateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
# 图层显隐更新完毕事件
图层显隐更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-update' | 图层更新完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
图层显隐更新完毕事件
Layer.on('layerview-update', function (event) {
// 获取更新事件对象
console.log("更新完毕:", event)
// 获取更新详情数组
const updateContent = event.updateContent
// 循环数组,根据事件名进行后续操作
for (let i = 0; i < updateContent.length; i++) {
// 图层显隐事件
if(updateContent[i].name === 'visible'){
console.log("图层显隐更新事件:", event);
}
}
});
# 图层更新完毕事件
图层更新完毕事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-update' | 图层更新完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
Layer.on('layerview-update', function (result) {
console.log("更新完毕:", result.layer)
});
# 图层透明度更新完毕事件
图层透明度更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-update' | 图层更新完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
图层透明度更新完毕事件
Layer.on('layerview-update', function (event) {
// 获取更新事件对象
console.log("更新完毕:", event)
// 获取更新详情数组
const updateContent = event.updateContent
// 循环数组,根据事件名进行后续操作
for (let i = 0; i < updateContent.length; i++) {
// 图层透明度更新事件
if(updateContent[i].name === 'opacity'){
console.log("图层透明度更新事件:", event);
}
}
});
# 图层销毁完毕事件
图层销毁完毕事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-remove' | 图层销毁完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 要销毁的地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
Layer.on('layerview-remove', function (result) {
console.log("销毁完毕:", result.layer)
});
# 图层顺序更新完毕事件
图层顺序更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
属性:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
event |
Object | 事件对象 |
||
type |
String |
<optional> |
'layerview-update' | 图层更新完毕事件 |
message |
String |
<optional> |
null | 更新描述 |
updateContent |
Array.<UpdateContent> |
<optional> |
null | 更新详情对象 |
layer |
Layer |
<optional> |
null | 地图图层对象 |
layerView |
MapView |
<optional> |
null | 图层的视图对象 |
sourceTarget |
Layer |
<optional> |
null | 事件发起对象 |
target |
Map |
<optional> |
null | 事件接收对象 |
- Inherited From:
示例
图层顺序更新完毕事件
Layer.on('layerview-update', function (event) {
// 获取更新事件对象
console.log("更新完毕:", event)
// 获取更新详情数组
const updateContent = event.updateContent
// 循环数组,根据事件名进行后续操作
for (let i = 0; i < updateContent.length; i++) {
// 图层顺序更新完毕事件
if(updateContent[i].name === 'index'){
console.log("图层顺序更新完毕事件:", event);
}
}
});