类名 WMSLayer

# new WMSLayer(options)

WMS图层,
目前二维上支持4326(包括4490,4214以及4610),3857以及EPSG支持的自定义坐标系,三维上仅支持4326(包括4490,4214以及4610)以及3857坐标系,会自动读取元信息上的坐标系,不需要用户指定,同时所有的WMS服务都支持动态投影,用户也可指定任意该服务支持的坐标系

[ES5引入方式]:
Zondy.Layer.WMSLayer()
[ES6引入方式]:
import { WMSLayer } from "@mapgis/webclient-common"

针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码,则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}

参数

名称 类型 默认值 描述
options Object

构造参数

url String

服务基地址,支持的服务如下:
1、支持MapGIS的WMS服务,格式为:http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer,参考示例:[加载MapGIS的WMS服务]
2、支持ArcGIS的WMS服务,格式为:http://{ip}:{port}/arcgis/rest/services/{ServiceName}/WMSServer,参考示例:[加载ArcGIS的WMS服务]

title String

图层名称

spatialReference SpatialReference

图层坐标系,支持4326、3857以及EPSG上的自定义坐标系,坐标系默认从元信息中获取,也可指定坐标系, 参考示例:[设置图层坐标系]

opacity Number 1

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

visible Boolean true

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

imageWidth Number 256

图片宽度,单位px

imageHeight Number 256

图片高度,单位px

minScale Number 0

最小显示比例尺,图层在视图中可见的最小比例尺。

maxScale Number 0

最大显示比例尺,图层在视图中可见的最大比例尺。

imageTransparency Boolean true

图片中没有数据的地方是否透明,默认为true,即透明

clippingArea Polygon | Extent | Circle | MultiPolygon | null null

图层空间裁剪范围,仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪

sublayers Array []

指定子图层参数,可设置子图层是否显示,若不填则显示所有子图层,若有值则只显示visible为true的子图层,
参考示例:
[1、初始化时,设置子图层显隐]
[2、通过方法,设置子图层显隐]
[3、通过修改子图参数,设置子图层显隐]

tokenKey String 'token'

token名

tokenValue String

token值,只有当tokenValue存在时,才会绑定token

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

示例

添加WMS图层示例

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化wms图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMSServer'
});

设置图层透明度

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化时设置
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMSServer',
 // 设置透明度
  opacity: 1.0
});

显示或隐藏图层

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化时设置
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMSServer',
  // 显示或隐藏图层
  visible: true
});

设置图层坐标系

// ES5引入方式
const { WMSLayer } = Zondy.Layer
const { SpatialReference } = Zondy
// ES6引入方式
import { WMSLayer, SpatialReference } from "@mapgis/webclient-common"
// 初始化wms图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMSServer',
  // 指定图层坐标系
  spatialReference: new SpatialReference({
    // 坐标系的wkid,可在https://epsg.io/网站查询
    wkid: 4326
  })
});

删除图层

map.remove(wmsLayer)

添加ArcGIS的WMS图层示例

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  url: 'http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/WMSServer',
  // 注意一个WMS图层可能支持多个坐标系,这里指定3857坐标系
  spatialReference: new Zondy.SpatialReference({
    wkid: 3857
  })
});

初始化时,设置子图层显隐

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer',
  // 要显示的子图层,若不填,则默显示所有子图层
  sublayers: [{
    id: 0,
    visible: true
  }, {
    id: 1,
    visible: true
  }]
});

通过方法,设置子图层显隐

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer'
});

// 通过图层id来设置显隐
wmsLayer.setSubLayer({
  id: 0,
  visible: false
})
// 或者通过图层名称设置显隐
wmsLayer.setSubLayer({
  name: "Map_Hubei4326:t1",
  visible: true
})

通过修改子图参数,设置子图层显隐

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer'
});

// 根据id获取子图层
const wmsSubLayer = wmsLayer.findSublayerById(0)
// 设置子图层显隐
wmsSubLayer.visible = false

继承关系

成员变量

成员变量概述

名称 类型 描述
allSublayers Array

所有子图层对象信息

clippingArea Polygon | Extent | Circle | MultiPolygon | null

空间裁剪范围

copyright String

版权所有

customParameters Object

自定义查询参数customParameters

description String

图层描述

extendOptions Object

初始化图层的额外参数

extendProps Object

存储额外参数的属性

extent Extent

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

headers String

设置服务请求头

httpMethod String

http请求方式

id String

图层id

imageFormat String

图片格式

imageFormats Array

图片格式数组,表示服务支持的所有图片格式

imageHeight Number

图片高度,单位px

imageTransparency Boolean

图层中的非数据部分是否透明

imageWidth Number

图片宽度,单位px

index Number

图层顺序

layers String

WMS服务要加载的图层id,多个id以逗号分割

loaded Boolean

是否加载完毕

loadStatus String

图层加载状态

maxScale Number

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

minScale Number

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

opacity Number

图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件

spatialReference SpatialReference

图层坐标系对象

spatialReferences Array.<SpatialReference>

图层支持的所有坐标系

sublayers Array

用户自定义的子图层参数

sublayers Array

子图层对象

title String

图层名称

tokenKey String

token名

tokenValue String

token值

type String

图层类型

url String

服务基地址

version String

WMS服务版本号

visible Number

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

成员变量详情

Array

# allSublayers

所有子图层对象信息

Polygon | Extent | Circle | MultiPolygon | null

# clippingArea

空间裁剪范围

String

版权所有

Inherited From:
Object

# customParameters

自定义查询参数customParameters

Inherited From:
String

# readonly description

图层描述

Inherited From:
Object

# extendOptions

初始化图层的额外参数

Inherited From:
Object

# extendProps

存储额外参数的属性

Inherited From:
Extent

# readonly extent

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

Inherited From:
String

# headers

设置服务请求头

Inherited From:
String

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Inherited From:
String

# imageFormat

图片格式

Array

# readonly imageFormats

图片格式数组,表示服务支持的所有图片格式

Number

# imageHeight

图片高度,单位px

Boolean

# imageTransparency

图层中的非数据部分是否透明

Number

# imageWidth

图片宽度,单位px

Number

# index

图层顺序

Inherited From:
String

# readonly layers

WMS服务要加载的图层id,多个id以逗号分割

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为不透明,会触发图层更新完毕事件

Inherited From:
SpatialReference

# spatialReference

图层坐标系对象

Inherited From:
Array.<SpatialReference>

# spatialReferences

图层支持的所有坐标系

Array

# sublayers

用户自定义的子图层参数

Array

# sublayers

子图层对象

String

# title

图层名称

Inherited From:
String

# tokenKey

token名

Inherited From:
Default Value:
  • token
String

# tokenValue

token值

Inherited From:
String

# readonly type

图层类型

Overrides:
String

# readonly url

服务基地址

String

# readonly version

WMS服务版本号

Overrides:
Number

# visible

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

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON

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

fromServerUrl WMSLayer

通过url创建图层对象

clone Layer

克隆方法

destroy *
findSublayerById IGSVectorTileSubLayer

根据子图层id查询图层

isLoaded Boolean

判断图层是否加载成功

load

加载图层资源

refresh

刷新图层

setSubLayer

通过图层名称或id来设置子图层,若找到相同图层仅会覆盖相同名称的参数,若没有则在最后新增一个

toJSON Object

转换为json对象

方法详情

# static fromJSON(jsonopt)

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

参数

名称 类型 描述
json Object

JSON对象

示例

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

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
const json = {
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer'
}
const wmsLayer = new WMSLayer.fromJSON(json)

# static fromServerUrl(url)

通过url创建图层对象

参数

名称 类型 描述
url String

服务基地址

新的图层对象

WMSLayer

# clone()

克隆方法

Inherited From:

图层

Layer

# destroy()

Inherited From:
*

# findSublayerById(sublayerID)

根据子图层id查询图层

参数

名称 类型 描述
sublayerID String

图层ID

子图层

IGSVectorTileSubLayer
示例

根据子图层id查询图层

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer'
});
map.add(wmsLayer);
// 根据id获取子图层
const wmsSubLayer = wmsLayer.findSublayerById(0)

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

# load()

加载图层资源

示例

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

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

# refresh()

刷新图层

Inherited From:

# setSubLayer(wmsSublayer)

通过图层名称或id来设置子图层,若找到相同图层仅会覆盖相同名称的参数,若没有则在最后新增一个

参数

名称 类型 描述
wmsSublayer WMSSubLayer | Object

子图层对象

示例

设置子图层参数

// ES5引入方式
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { WMSLayer } from "@mapgis/webclient-common"
// 初始化WMS图层
const wmsLayer = new WMSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer'
});
map.add(wmsLayer);
// 通过setSubLayer方法设置子图层显隐
// 通过图层id来设置显隐
wmsLayer.setSubLayer({
  id: 0,
  visible: false
})
// 或者通过图层名称设置显隐
wmsLayer.setSubLayer({
  name: "Map_Hubei4326:t1",
  visible: true
})

# 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);
    }
  }
});

# 子图层显隐更新完毕事件

子图层显隐更新完毕事件,请注意该事件是图层更新事件(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

事件接收对象

示例

子图层显隐更新完毕事件

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 === 'sublayerVisible'){
      console.log("子图层显隐更新完毕事件:", event);
    }
  }
});