Class: WMTSLayer

WMTSLayer

new WMTSLayer(options)

document/layer/ogc/WMTSLayer.js, line 22

WMTS 图层。

用于接入符合 WMTS 规范的瓦片服务，并根据子图层与 TileMatrixSet 组合构建实际瓦片请求参数。 图层会在加载阶段自动解析服务元信息，支持切换活动子图层、调整显示策略与控制裁图参数。

Name Type Default Description
options Object {} 可选

构造参数

Name Type Default Description
url String 可选

服务基地址，支持如下服务：
1、支持MapGIS的WMTS服务，格式为：
IGS1.0的基地址：http://{ip}:{port}/igs/rest/ogc/{folder}:{serviceName}/WMTSServer
IGS2.0的基地址：http://{ip}:{port}/igs/rest/services/{folder}/{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 | Object 可选

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

高程模式配置，仅在三维场景中生效；仅支持 ElevationMode.onTheScene 和 ElevationMode.onTheGround 两种模式，默认值为 ElevationMode.onTheGround。
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
isReverseXY Boolean | null null 可选

否翻转TopLeftCorner、BoundingBox的x、y坐标。默认为null，程序会根据已知服务发布厂商的规则计算该值，如果用户设置了该值则以用户设置的为准。
isReverseOriginXY Boolean | null null 可选

否翻转TopLeftCorner的x、y坐标。默认为null，程序会根据已知服务发布厂商的规则计算该值，如果用户设置了该值则以用户设置的为准。
tileDisplayStrategy TileDisplayStrategy TileDisplayStrategy.stretch 可选

当瓦片图层的显示比例尺范围，超出瓦片数据自身的级别后的显示策略
clippingArea Polygon | Extent | Circle | MultiPolygon | null null 可选

图层空间裁剪范围，仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪
Fires
  • Layer#event:图层加载完毕事件
  • Layer#event:图层销毁完毕事件
  • Layer#event:图层更新完毕事件
  • Layer#event:图层显隐更新完毕事件
  • Layer#event:图层透明度更新完毕事件
  • Layer#event:图层顺序更新完毕事件
  • Layer#event:图层刷新完毕事件
Examples

加载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}',
  activeLayer:{
     id: "city",
tileMatrixSetId: "EPSG:4326",
styleId: "point",
imageFormat: "image/png",
  }
})
// 将WMTS图层添加到Map中
map.add(layer)

切换活跃图层瓦片集

// ES5引入方式
const { WMTSLayer } = zondy.layer

// ES6引入方式
import { WMTSLayer } from "@mapgis/webclient-common"
// 初始化一个WMTS图层
const wmtsLayer = new WMTSLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/{path}',
  activeLayer:{
     id: "city",
tileMatrixSetId: "EPSG:4326",
styleId: "point",
imageFormat: "image/png",
  }
})

wmtsLayer.on("layerview-created", function (result) {
 // 切换活跃图层瓦片集
wmtsLayer.activeLayer.tileMatrixSetId = "EPSG:900913";
});
// 将WMTS图层添加到Map中
map.add(layer)

Extends

Members

activeLayerWMTSSubLayer

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

allSublayersCollection

所有子图层对象信息

autoAddTo2DBoolean

是否自动添加到二维引擎的地图对象。

该属性主要用于部分第三方引擎：图层的加载与添加由应用侧自行控制，而不是框架自动添加。

Default Value:
true

autoAddTo3DBoolean

是否自动添加到三维引擎的场景对象。

该属性主要用于部分第三方引擎：图层的加载与添加由应用侧自行控制，而不是框架自动添加。

Default Value:
true

capabilitiesObject

图层支持能力。

capabilities 通常由两部分组成：

  • client：客户端（渲染引擎）侧能力描述（如是否可加载、属性是否可读写等）
  • server：服务端能力描述（不同服务类型可扩展）

基类默认认为：所有引擎均支持加载该图层；服务端能力为空。

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围

版权所有

corporationTypeNumber

WMTS 公司代码

customLayerParametersObject

图层自定义查询参数customLayerParameters

customParametersObject

自定义查询参数customParameters

descriptionString

图层描述

elevationInfoElevationInfo

高程模式参数。仅支持 ElevationMode.onTheScene 和 ElevationMode.onTheGround 两种模式。

extendPropsObject

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

Default Value:
{}

extensionOptionsObject

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

Default Value:
{}

extentExtent null

图层的范围。从元信息或数据中获取，默认为null表示取不到范围。

forceRefreshDebounceDelayNumber

强制刷新防抖延迟（毫秒）。

某些引擎实现会将刷新请求做合并/防抖处理，该参数用于控制防抖窗口。

Default Value:
5

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

isReverseOriginXYBoolean

否翻转TopLeftCorner（裁图原点）的x、y坐标

isReverseXYBoolean

是否翻转x，y坐标

loadErrorObject

请求失败后的错误信息，toJSON方法不会导出该属性

Default Value:
null

loadStatusString

图层加载状态

Default Value:
not-loaded

loadedBoolean

是否加载完毕

Default Value:
false

maxScaleNumber

最大显示比例尺，图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。maxScale应该始终小于minScale。

Default Value:
0

minScaleNumber

最小显示比例尺，图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。minScale应该始终大于maxScale。

Default Value:
0

opacityNumber

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

spatialReferenceSpatialReference null

图层坐标系对象

sublayersCollection.<WMTSSubLayer> null

WMTSSublayer 子图层对象的集合

tileDisplayStrategyTileDisplayStrategy

当瓦片图层的显示比例尺范围，超出瓦片数据自身的级别后的显示策略

tileMatrixSetsArray.<TileMatrixSet>

图块矩阵集的集合

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:
token

tokenValueString

token值

typeLayerType

图层类型

urlString

服务基地址

versionString

WMTS服务版本号

visibleBoolean

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

Events

inherited layer-update

document/layer/baseLayer/Layer.js, line 126

图层属性更新事件。

当调用 refresh()、setProperty() 或图层内部主动触发更新时，会向 Map/View 分发该事件。 该事件主要用于渲染层同步图层状态。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

Properties
Name Type Default Description
type String 'layer-update' 可选

事件类型
layer Layer 可选

图层对象
updateContent Array.<Object> 可选

更新详情
Example

Create Layer instance

// ES5 import style
const { Layer } = zondy

// ES6 import style
import { Layer } from '@mapgis/webclient-common'

inherited layerview-created

document/layer/baseLayer/Layer.js, line 52

图层在视图中创建完毕事件。

当图层被添加到 View，并且该引擎对应的图层视图对象创建成功后触发。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-created' 可选

事件类型
message String null 可选

描述信息
layer Layer null 可选

图层对象
layerView * null 可选

图层视图对象（不同引擎类型不同）
sourceTarget * null 可选

事件发起对象
target * null 可选

事件接收对象（通常为 View/Map）
Example
layer.on('layerview-created', (event) => {
  console.log('图层视图创建完毕', event.layer, event.layerView)
})

inherited layerview-remove

document/layer/baseLayer/Layer.js, line 71

图层从视图中移除事件。

当图层从 View 移除，并且对应的图层视图对象已释放后触发。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-remove' 可选

事件类型
message String null 可选

描述信息
layer Layer null 可选

图层对象
layerView * null 可选

图层视图对象
sourceTarget * null 可选

事件发起对象
target * null 可选

事件接收对象（通常为 View/Map）
Example
layer.on('layerview-remove', (event) => {
  console.log('图层视图已移除', event.layer)
})

inherited layerview-scale-visible

document/layer/baseLayer/Layer.js, line 109

图层比例尺显示/隐藏状态更新事件。

该事件由 View 层在比例尺变化导致图层显示状态（因 minScale/maxScale 约束）变化时触发。 当前仅支持非组图层以及场景子图层。

Properties:
Name Type Description
event Object

事件对象

Properties
Name Type Default Description
type String 'layerview-scale-visible' 可选

事件类型
target * 可选

事件接收对象
sourceTarget * 可选

事件发起对象
Example
layer.on('layerview-scale-visible', (event) => {
  console.log('比例尺可见性变更', event)
})

inherited layerview-update

document/layer/baseLayer/Layer.js, line 90

图层视图更新事件。

该事件通常由 View 层触发，用于通知外部“渲染层已完成一次图层更新”。 event.updateContent 中会描述本次更新涉及的属性或方法（例如：visible、opacity、refresh）。

Properties:
Name Type Description
event LayerViewUpdateEvent

事件对象

Properties
Name Type Description
updateContent Array.<Object> 可选

更新详情数组
Example
layer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  const hasVisibleChange = updateContent.some((c) => c.name === 'visible')
  const hasOpacityChange = updateContent.some((c) => c.name === 'opacity')
  const hasRefresh = updateContent.some((c) => c.name === 'refresh')
  console.log('更新完毕', { hasVisibleChange, hasOpacityChange, hasRefresh })
})

Methods

_getBoundingBoxBySpatialReference(boundingBoxes, spatialReference){Object}

document/layer/ogc/WMTSLayer.js, line 706

从BoundingBox数组中找到坐标系和输入的参考坐标系相同的BoundingBox，没有找到则取第一个

Name Type Description
boundingBoxes Array.<Object>

BoundingBox数组，格式为： [{ xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax, crs: SpatialReference },...]
spatialReference SpatialReference

参考坐标系对象
Returns:
Type Description
Object 找到的BoundingBox对象，可能为空，格式为： { xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax, crs: SpatialReference }

clone(){WMTSLayer}

document/layer/ogc/WMTSLayer.js, line 527

克隆WMTSLayer对象

Returns:
Type Description
WMTSLayer 克隆后的WMTSLayer实例

inherited destroy(){void}

document/layer/baseLayer/Layer.js, line 594

销毁图层。

基类不做具体释放逻辑，子类可根据需要重写（例如：释放请求、解绑引擎对象等）。

Returns:
Type Description
void

findSublayerById(id){WMTSSubLayer}

document/layer/ogc/WMTSLayer.js, line 624

根据 id 查询子图层

Name Type Description
id Object

子图层的id
Returns:
Type Description
WMTSSubLayer 找到的子图层对象

getCurrentTileInfo(){TileInfo}

document/layer/ogc/WMTSLayer.js, line 535

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

Returns:
Type Description
TileInfo

inherited getProperty(path){*}

document/layer/baseLayer/Layer.js, line 825

获取属性或属性路径对应的值。

Name Type Description
path String

属性路径
Returns:
Type Description
* 属性值

inherited isLoaded(){Boolean}

document/layer/baseLayer/Layer.js, line 530

判断图层是否加载成功

Returns:
Type Description
Boolean 图层是否加载成功

load()

document/layer/ogc/WMTSLayer.js, line 565

加载图层资源

Example

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

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

inherited refresh(){void}

document/layer/baseLayer/Layer.js, line 743

刷新图层。

该方法会触发 layer-update 事件（若图层已添加到地图且已加载），用于通知渲染层重新拉取/绘制。

Returns:
Type Description
void

inherited setMap(map){void}

document/layer/baseLayer/Layer.js, line 581

设置图层所属的地图/场景管理容器。

该方法通常由 Map 在添加图层时调用，外部一般无需手动调用。

Name Type Description
map *

地图/场景管理对象（不同引擎类型不同）
Returns:
Type Description
void

inherited setProperty(path, value){Boolean}

document/layer/baseLayer/Layer.js, line 777

设置属性值或属性路径对应的值。

由于默认仅支持第一级属性响应，此方法提供“属性路径”写入能力。 例如：setProperty('tileInfo.startLevel', 3) 可更新 tileInfo.startLevel。

若设置的是多级属性路径，会额外触发一次 layer-update 事件（updateContent.name 为路径字符串）。

Name Type Description
path String

属性路径，可以传入单个属性后者一个属性的路径
value *
Returns:
Type Description
Boolean 是否设置成功

toJSON(){Object}

document/layer/ogc/WMTSLayer.js, line 493

转换为 JSON 对象

Returns:
Type Description
Object JSON 对象

WMTSLayer.fromJSON(json)

document/layer/ogc/WMTSLayer.js, line 480

通过传入的 JSON 构造并返回一个新的图层对象

Name Type Description
json Object 可选

JSON 对象
Example

通过传入的 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 = WMTSLayer.fromJSON(json)

WMTSLayer.fromServerUrl(url){WMTSLayer}

document/layer/ogc/WMTSLayer.js, line 1008

通过url创建图层对象

Name Type Description
url String

服务基地址
Returns:
Type Description
WMTSLayer 新的图层对象
Example

通过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);