类名 VectorTileLayer

# new VectorTileLayer(options)

矢量瓦片图层基类

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

参数

名称 类型 默认值 描述
options Object

构造参数

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

labelsRenderMode String 'off-screen'

指定矢量瓦片注记的渲染模式,仅在三维上有效
on-screen: 使用Cesium接口实时渲染注记
off-screen: 使用矢量瓦片来绘制注记
三维注记目前不支持修改透明度和显隐参数
请注意模式切换时,会造成性能损失,在显卡较弱的机器上会出现卡顿现象
示例请参考IGSVectorTileLayer

clippingArea Polygon | Extent | Circle | MultiPolygon | null null

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

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

示例

自定义矢量瓦片业务逻辑-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: ''
})

继承关系

成员变量

成员变量概述

名称 类型 描述
capabilities Array.<String>

服务支持的能力

clippingArea Polygon | Extent | Circle | MultiPolygon | null

空间裁剪范围

copyright String

版权所有

currentStyleInfo Object

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

description String

图层描述

extendProps Object

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

extensionOptions Object

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

extent Extent

图层范围,从服务元信息中获取

headers String

设置服务请求头

httpMethod FetchMethod

http请求方式

id String

图层id

index Number

图层顺序

labelsRenderMode String

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

loaded Boolean

是否加载完毕

loadStatus String

图层加载状态

maxScale Number

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。

minScale Number

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。

mvtExtent Number

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

opacity Number

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

spatialReference SpatialReference

图层坐标系对象

style Object

矢量瓦片的mvt样式对象

tileInfo TileInfo | undefined

瓦片切图信息

title String

图层名称

tokenAttachType String

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

tokenKey String

token名

tokenValue String

token值

type String

图层类型

url String

矢量瓦片服务地址

visible Number

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

成员变量详情

Array.<String>

# capabilities

服务支持的能力

Polygon | Extent | Circle | MultiPolygon | null

# clippingArea

空间裁剪范围

String

版权所有

Inherited From:
Object

# readonly currentStyleInfo

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

String

# readonly description

图层描述

Inherited From:
Object

# extendProps

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

Inherited From:
Default Value:
  • {}
Object

# extensionOptions

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

Inherited From:
Default Value:
  • {}
Extent

# readonly extent

图层范围,从服务元信息中获取

Inherited From:
String

# headers

设置服务请求头

Inherited From:
FetchMethod

# httpMethod

http请求方式

Inherited From:
String

# readonly id

图层id

Inherited From:
Number

# index

图层顺序

Inherited From:
String

# labelsRenderMode

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

Boolean

# readonly loaded

是否加载完毕

Inherited From:
Default Value:
  • false
String

# readonly loadStatus

图层加载状态

Inherited From:
Default Value:
  • not-loaded
Number

# maxScale

最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。

Inherited From:
Default Value:
  • 0
Number

# minScale

最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。

Inherited From:
Default Value:
  • 0
Number

# mvtExtent

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

Default Value:
  • 4096
Number

# opacity

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

Inherited From:
SpatialReference

# spatialReference

图层坐标系对象

Overrides:
Object

# style

矢量瓦片的mvt样式对象

TileInfo | undefined

# readonly tileInfo

瓦片切图信息

String

# title

图层名称

Inherited From:
String

# tokenAttachType

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

Inherited From:
String

# tokenKey

token名

Inherited From:
Default Value:
  • token
String

# tokenValue

token值

Inherited From:
String

# readonly type

图层类型

Inherited From:
String

# url

矢量瓦片服务地址

Number

# visible

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

Inherited From:

方法

方法概述

名称 返回值类型 描述
fromJSON VectorTileLayer

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

clone Layer

克隆方法

deleteStyleLayer
destroy *
getExtendProperties Any
getLayoutProperties Object | null
getPaintProperties Object | null
getStyleLayer Object
getStyleLayerId String
getStyleLayerIndex Number
getStyleLayerVisibility Boolean

获取样式图层可见性

isLoaded Boolean

判断图层是否加载成功

off Object

移除事件
示例如下:

on Object

注册一个新的监听事件;
示例如下:

refresh

刷新图层

setExtendProperties
setLayoutProperties
setPaintProperties
setStyleLayer
setStyleLayerVisibility
toJSON Object

转换为json对象

方法详情

# static fromJSON(json)

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

参数

名称 类型 描述
json Object

JSON对象

新的VectorTileLayer对象

VectorTileLayer

# clone()

克隆方法

Overrides:

图层

Layer

# destroy()

Inherited From:
*

# isLoaded()

判断图层是否加载成功

Inherited From:

图层是否加载成功

Boolean

# off(typesopt, fnopt, contextopt)

参数

名称 类型 描述
types string

移除指定事件类型上绑定的回调函数
当类型为字符串时,可以移除单个或多个事件类型绑定的回调函数,单个事件:"click",多个事件:以空格分割:"click double-click";
当types为对象时,使用如下方式移除事件:{'click': onClickFun, 'mouse-move': onMouseMoveFun}

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)

参数

名称 类型 默认值 描述
types String | Object null

事件类型
当types为字符串时,可以定义单个或多个事件,单个事件:"click",多个事件:以空格分割:"click double-click";
当types为对象时,使用如下方式指定事件:{'click': onClickFun, 'mouse-move': onMouseMoveFun}

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)

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