类名 WFSLayer

# 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

服务基地址,目前支持的服务如下:
1、IGS2.0的WFS服务:http://{ip}:{port}/igs/rest/services/{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 Object

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

labelsVisible Boolean false

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

labelingInfo Array.<LabelClass> []

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

elevationInfo ElevationInfo

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

支持如下方法:
[1、加载图层资源]
[2、指定图层的要素查询]
[3、查询要素数量]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象

示例

添加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

继承关系

成员变量

String

版权所有

Inherited From:
Object

# customParameters

自定义查询参数customParameters

Inherited From:
String

# readonly description

图层描述

Inherited From:
ElevationInfo

# elevationInfo

高程模式参数

Object

# extendProps

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

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

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

Inherited From:
Default Value:
  • {}
Extent

# readonly extent

图层范围,从服务元信息中获取

Inherited From:
String

# readonly geometryType

服务元数据的几何类型

String

# headers

设置服务请求头

Inherited From:
FetchMethod

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Overrides:
Number

# index

图层顺序

Inherited From:
Array.<LabelClass>

# labelingInfo

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

Boolean

# labelsVisible

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

Boolean

# readonly loaded

是否加载完毕

Inherited From:
Default Value:
  • false
String

# readonly loadStatus

图层加载状态

Inherited From:
Default Value:
  • not-loaded
Number

# maxScale

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。

Inherited From:
Default Value:
  • 0
Number

# minScale

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。

Inherited From:
Default Value:
  • 0
Number

# opacity

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

Inherited From:
Array.<String>

# readonly outFields

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

String

# renderer

renderer渲染器

SpatialReference

# spatialReference

图层坐标系对象

Inherited From:
String

# sublayerId

图层id

String

# title

图层名称

Inherited From:
String

# tokenAttachType

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

Inherited From:
String

# tokenKey

token名

Inherited From:
Default Value:
  • token
String

# tokenValue

token值

Inherited From:
String

# readonly type

图层类型

Overrides:
String

# version

ogc版本号

Inherited From:
Number

# visible

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

Inherited From:
String

# readonly wfsCapabilities

wfsCapabilities信息

方法

# static fromJSON(jsonopt)

通过传入的json构造并返回一个新的几何对象

参数:

名称 类型 描述
json Object

JSON对象

示例

通过传入的json构造并返回一个新的几何对象

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

# clone()

克隆方法

Inherited From:

图层

Layer

# destroy()

Inherited From:
*

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

# 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

参考此接口的入参WFSServer#queryFeatures

Promise.<FeatureSet>
示例

指定图层的要素查询

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

# queryFeaturesCount(queryOptions)

查询要素数量

参数:

名称 类型 描述
queryOptions Object

参考此接口的入参WFSServer#queryFeatures

Promise.<Number>
示例

查询要素数量

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

# refresh()

刷新图层

Inherited From:

# toJSON()

转换为json对象

Overrides:

json对象

Object

事件

# 图层刷新完毕事件

图层刷新完毕事件,请注意该事件是图层更新事件(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);
    }
  }
});
构造函数
成员变量
方法
事件