# new WMTSLayer(options)
WMTS图层，
目前二维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，三维上仅支持4326(包括4490，4214以及4610)以及3857坐标系，WMTS服务会自动读取元信息上的坐标系，不需要用户指定
[ES5引入方式]：
Zondy.Layer.WMTSLayer()
[ES6引入方式]：
import { WMTSLayer } from "@mapgis/webclient-common"
针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码，则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}
参数:
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
options |
Object | 构造参数 |
|
url |
String | 服务基地址，支持如下服务： |
|
opacity |
Number | 1 | 图层透明度，0到1之间的值，0为完全透明，1为不透明，参考示例：[修改图层透明度] |
visible |
Boolean | true | 图层显示或隐藏，true则显示，false则隐藏，参考示例：[设置图层显隐] |
minScale |
Number | 0 | 最小缩放级数，仅会请求级数大于等于minScale的图片 |
maxScale |
Number | 19 | 最大缩放级数，仅会请求级数小于等于maxScale的图片 |
tokenKey |
String | 'token' | token名 |
tokenValue |
String | token值，只有当tokenValue存在时，才会绑定token |
|
clippingArea |
Polygon | Extent | Circle | null | null | 图层空间裁剪范围，仅支持多边形裁剪、矩形裁剪、圆形裁剪 |
支持如下方法：
[1、加载图层资源][2、根据子图层id查询图层]
[3、通过url创建图层对象]
[4、通过传入的json构造并返回一个新的几何对象]
5、导出为json对象6、克隆几何对象
示例
// ES5引入方式
const { Map, MapView, SceneView } = Zondy
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, SceneView, WMTSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化二维地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化三维地图视图对象
const mapView = new SceneView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化WMTS图层
const wmtsLayer = new WMTSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer'
});
// 将图层加入容器中
map.add(wmtsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
sceneView.flyTo({
extent: result.layer.extent
})
});// ES5引入方式
const { Map, MapView, SceneView } = Zondy
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, SceneView, WMTSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化二维地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化三维地图视图对象
const mapView = new SceneView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化WMTS图层
const wmtsLayer = new WMTSLayer({
url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer/WMTS'
});
// 将图层加入容器中
map.add(wmtsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
sceneView.flyTo({
extent: result.layer.extent
})
});// ES5引入方式
const { Map, MapView, SceneView } = Zondy
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { Map, MapView, SceneView, WMTSLayer } from "@mapgis/webclient-common"
// 初始化图层管理容器
const map = new Map();
// 初始化二维地图视图对象
const mapView = new MapView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
// 初始化三维地图视图对象
const mapView = new SceneView({
// 视图id
viewId: "viewer-id",
// 图层管理容器
map: map
});
初始化WMTS图层
const wmtsLayer = new WMTSLayer({
// 加载经纬度的影像地图
url: 'http://t6.tianditu.gov.cn/img_c/wmts',
// 天地图必须加token，且token名为tk
tokenKey: 'tk',
// token请在天地图官网申请
tokenValue: '天地图token'
});
// 将图层加入容器中
map.add(wmtsLayer);
// 图层加载完毕
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 视点跳转
sceneView.flyTo({
extent: result.layer.extent
})
});// ES5引入方式
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化时设置
const wmtsLayer = new WMTSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer',
// 设置透明度
opacity: 1.0
});
// 将图层加入容器中
map.add(wmtsLayer);
// 加载完成后设置
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 设置透明度
wmtsLayer.opacity = 0.5
})// ES5引入方式
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化时设置
const wmtsLayer = new WMTSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer',
// 设置图层显隐
visible: true
});
// 将图层加入容器中
map.add(wmtsLayer);
// 加载完成后设置
wmsLayer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
// 设置图层显隐
wmtsLayer.visible = !wmtsLayer.visible
})map.remove(wmtsLayer)继承关系
成员变量
方法
# static fromJSON(jsonopt)
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
json |
Object | JSON对象 |
示例
// ES5引入方式
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
const json = {
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer'
}
const wmtsLayer = new WMTSLayer.fromJSON(json)# static fromServerUrl(url)
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
url |
String | 服务基地址 |
新的图层对象
示例
// ES5引入方式
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化图层
const url = 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer';
const wmtsLayer = new WMTSLayer.fromServerUrl(url);# load()
示例
// ES5引入方式
const { WMTSLayer } = Zondy.Layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化图层
const wmtsLayer = new WMTSLayer({
// 服务基地址
url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer'
});
wmtsLayer.load().then((result) => {
// 获取完图层信息
console.log(wmtsLayer)
})# off(typesopt, fnopt, contextopt)
移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]
参数:
| 名称 | 类型 | 描述 |
|---|---|---|
types |
string | 移除指定事件类型上绑定的回调函数 |
fn |
function | 事件回调函数，当types为字符串，且不指定要删除的回调函数时，删除该事件上的所有回调函数 |
context |
Object | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
Object
示例
移除一个事件的指定回调函数
// 一个事件的回调函数
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:
当前实例
Object
示例
注册一个事件
// 初始化一个点击事件回调函数
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)事件
# 图层刷新完毕事件
图层刷新完毕事件，请注意该事件是图层更新事件(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);
}
}
});