new WMTSLayer(options)
支持如下方法:
[1、加载图层资源][2、根据子图层id查询图层]
[3、通过url创建图层对象]
[4、通过传入的json构造并返回一个新的几何对象]
[5、获取当前图层瓦片裁图信息]
6、导出为json对象7、克隆几何对象
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') {
// 你的业务逻辑
}
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
构造参数
|
Fires
- Layer#event:图层加载完毕事件
- Layer#event:图层销毁完毕事件
- Layer#event:图层更新完毕事件
- Layer#event:图层显隐更新完毕事件
- Layer#event:图层透明度更新完毕事件
- Layer#event:图层顺序更新完毕事件
- Layer#event:图层刷新完毕事件
Examples
// 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'
});
// 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'
});
// 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
-
所有子图层对象信息
-
capabilitiesObject
-
图层支持能力。图层支持能力分为客户端能力和服务端能力,其中客户端能力包含cesium、leaflet、mapboxgl引擎能力。默认图层客户端能力:所有引擎支持图层加载;默认图层服务端能力为空。
-
clippingAreaPolygon Extent Circle MultiPolygon null
-
空间裁剪范围
-
clippingAreaPolygon Extent Circle MultiPolygon null
-
空间裁剪范围
-
copyrightString
-
版权所有
-
corporationTypeNumber
-
公司代码
-
corporationTypeNumber
-
WMTS 公司代码
-
customParametersObject
-
自定义查询参数customParameters
-
descriptionString
-
图层描述
-
extendPropsObject
-
额外属性,当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中
- Default Value: {}
extensionOptionsObject
初始化图层的额外参数,可以通过该参数传入引擎原生的构造参数
- Default Value: {}
extentExtent null
图层的范围。从元信息或数据中获取,默认为null表示取不到范围。
headersObject
设置服务请求头
httpMethodFetchMethod
http请求方式
idString
图层id
loadedBoolean
是否加载完毕
- Default Value: false
loadErrorObject
请求失败后的错误信息,toJSON方法不会导出该属性
- Default Value: null
loadStatusString
图层加载状态
- Default Value: not-loaded
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附加类型。默认psot请求优先附加到body,get请求优先附加到url末尾
tokenKeyString
token名
- Default Value: token
tokenValueString
token值
typeLayerType
图层类型
urlString
服务基地址
versionString
ogc版本号
visibleNumber
图层显示或隐藏,true则显示,false则隐藏,会触发图层更新完毕事件
Events
-
inherited 图层加载完毕事件
document/layer/baseLayer/Layer.js, line 46 -
图层加载完毕事件
Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-created' 可选 图层加载完毕事件
messageString null 可选 更新描述
UpdateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层加载完毕事件 Layer.on('layerview-created', function (result) { console.log("加载完毕:", result.layer) }); -
inherited 图层显隐更新完毕事件
document/layer/baseLayer/Layer.js, line 90 -
图层显隐更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层显隐更新完毕事件
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); } } }); -
inherited 图层比例尺显示隐藏状态更新事件。当前仅支持非组图层以及场景子图层
document/layer/baseLayer/Layer.js, line 144 -
图层刷新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
eventLayerViewScaleVisibleEvent 事件对象 layer.on('layerview-scale-visible', (event) => { console.log("图层比例尺显示隐藏状态更新事件:", event) })
Example
图层刷新完毕事件
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); } } }); /** -
inherited 图层视图更新事件
document/layer/baseLayer/Layer.js, line 80 -
图层视图更新事件
Properties:
Name Type Description eventLayerViewUpdateEvent 事件对象
Example
图层更新完毕事件 Layer.on('layerview-update', function (result) { console.log("更新完毕:", result.layer) }); -
inherited 图层透明度更新完毕事件
document/layer/baseLayer/Layer.js, line 117 -
图层透明度更新完毕事件,请注意该事件是图层更新事件(layerview-update)的子事件
Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层透明度更新完毕事件
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); } } }); -
inherited 图层销毁完毕事件
document/layer/baseLayer/Layer.js, line 63 -
图层销毁完毕事件
Properties:
Name Type Description eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-remove' 可选 图层销毁完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 要销毁的地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层销毁完毕事件 Layer.on('layerview-remove', function (result) { console.log("销毁完毕:", result.layer) });
Methods
-
WMTSLayer.fromJSON(json)
document/layer/ogc/WMTSLayer.js, line 505 -
Name Type Description jsonObject 可选 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 = new WMTSLayer.fromJSON(json) -
WMTSLayer.fromServerUrl(url){WMTSLayer}
document/layer/ogc/WMTSLayer.js, line 1085 -
Name Type Description urlString 服务基地址
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); -
_getBoundingBoxBySpatialReference(boundingBoxes, spatialReference){Object}
document/layer/ogc/WMTSLayer.js, line 752 -
从BoundingBox数组中找到坐标系和输入的参考坐标系相同的BoundingBox,没有找到则取第一个
Name Type Description boundingBoxesArray.<Object> BoundingBox数组,格式为: [{ xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax, crs: SpatialReference },...]
spatialReferenceSpatialReference 参考坐标系对象
Returns:
Type Description Object 找到的BoundingBox对象,可能为空,格式为: { xmin: xmin, ymin: ymin, xmax: xmax, ymax: ymax, crs: SpatialReference } -
clone(){WMTSLayer}
document/layer/ogc/WMTSLayer.js, line 551 -
克隆WMTSLayer对象
Returns:
Type Description WMTSLayer 克隆后的WMTSLayer实例 -
inherited destroy(){*}
document/layer/baseLayer/Layer.js, line 618 -
Returns:
Type Description * -
findSublayerById(id){WMTSSubLayer}
document/layer/ogc/WMTSLayer.js, line 666 -
Name Type Description idObject 子图层的id
Returns:
Type Description WMTSSubLayer 找到的子图层对象 -
getCurrentTileInfo(){TileInfo}
document/layer/ogc/WMTSLayer.js, line 559 -
Returns:
Type Description TileInfo -
inherited getProperty(path){*}
document/layer/baseLayer/Layer.js, line 818 -
获取属性
Name Type Description pathString Returns:
Type Description * 属性值 -
inherited isLoaded(){Boolean}
document/layer/baseLayer/Layer.js, line 543 -
判断图层是否加载成功
Returns:
Type Description Boolean 图层是否加载成功 -
load()
document/layer/ogc/WMTSLayer.js, line 593 -
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()
document/layer/baseLayer/Layer.js, line 747 -
刷新图层
-
inherited setProperty(path, value){Boolean}
document/layer/baseLayer/Layer.js, line 778 -
设置属性值或者属性路径对应的值。由于当前仅支持第一级属性响应,无法解决多级属性响应机制,此方法支持属性路径响应机制。例如:path输入'tileInfo.startLevel',则会响应式更新startLevel。
Name Type Description pathString 属性路径,可以传入单个属性后者一个属性的路径
value* Returns:
Type Description Boolean 是否设置成功 -
toJSON(){Object}
document/layer/ogc/WMTSLayer.js, line 518 -
转换为json对象
Returns:
Type Description Object json对象