MapGIS Client for JavaScript API

new VectorTileLayer(options)

document/layer/baseLayer/VectorTileLayer.js, line 20

支持如下方法：

[1、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层对象]
[2、通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层的序号]
[3、通过矢量瓦片样式图层的序号，找到对应的矢量瓦片样式图层的id]
[4、设置样式图层属性对象]
[5、删除样式图层]
[6、设置样式图层可见性]
[7、获取样式图层可见性]
[8、获取样式图层绘制属性]
[9、设置样式图层绘制属性]
[10、获取样式图层布局属性]
[11、设置样式图层布局属性]
[14、通过传入的json构造并返回一个新的VectorTileLayer对象]
[15、转换为json对象]
[16、克隆方法]

矢量瓦片图层基类

可通过重写VectorTileLayer的load方法，来自定义矢量瓦片业务逻辑，示例如下：
[自定义矢量瓦片业务逻辑-es5]，[自定义矢量瓦片业务逻辑-es6]

Name Type Description

options

Object

构造参数

Name	Type	Default	Description
`url`	String	null	可选服务基地址
`opacity`	Number	1	可选图层透明度，0到1之间的值，0为完全透明，1为不透明
`minScale`	Number	0	可选最小显示比例尺，图层在视图中可见的最小比例尺。
`maxScale`	Number	0	可选最大显示比例尺，图层在视图中可见的最大比例尺。
`tokenKey`	String	'token'	可选 token名
`tokenValue`	String	null	可选 token值，只有当tokenValue存在时，才会绑定token
`tileDisplayStrategy`	TileDisplayStrategy	TileDisplayStrategy.stretch	可选当瓦片图层的显示比例尺范围，超出瓦片数据自身的级别后的显示策略
`labelsRenderMode`	String	'off-screen'	可选指定矢量瓦片注记的渲染模式,仅在三维上有效 on-screen: 使用Cesium接口实时渲染注记 off-screen: 使用矢量瓦片来绘制注记三维注记目前不支持修改透明度和显隐参数请注意模式切换时，会造成性能损失，在显卡较弱的机器上会出现卡顿现象示例请参考`IGSVectorTileLayer`
`clippingArea`	Polygon \| Extent \| Circle \| MultiPolygon \| null	null	可选图层空间裁剪范围，仅支持多多边形裁剪、多边形裁剪、矩形裁剪、圆形裁剪

Fires

Examples

自定义矢量瓦片业务逻辑-es5

// ES5引入方式
const { VectorTileLayer } = zondy.layer
// ES6引入方式
import { VectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const vectorTileLayerCustom = new VectorTileLayer({
  // 矢量瓦片基地址
  url: ''
});
// 例如通过重写vectorTileLayerCustom对象的load方法，来自定义矢量瓦片业务逻辑
vectorTileLayerCustom.load = (customStyle) => {
  // 你自己的业务逻辑，必须完成如下步骤
  // 1 初始化参考系
  // this.spatialReference = 参考系
  // 2 设置图层瓦片参数
  // this.tileInfo = 图层瓦片参数
  // 3 设置图层范围
  // this.extent = 图层范围
  // 4 设置矢量瓦片mvt样式
  // this.style = 矢量瓦片mvt样式
  // 5 如果有雪碧图参数，则要设置
  // this.style.sprite = 雪碧图参数
  // 6 必须返回一个Promise对象，并更新图层状态
  return new Promise((resolve) => {
    this.loadStatus = LoadStatus.loaded
    this.loaded = true
    resolve(this)
  })
}
// 在ES5模式下，如果更改了图层的业务逻辑，则必须通过图层的load方法来加载元信息，之后再添加图层
vectorTileLayerCustom.load().then(() => {
  // 添加图层
  map.add(vectorTileLayerCustom)
})

自定义矢量瓦片业务逻辑-es6

// ES6引入方式
import { VectorTileLayer } from "@mapgis/webclient-common"
// 在ES6模式下继承VectorTileLayer，并重写其业务逻辑
class VectorTileLayerCustom extends VectorTileLayer {
  constructor(options) {
    super(options)
  }
}
// 重写方法
VectorTileLayerCustom.prototype.load = (customStyle) => {
  // 你自己的业务逻辑，必须完成如下步骤
  // 1 初始化参考系
  // this.spatialReference = 参考系
  // 2 设置图层瓦片参数
  // this.tileInfo = 图层瓦片参数
  // 3 设置图层范围
  // this.extent = 图层范围
  // 4 设置矢量瓦片mvt样式
  // this.style = 矢量瓦片mvt样式
  // 5 如果有雪碧图参数，则要设置
  // this.style.sprite = 雪碧图参数
  // 6 必须返回一个Promise对象，并更新图层状态
  return new Promise((resolve) => {
    this.loadStatus = LoadStatus.loaded
    this.loaded = true
    resolve(this)
  })
}
const customLayer = new VectorTileLayerCustom({
  // 矢量瓦片基地址
  url: ''
})

Extends

Layer

Members

allSublayersCollection

所有子图层对象信息

capabilitiesObject

图层支持能力。图层支持能力分为客户端能力和服务端能力，其中客户端能力包含cesium、leaflet、mapboxgl引擎能力。默认图层客户端能力：所有引擎支持图层加载；默认图层服务端能力为空。

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围

copyrightString

currentStyleInfoObject

当前的矢量瓦片样式信息，包含serviceUrl 、styleUrl 、spriteUrl 、glyphsUrl 以及style

descriptionString

图层描述

extendPropsObject

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

Default Value:

extensionOptionsObject

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

Default Value:

extentExtent null

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

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

labelsRenderModeString

指定矢量瓦片注记的渲染模式,仅在三维上有效； on-screen: 使用Cesium接口实时渲染注记； off-screen: 使用矢量瓦片来绘制注记；请注意模式切换时，会造成性能损失，在显卡较弱的机器上会出现卡顿现象；

loadedBoolean

是否加载完毕

Default Value:

loadErrorObject

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

Default Value:

loadStatusString

图层加载状态

Default Value:

maxScaleNumber

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

Default Value:

minScaleNumber

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

Default Value:

mvtExtentNumber

mvt矢量瓦片相对坐标范围,默认为4096,表示矢量瓦片相对坐标的范围为0到4096

Default Value:

opacityNumber

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

spatialReferenceSpatialReference null

图层坐标系对象

styleObject

矢量瓦片的mvt样式对象

sublayersCollection

子图层列表对象

tileDisplayStrategyTileDisplayStrategy

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

tileInfoTileInfo

瓦片切图信息

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:

tokenValueString

token值

typeLayerType

图层类型

urlString

矢量瓦片服务地址

visibleNumber

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

Events

inherited 图层加载完毕事件 document/layer/baseLayer/Layer.js, line 46

图层加载完毕事件

Properties:

Name Type Description

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-created'	可选图层加载完毕事件
`message`	String	null	可选更新描述
`UpdateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	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

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	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

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

event

LayerViewScaleVisibleEvent

事件对象 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
`event`	LayerViewUpdateEvent	事件对象

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

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-update'	可选图层更新完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	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

event

Object

事件对象

Properties

Name	Type	Default	Description
`type`	String	'layerview-remove'	可选图层销毁完毕事件
`message`	String	null	可选更新描述
`updateContent`	Array.<UpdateContent>	null	可选更新详情对象
`layer`	Layer	null	可选要销毁的地图图层对象
`layerView`	MapView	null	可选图层的视图对象
`sourceTarget`	Layer	null	可选事件发起对象
`target`	Map	null	可选事件接收对象

Example

图层销毁完毕事件

Layer.on('layerview-remove', function (result) {
  console.log("销毁完毕:", result.layer)
});

Methods

VectorTileLayer.fromJSON(json){VectorTileLayer} document/layer/baseLayer/VectorTileLayer.js, line 818

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

Name	Type	Description
`json`	Object	JSON对象

Returns:

Type	Description
VectorTileLayer	新的VectorTileLayer对象

_initMapInfo(customStyle){*} document/layer/baseLayer/VectorTileLayer.js, line 615

初始化mapInfo

Name	Type	Description
`customStyle`	*

Returns:

Type	Description
*

clone(){VectorTileLayer} document/layer/baseLayer/VectorTileLayer.js, line 853

克隆方法

Returns:

Type	Description
VectorTileLayer	图层

deleteStyleLayer(styleLayerId) document/layer/baseLayer/VectorTileLayer.js, line 460

删除样式图层

Name	Type	Description
`styleLayerId`	String	样式图层id

inherited destroy(){*} document/layer/baseLayer/Layer.js, line 618

Returns:

Type	Description
*

findSublayerById(sublayerID){IGSVectorTileSubLayer} document/layer/baseLayer/VectorTileLayer.js, line 894

根据子图层id查询图层

Name	Type	Description
`sublayerID`	String	图层ID

Returns:

Type	Description
IGSVectorTileSubLayer	子图层

Example

根据子图层id查询图层

// ES5引入方式
const { IGSVectorTileLayer } = zondy.layer
// ES6引入方式
import { IGSVectorTileLayer} from "@mapgis/webclient-common"
const igsVectorTileLayer = new IGSVectorTileLayer({
  // 服务基地址
  url: 'http://{ip}:{port}/igs/rest/services/{serviceName}/VectorTileServer'
});
map.add(igsVectorTileLayer);
// 根据id获取子图层
const subLayer = igsVectorTileLayer.findSublayerById('子图层id')

getExtendProperties(styleLayerId, key){Any} document/layer/baseLayer/VectorTileLayer.js, line 602

获取样式图层的额外属性

Name	Type	Description
`styleLayerId`	String	样式图层id
`key`	String	额外属性的属性名

Returns:

Type	Description
Any	额外属性的属性值

getLayoutProperties(styleLayerId){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 549

获取样式图层布局属性

Name	Type	Description
`styleLayerId`	String	样式图层id

Returns:

Type	Description
Object \| null	样式图层布局属性

getPaintProperties(styleLayerId){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 514

获取样式图层绘制属性

Name	Type	Description
`styleLayerId`	String	样式图层id

Returns:

Type	Description
Object \| null	返回样式图层绘制属性

inherited getProperty(path){*} document/layer/baseLayer/Layer.js, line 818

获取属性

Name	Type	Description
`path`	String

Returns:

Type	Description
*	属性值

getStyleLayer(styleLayerId){Object} document/layer/baseLayer/VectorTileLayer.js, line 379

通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层对象

Name	Type	Description
`styleLayerId`	String	样式图层的id

Returns:

Type	Description
Object	样式图层对象

getStyleLayerId(index){String}

document/layer/baseLayer/VectorTileLayer.js, line 407

通过矢量瓦片样式图层的序号，找到对应的矢量瓦片样式图层的id

Name	Type	Description
`index`	Number	样式图层的序号

Returns:

Type	Description
String	样式图层的id

getStyleLayerIndex(styleLayerId){Number}

document/layer/baseLayer/VectorTileLayer.js, line 395

通过矢量瓦片样式图层的id，找到对应的矢量瓦片样式图层的序号

Name	Type	Description
`styleLayerId`	String	样式图层的id

Returns:

Type	Description
Number	样式图层的序号

getStyleLayerVisibility(styleLayerId){Boolean}

document/layer/baseLayer/VectorTileLayer.js, line 500

获取样式图层可见性

Name	Type	Description
`styleLayerId`	String	样式图层id

Returns:

Type	Description
Boolean	样式图层可见性状态

inherited isLoaded(){Boolean} document/layer/baseLayer/Layer.js, line 543

判断图层是否加载成功

Returns:

Type	Description
Boolean	图层是否加载成功

inherited refresh() document/layer/baseLayer/Layer.js, line 747

刷新图层

setExtendProperties(styleLayerId, key, value) document/layer/baseLayer/VectorTileLayer.js, line 585

设置样式图层的额外属性

Name	Type	Description
`styleLayerId`	String	样式图层id
`key`	String	额外属性的属性名
`value`	Any	额外属性的属性值

setLayoutProperties(styleLayerId, layout)

document/layer/baseLayer/VectorTileLayer.js, line 563

设置样式图层布局属性

Name	Type	Description
`styleLayerId`	String	样式图层id
`layout`	Object	布局属性

setPaintProperties(styleLayerId, paint)

document/layer/baseLayer/VectorTileLayer.js, line 528

设置样式图层绘制属性

Name	Type	Description
`styleLayerId`	String	样式图层id
`paint`	Object	绘制属性

inherited setProperty(path, value){Boolean} document/layer/baseLayer/Layer.js, line 778

设置属性值或者属性路径对应的值。由于当前仅支持第一级属性响应，无法解决多级属性响应机制，此方法支持属性路径响应机制。例如:path输入'tileInfo.startLevel',则会响应式更新startLevel。

Name	Type	Description
`path`	String	属性路径，可以传入单个属性后者一个属性的路径
`value`	*

Returns:

Type	Description
Boolean	是否设置成功

setStyleLayer(styleLayer, index) document/layer/baseLayer/VectorTileLayer.js, line 419

设置样式图层属性对象，可以对图层进行修改、重新排序等。布局属性和绘制属性推荐用setLayoutProperties和setPaintProperties实现。

Name	Type	Description
`styleLayer`	Object	样式图层对象
`index`	String	样式图层顺序

setStyleLayerVisibility(styleLayerId, visible)

document/layer/baseLayer/VectorTileLayer.js, line 487

设置样式图层可见性，visible为true，显示图层，为false，隐藏图层

Name	Type	Description
`styleLayerId`	String	样式图层id
`visible`	Boolean	可见性

toJSON(){Object}

document/layer/baseLayer/VectorTileLayer.js, line 830

转换为json对象

Returns:

Type	Description
Object	json对象

Class: VectorTileLayer

new VectorTileLayer(options)

支持如下方法：

Fires

Examples

Extends

Members

allSublayersCollection

capabilitiesObject

clippingAreaPolygon Extent Circle MultiPolygon null

copyrightString

currentStyleInfoObject

descriptionString

extendPropsObject

extensionOptionsObject

extentExtent null

headersObject

httpMethodFetchMethod

idString

labelsRenderModeString

loadedBoolean

loadErrorObject

loadStatusString

maxScaleNumber

minScaleNumber

mvtExtentNumber

opacityNumber

spatialReferenceSpatialReference null

styleObject

sublayersCollection

tileDisplayStrategyTileDisplayStrategy

tileInfoTileInfo

titleString

tokenAttachTypeTokenAttachType

tokenKeyString

tokenValueString

typeLayerType

urlString

visibleNumber

Events

inherited 图层加载完毕事件

Properties:

Properties

Example

inherited 图层显隐更新完毕事件

Properties:

Properties

Example

图层显隐更新完毕事件

inherited 图层比例尺显示隐藏状态更新事件。当前仅支持非组图层以及场景子图层

Properties:

Properties

Example

图层刷新完毕事件

inherited 图层视图更新事件

Properties:

Example

inherited 图层透明度更新完毕事件

Properties:

Properties

Example

图层透明度更新完毕事件

inherited 图层销毁完毕事件

Properties:

Properties

Example

Methods

VectorTileLayer.fromJSON(json){VectorTileLayer}

Returns:

_initMapInfo(customStyle){*}

Returns:

clone(){VectorTileLayer}

Returns:

deleteStyleLayer(styleLayerId)

inherited destroy(){*}

Returns:

findSublayerById(sublayerID){IGSVectorTileSubLayer}

Returns:

Example

getExtendProperties(styleLayerId, key){Any}