# 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 | 服务基地址,支持的服务如下: |
|
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的图片 |
maxScale |
Number | 19 | 最大缩放级数,仅会请求级数小于等于maxScale的图片 |
imageTransparency |
Boolean | true | 图片中没有数据的地方是否透明,默认为true,即透明 |
clippingArea |
Polygon | Extent | Circle | null | null | 图层空间裁剪范围,仅支持多边形裁剪、矩形裁剪、圆形裁剪 |
sublayers |
Array | [] | 指定子图层参数,可设置子图层是否显示,若不填则显示所有子图层,若有值则只显示visible为true的子图层, |
tokenKey |
String | 'token' | token名 |
tokenValue |
String | token值,只有当tokenValue存在时,才会绑定token |
支持如下方法:
[1、加载图层资源][2、设置子图层参数]
[3、根据子图层id查询图层]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象
6、克隆几何对象
示例
// ES5引入方式
const { Map, MapView } = Zondy
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, WMSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化二维地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化wms图层
const wmsLayer = new WMSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMSServer'
});
// 将图层加入容器中
map.add(wmsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
mapView.flyTo({
extent: result.layer.extent
})
})
// 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
});
// 将图层加入容器中
map.add(wmsLayer);
// 加载完成后设置
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 设置透明度
wmsLayer.opacity = 0.5
})
// 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
});
// 将图层加入容器中
map.add(wmsLayer);
// 加载完成后设置
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 显示或隐藏图层
wmsLayer.visible = !wmsLayer.visible
})
// 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.add(wmsLayer);
map.remove(wmsLayer)
// ES5引入方式
const { Map, MapView } = Zondy
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, WMSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化二维地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化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
})
});
// 将图层加入容器中
map.add(wmsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
mapView.flyTo({
extent: result.layer.extent
})
})
// ES5引入方式
const { Map, MapView } = Zondy
const { WMSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, WMSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapView({
// 视图id
viewId: "mapgis-3d-viewer",
// 图层管理容器
map: map
});
// 初始化WMS图层
const wmsLayer = new WMSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{ServiceName}/WMSServer',
// 要显示的子图层,若不填,则默显示所有子图层
sublayers: [{
id: 0,
visible: true
}, {
id: 1,
visible: true
}]
});
map.add(wmsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
mapView.flyTo({
extent: result.layer.extent
})
})
// 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来设置显隐
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'
});
// 添加到容器中
map.add(wmsLayer);
// 根据id获取子图层
const wmsSubLayer = wmsLayer.findSublayerById(0)
// 设置子图层显隐
wmsSubLayer.visible = false
继承关系
成员变量
方法
# static fromJSON(jsonopt)
参数:
名称 | 类型 | 描述 |
---|---|---|
json |
Object | 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)
# findSublayerById(sublayerID)
参数:
名称 | 类型 | 描述 |
---|---|---|
sublayerID |
String | 图层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)
# 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)
})
# off(typesopt, fnopt, contextopt)
移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]
参数:
名称 | 类型 | 描述 |
---|---|---|
types |
string | 移除指定事件类型上绑定的回调函数 |
fn |
function | 事件回调函数,当types为字符串,且不指定要删除的回调函数时,删除该事件上的所有回调函数 |
context |
Object | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
移除一个事件的指定回调函数
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction)
移除一个事件的所有回调函数
// 一个事件的回调函数1
const clickFunction1 = function (event) {
console.log("点击事件1:", event)
}
// 一个事件的回调函数2
const clickFunction2 = function (event) {
console.log("点击事件2:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
// 不指定回调函数,则移除该事件上的所有绑定的回调函数
view.off('click')
移除多个事件的同一个指定的回调函数
// 多个事件的同一个回调函数
const eventFunction = function (event) {
console.log("事件:", event)
}
// 调用MapView或SceneView的off方法移除多个事件的同一个指定的回调函数
view.off('click double-click', eventFunction)
移除多个指定事件的回调函数
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
// 移除click事件上一个指定的函数
"click": clickFunction,
// 移除double-click上所有指定的函数
"double-click": undefined
})
删除时指定上下文 - types类型为字符串
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的off方法移除一个事件的回调函数
view.off('click', clickFunction, view)
// 调用MapView或SceneView的off方法移除一个事件的所有回调函数
view.off('click', undefined, view)
删除时指定上下文 - types类型为对象
// 一个事件的回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 调用MapView或SceneView的off方法移除多个指定事件的回调函数
view.off({
// 移除click事件上一个指定的函数
"click": clickFunction,
// 移除double-click上所有指定的函数
"double-click": undefined
}, view)
# on(typesopt, fnopt, contextopt)
注册一个新的监听事件;
示例如下:
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
types |
String | Object | null | 事件类型 |
fn |
function | null | 事件回调函数 |
context |
Object | null | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
注册一个事件
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
}
// 调用MapView或SceneView的on方法注册一个点击事件
view.on('click', clickFunction)
一次注册多个事件 - 同一个回调函数
// 初始化一个事件回调函数
const eventFunction = function (event) {
console.log("事件:", event)
}
// 调用MapView或SceneView的on方法注册多个事件
// 多个事件类型使用同一个回调函数
view.on('click right-click-down', eventFunction)
一次注册多个事件 - 分别指回调应函数
// 初始化一个左键点击事件回调函数
const clickFunction = function (event) {
console.log("click事件:", event)
}
// 初始化一个右键按下事件回调函数
const rightClickFunction = function (event) {
console.log("right-click-down事件:", event)
}
// 调用MapView或SceneView的on方法注册多个事件
// 每一个事件类型,使用单独的回调函数
// 注意使用此种方式,一种类型的事件仅能指定一个回调函数
view.on({
"click": clickFunction,
"right-click-down": rightClickFunction
})
指定上下文 - types类型为字符串
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on('click', clickFunction, view)
指定上下文 - types类型为对象
// 初始化一个点击事件回调函数
const clickFunction = function (event) {
console.log("点击事件:", event)
console.log("上下文对象:", this)
}
// 调用MapView或SceneView的on方法注册一个点击事件
// 指定view为回调函数的上下文对象
view.on({
"click": clickFunction,
"right-click-down": clickFunction
}, view)
# setSubLayer(wmsSublayer)
参数:
名称 | 类型 | 描述 |
---|---|---|
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
})
事件
# 图层刷新完毕事件
图层刷新完毕事件,请注意该事件是图层更新事件(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);
}
}
});