类名 WMTSLayer

# new WMTSLayer(options)

WMTS图层,
除了支持常见的4326(包括4490,4214以及4610),3857参考系以外,还支持能在EPSG官网(https://epsg.io/)上查询到的坐标系
会自动读取图层元信息,不需要用户手动设置
WMTS图层中存在多个子图层,每个子图层中又有多个TileMatrixSet,因此每个子图层以及其对应的每一个TileMatrixSet,都对应一套实际的瓦片数据,默认会使用第0个图层的第0个TileMatrixSet来构建图层,同时用户也可以自己指定要加载的子图层,可以参考示例:[指定要激活的子图层]

[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

服务基地址,支持如下服务:
1、支持MapGIS的WMTS服务,格式为:
IGS1.0的基地址:http://{ip}:{port}/igs/rest/ogc/{ServiceName}/WMTSServer
IGS2.0的基地址:http://{ip}:{port}/igs/rest/services/{ServiceName}/WMTSServer
请注意,当在IGS中发布自定义坐标系的WMTS服务时,可能会有部分地图无法正确的进行预览, 并且该服务中的范围参数是错误的,请自行指定跳转范围,或从该服务对应的瓦片服务中获取,参考示例:[加载MapGIS的WMTS服务]
2、支持ArcGIS的WMTS服务,格式为:http://{ip}:{port}/arcgis/rest/services/{ServiceName}/MapServer/WMTS,参考示例:[加载ArcGIS的WMTS服务]
3、支持天地图的WMTS服务:格式为:http://t{0~6的随机数}.tianditu.gov.cn/{图层类型}_{坐标系}/wmts,
其中天地图层类型如下:
vec:矢量底图、img:卫星影像底图、cva: 矢量注记图层(中文)、eva: 矢量注记图层(英文)、cia: 注记图层(中文)、eia: 注记图层(英文)、ter: 地形晕渲底图、cta: 注记(中文)、ibo: 全球国界
坐标系如下:
w:墨卡托坐标系(3857)、c:经纬度坐标系(4326)
参考示例:[加载天地图的WMTS服务]

activeLayer WMTSSubLayer

当前处于活动状态的子图层,会用该子图层来构建整个图层的参数,默认会使用第0个图层的第0个TileMatrixSet来构建图层,同时用户也可以自己指定要加载的子图层,可以参考示例:[指定要激活的子图层]

opacity Number 1

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

visible Boolean true

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

minScale Number 0

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

maxScale Number 0

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

tokenKey String 'token'

token名

tokenValue String

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

clippingArea Polygon | Extent | Circle | MultiPolygon | null null

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

支持如下方法:
[1、加载图层资源]
[2、根据子图层id查询图层]
[3、通过url创建图层对象]
[4、通过传入的json构造并返回一个新的几何对象]
[5、获取当前图层瓦片裁图信息]
6、导出为json对象
7、克隆几何对象

示例

加载WMTS图层

// ES5引入方式
const { WMTSLayer } = zondy.layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化WMTS图层
const wmtsLayer = new WMTSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/WMTSServer'
});

添加ArcGIS的WMTS图层示例

// ES5引入方式
const { WMTSLayer } = zondy.layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化WMTS图层
const wmtsLayer = new WMTSLayer({
  url: 'http://{ip}:{port}/arcgis/rest/services/{serviceName}/MapServer/WMTS'
});

加载天地图的WMTS服务

// ES5引入方式
const { WMTSLayer } = zondy.layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
初始化WMTS图层
const wmtsLayer = new WMTSLayer({
  // 加载经纬度的影像地图
  url: 'http://t6.tianditu.gov.cn/img_c/wmts',
  // 天地图必须加token,且token名为tk
  tokenKey: 'tk',
  // token请在天地图官网申请
  tokenValue: '天地图token'
});

修改图层透明度

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

// 加载完成后设置
wmtsLayer.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
});

// 加载完成后设置
wmtsLayer.on('layerview-created', function (result) {
  console.log("加载完毕:", result.layer)
  // 设置图层显隐
  wmtsLayer.visible = !wmtsLayer.visible
})

删除图层

map.remove(wmtsLayer)

指定要激活的子图层

// ES5引入方式
const { WMTSLayer } = zondy.layer
// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化一个WMTS图层
const wmtsLayer = new WMTSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/{path}'
})
// 加载图层元信息
wmtsLayer.load().then(function (layer) {
  // 从子图层列表中,获取一个子图层
  const subLayer = layer.sublayers.getItemAt(0)
  // 每一个子图层中,有多个tileMatrixSet,一个tileMatrixSet代表了一个坐标系
  // 指定子图层的tileMatrixSetId
  subLayer.tileMatrixSetId = subLayer.tileMatrixSets[1].identifier
  // 指定当前激活的子图层
  layer.activeLayer = subLayer
})
// 将WMTS图层添加到Map中
map.add(layer)

继承关系

成员变量

成员变量概述

名称 类型 描述
activeLayer WMTSSubLayer

当前处于活动状态的子图层

clippingArea Polygon | Extent | Circle | MultiPolygon | null

空间裁剪范围

copyright String

版权所有

corporationType String

WMTS 公司代码

customParameters Object

自定义查询参数customParameters

description String

图层描述

extendProps Object

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

extensionOptions Object

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

extent Extent

图层范围

headers String

设置服务请求头

httpMethod FetchMethod

http请求方式

id String

图层id

index Number

图层顺序

loaded Boolean

是否加载完毕

loadStatus String

图层加载状态

maxScale Number

最大缩放比例尺

minScale Number

最小缩放比例尺

opacity Number

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

spatialReference SpatialReference

空间参考

sublayers Array.<WMTSSubLayer>

WMTSSublayer 子图层对象的集合

tileMatrixSets Array.<TileMatrixSet>

图块矩阵集的集合

title String

图层名称

tokenAttachType String

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

tokenKey String

token名

tokenValue String

token值

type type

图层类型

url String

服务基地址

version String

ogc版本号

visible Number

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

成员变量详情

WMTSSubLayer

# activeLayer

当前处于活动状态的子图层

Polygon | Extent | Circle | MultiPolygon | null

# clippingArea

空间裁剪范围

String

版权所有

Inherited From:
String

# readonly corporationType

WMTS 公司代码

Object

# customParameters

自定义查询参数customParameters

Inherited From:
String

# readonly description

图层描述

Inherited From:
Object

# extendProps

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

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

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

Inherited From:
Default Value:
  • {}
Extent

# extent

图层范围

Overrides:
String

# headers

设置服务请求头

Inherited From:
FetchMethod

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Inherited From:
Number

# index

图层顺序

Inherited From:
Boolean

# readonly loaded

是否加载完毕

Overrides:
Default Value:
  • false
String

# readonly loadStatus

图层加载状态

Overrides:
Default Value:
  • not-loaded
Number

# maxScale

最大缩放比例尺

Overrides:
Number

# minScale

最小缩放比例尺

Overrides:
Number

# opacity

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

Inherited From:
SpatialReference

# readonly spatialReference

空间参考

Overrides:
Array.<WMTSSubLayer>

# readonly sublayers

WMTSSublayer 子图层对象的集合

Array.<TileMatrixSet>

# readonly tileMatrixSets

图块矩阵集的集合

String

# title

图层名称

Overrides:
String

# tokenAttachType

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

Inherited From:
String

# tokenKey

token名

Inherited From:
Default Value:
  • token
String

# tokenValue

token值

Inherited From:
type

# readonly type

图层类型

Overrides:
String

# readonly url

服务基地址

String

# version

ogc版本号

Inherited From:
Number

# visible

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

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON

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

fromServerUrl WMTSLayer

通过url创建图层对象

clone Layer

克隆方法

destroy *
findSublayerById WMTSSubLayer

根据id查询子图层

getCurrentTileInfo TileInfo

获取当前图层瓦片裁图信息

isLoaded Boolean

判断图层是否加载成功

load

加载图层资源

refresh

刷新图层

toJSON Object

转换为json对象

方法详情

# static fromJSON(jsonopt)

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

参数

名称 类型 描述
json Object

JSON对象

示例

通过传入的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创建图层对象

参数

名称 类型 描述
url String

服务基地址

新的图层对象

WMTSLayer
示例

通过url创建图层对象

// 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);

# clone()

克隆方法

Inherited From:

图层

Layer

# destroy()

Inherited From:
*

# findSublayerById(id)

根据id查询子图层

参数

名称 类型 描述
id Object

子图层的id

找到的子图层对象

WMTSSubLayer

# getCurrentTileInfo()

获取当前图层瓦片裁图信息

TileInfo

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

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

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