Class: ArcGISVectorTileLayer

ArcGISVectorTileLayer

new ArcGISVectorTileLayer(options)

document/layer/arcgis/ArcGISVectorTileLayer.js, line 10

ArcGIS 矢量瓦片图层。

用于加载 ArcGIS VectorTileServer 或样式配置(style JSON / style object),并在二维、三维场景中统一渲染矢量瓦片。 该图层支持样式层级读写和二次开发扩展,建议在图层加载完成后执行样式修改、注记渲染和可见性控制操作。

Name Type Default Description
options Object {} 可选

构造参数

Name Type Default Description
url String null 可选

服务基地址,和style参数二者选其一
基地址格式如下:
IGS发布的ArcGIS服务: http://{ip}:{port}/igs/rest/services/{folder}/{serviceName}/arcgis/VectorTileServer
ArcGIS: https://{ip}:{port}/arcgis/rest/services/{serviceName}/VectorTileServer
参考示例:[加载矢量瓦片服务]
服务基地址也支持传入矢量瓦片样式文件地址,例如:
'https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json',
参考示例:[加载矢量瓦片样式文件]
删除图层方法:[删除图层]

style Object null 可选

矢量瓦片样式,也可以支持通过传入矢量瓦片样式的方式构造矢量瓦片,注意矢量瓦片样式要符合arcgis矢量瓦片的规范,
和url参数二者选其一
参考示例:[加载矢量瓦片样式对象]

minScale Number 0 可选

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

maxScale Number 0 可选

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

opacity Number 1 可选

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

tokenKey String 'token' 可选

token名

tokenValue String null 可选

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

visible Boolean true 可选

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

labelsRenderMode String 'off-screen' 可选

指定矢量瓦片注记的渲染模式,仅在三维上有效。on-screen表示使用三维接口实时渲染注记;off-screen表示通过先将注记渲染到图片上,再通过三维接口渲染到屏幕。
参考示例:[矢量瓦片三维注记]

clippingArea Polygon | Extent | Circle | MultiPolygon | null null 可选

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

Fires
  • Layer#event:图层加载完毕事件
  • Layer#event:图层销毁完毕事件
  • Layer#event:图层更新完毕事件
  • Layer#event:图层显隐更新完毕事件
  • Layer#event:图层透明度更新完毕事件
Examples

初始化矢量瓦片对象

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

// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  // 服务基地址
  url: 'https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer'
});

加载矢量瓦片样式文件

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

// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  // 样式文件地址
  url: 'https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json'
});

加载矢量瓦片样式对象

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

// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const arcgisVectorTileLayer = new ArcGISVectorTileLayer({
  // 设置你的样式
  style: {}
});

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

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

// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 初始化矢量瓦片图层
const arcGISVectorTileLayer = new ArcGISVectorTileLayer({
  // 矢量瓦片基地址
  url: ''
});
// 例如通过重写arcGISVectorTileLayer对象的covertCustomStyleToMVTStyle方法,来自定义矢量瓦片业务逻辑
arcGISVectorTileLayer.covertCustomStyleToMVTStyle = function(customStyle) {
  // 自定义你的业务逻辑
  // 此方法必须要返回一个符合MapBox标准的矢量瓦片
  return mvtStyle
}
// 在ES5模式下,如果更改了图层的业务逻辑,则必须通过图层的load方法来加载元信息,之后再添加图层
arcGISVectorTileLayer.load().then(() => {
  // 添加图层
  map.add(arcGISVectorTileLayer)
})

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

// ES6引入方式
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"
// 在ES6模式下继承IGSVectorTileLayer,并重写其业务逻辑
class ArcGISVectorTileLayerCustom extends ArcGISVectorTileLayer {
  constructor(options) {
    super(options)
  }
}
// 重写方法
ArcGISVectorTileLayerCustom.prototype.covertCustomStyleToMVTStyle = function (customStyle) {
  // 自定义你的业务逻辑
  // 此方法必须要返回一个符合MapBox标准的矢量瓦片
  return mvtStyle
}
const customLayer = new ArcGISVectorTileLayerCustom({
  // 矢量瓦片基地址
  url: ''
})

矢量瓦片三维注记

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

// ES6引入方式
import { ArcGISVectorTileLayer, LabelClass } from "@mapgis/webclient-common"
// 初始化一个额外的图标DOM对象
const iconImage = new Image()
iconImage.src = '图片地址或者base64字符串'
// 初始化矢量瓦片图层
const arcGISVectorTileLayer = new ArcGISVectorTileLayer({
  // 矢量瓦片基地址
  url: ''
})
// 加载图层元信息
arcGISVectorTileLayer.load().then((result) => {
  // 由于ArcGIS矢量瓦片没有子图层的概念,因此直接设置该属性到样式图层上
  arcGISVectorTileLayer.setExtendProperties('样式图层id', 'labelingInfo', [
    new LabelClass({
      symbol: {
        // 填充颜色 rgba or 16进制颜色
        color: 'rgba(255,255,255,1)',
        // 描边颜色
        haloColor: 'rgba(0,0,0,0.5)',
        // 描边宽度
        haloSize: 2,
        // 行高
        lineHeight: 1.1,
        // 文本间距
        letterSpacing: 2,
        // 字体样式 参考css
        font: {
          size: 14,
          family: '微软雅黑',
          weight: 'normal',
          style: 'normal'
        },
        // 额外的图标
        textExtraIcon: iconImage,
        // 图标的大小
        textExtraIconSize:20,
        // 图标方位
        textExtraIconAnchor:'left'
      },
      // 渲染方式 1.canvas 2.label 3.ground
      renderMode: 'canvas',
      // 最大可见范围
      minScale: 60000000,
      // 最小可见范围
      maxScale: 1,
      // 布局位置 可选 1.above-left 2.above-center 3.above-right 4.center-left 5.center-center 6.center-right 7.below-left 8.below-center 9.below-right
      labelPlacement: 'above-center',
      // 高程采样参数
      elevationInfo: {
        mode: 'OnTheGround',
        offset: 0
      }
    })
  ])
})

设置图层透明度

arcgisVectorTileLayer.opacity = 0.5

显示或隐藏图层

arcgisVectorTileLayer.visible = !igsVectorTileLayer.visible

删除图层

map.remove(arcgisVectorTileLayer)

Extends

Members

所有子图层的扁平化集合。

通过 CollectionFlattenersublayers 做递归展开,便于按 id 查找和批量遍历。

autoAddTo2DBoolean

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

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

Default Value:
true

autoAddTo3DBoolean

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

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

Default Value:
true

capabilitiesObject

图层支持能力。

capabilities 通常由两部分组成:

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

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

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围。

支持多多边形、多边形、矩形(Extent)、圆形等几何对象,用于在客户端按空间范围裁剪矢量瓦片显示范围。

版权所有

currentStyleInfoObject

当前矢量瓦片样式元信息。

通常包含以下字段:serviceUrlstyleUrlspriteUrlglyphsUrl 以及内存中的 style 对象, 便于在调试或序列化时恢复当前正在使用的 MVT 样式配置。

descriptionString

图层描述

elevationInfoElevationInfo

高程模式参数。矢量瓦片图层仅支持 ElevationMode.onTheScene 和 ElevationMode.onTheGround。

extendPropsObject

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

Default Value:
{}

extensionOptionsObject

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

Default Value:
{}

extentExtent null

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

forceRefreshDebounceDelayNumber

强制刷新防抖延迟(毫秒)。

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

Default Value:
5

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

labelsRenderModeString

矢量瓦片注记渲染模式。

仅在三维视图中生效:

  • on-screen:使用 Cesium 接口实时渲染注记;
  • off-screen:通过矢量瓦片在离屏 Canvas 中绘制注记。

请注意:模式切换会带来一定性能开销,在显卡较弱的环境中可能触发卡顿。

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

mvtExtentNumber

MVT 矢量瓦片相对坐标范围。

默认为 4096,表示矢量瓦片内部坐标从 0 到 4096。该值通常与服务端发布时设置的 extent 保持一致。

Default Value:
4096

opacityNumber

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

spatialReferenceSpatialReference null

图层坐标系对象

sublayersCollection.<SubLayer> null

子图层列表对象。

子图层由服务端 mapinfo 与客户端配置合并生成;图层未加载完成时会暂存到 _clientSublayers

tileDisplayStrategyTileDisplayStrategy

当视图比例尺超出瓦片数据自身级别范围时的显示策略。

TileDisplayStrategy 枚举定义,例如:

  • TileDisplayStrategy.hide:大于最大级别或小于最小级别时隐藏;
  • TileDisplayStrategy.stretch:大于最大级别时拉伸,小于最小级别时缩小。

tileInfoTileInfo null

瓦片切图信息。

该对象描述矢量瓦片的切片规则(级别范围、行列号范围、原点、分辨率等), 通常由服务端元信息生成,也可以通过 options.tileInfo 传入自定义配置。

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:
token

tokenValueString

token值

typeString

图层类型

urlString

矢量瓦片服务地址

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 中会描述本次更新涉及的属性或方法(例如:visibleopacityrefresh)。

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

clone(){ArcGISVectorTileLayer}

document/layer/arcgis/ArcGISVectorTileLayer.js, line 556

克隆对象

Returns:
Type Description
ArcGISVectorTileLayer ArcGIS矢量瓦片对象

covertCustomStyleToMVTStyle(customStyle, tiles){Object}

document/layer/arcgis/ArcGISVectorTileLayer.js, line 265

将自定义的style转成矢量瓦片的mvtStyle,可有子类或初始化时自定义

Name Type Description
customStyle Object

自定义的style

tiles Array.<String>

瓦片实际地址

Returns:
Type Description
Object 修改好的符合矢量瓦片规范的样式对象

inherited deleteStyleLayer(styleLayerId){void}

document/layer/baseLayer/VectorTileLayer.js, line 535
Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
void

inherited destroy(){void}

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

销毁图层。

基类不做具体释放逻辑,子类可根据需要重写(例如:释放请求、解绑引擎对象等)。

Returns:
Type Description
void

inherited findSublayerById(sublayerID){SubLayer|null}

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

根据子图层id查询图层

Name Type Description
sublayerID String

图层ID

Returns:
Type Description
SubLayer | null 子图层对象(未找到时返回 null)
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')

inherited getExtendProperties(styleLayerId, key){Any}

document/layer/baseLayer/VectorTileLayer.js, line 714
Name Type Description
styleLayerId String

样式图层 id

key String

扩展属性名

Returns:
Type Description
Any 扩展属性值;未找到时返回 null。

inherited getLayoutProperties(styleLayerId){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 646
Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
Object | null layout 对象;未找到时返回 null。

inherited getPaintProperties(styleLayerId){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 602
Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
Object | null paint 对象;未找到时返回 null。

inherited getProperty(path){*}

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

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

Name Type Description
path String

属性路径

Returns:
Type Description
* 属性值

inherited getStyleLayer(styleLayerId){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 433
通过矢量瓦片样式图层的 id 获取样式图层对象。

适用于对矢量瓦片样式进行精细化控制或调试,例如在调用 VectorTileLayer#setStyleLayer 前先获取当前图层样式。

注意:该方法依赖 VectorTileLayer#style 已存在且包含 layers 数组;通常需要先完成图层元信息/样式加载。

Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
Object | null 样式图层对象(Mapbox Style Layer),未找到时返回 null。

inherited getStyleLayerId(index){Object|null}

document/layer/baseLayer/VectorTileLayer.js, line 471
Name Type Description
index Number

样式图层序号(从 0 开始)

Returns:
Type Description
Object | null 样式图层对象(包含 id 字段);越界时返回 null。

inherited getStyleLayerIndex(styleLayerId){Number}

document/layer/baseLayer/VectorTileLayer.js, line 455
Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
Number 样式图层序号(从 0 开始);未找到时返回 -1。

inherited getStyleLayerVisibility(styleLayerId){Boolean}

document/layer/baseLayer/VectorTileLayer.js, line 586
Name Type Description
styleLayerId String

样式图层 id

Returns:
Type Description
Boolean 是否可见。若未找到对应样式图层或 layout 不存在,默认返回 true。

inherited isLoaded(){Boolean}

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

判断图层是否加载成功

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

inherited load(){Promise.<Layer>}

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

图层资源加载。

默认实现会调用内部 _load(),并维护 loadStatus/loaded/loadError 等状态字段。 子类通常通过重写 _load() 来实现“请求元数据/初始化参数”的业务逻辑。

Returns:
Type Description
Promise.<Layer> 加载完成后的图层对象(resolve 为当前实例)

inherited refresh(){void}

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

刷新图层。

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

Returns:
Type Description
void

inherited setExtendProperties(styleLayerId, key, value){void}

document/layer/baseLayer/VectorTileLayer.js, line 690
Name Type Description
styleLayerId String

样式图层 id

key String

扩展属性名

value Any

扩展属性值

Returns:
Type Description
void

inherited setLayoutProperties(styleLayerId, layout){void}

document/layer/baseLayer/VectorTileLayer.js, line 664
Name Type Description
styleLayerId String

样式图层 id

layout Object

layout 配置(会与原 layout 合并)

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 setPaintProperties(styleLayerId, paint){void}

document/layer/baseLayer/VectorTileLayer.js, line 620
Name Type Description
styleLayerId String

样式图层 id

paint Object

paint 配置(会与原 paint 合并)

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 是否设置成功

inherited setStyleLayer(styleLayer, index){void}

document/layer/baseLayer/VectorTileLayer.js, line 487
Name Type Description
styleLayer Object

样式图层对象

index Number 可选

样式图层顺序(从 0 开始)。传入后会将图层移动到指定位置。

Returns:
Type Description
void

inherited setStyleLayerVisibility(styleLayerId, visible){void}

document/layer/baseLayer/VectorTileLayer.js, line 566
Name Type Description
styleLayerId String

样式图层 id

visible Boolean

是否可见

Returns:
Type Description
void

toJSON(){Object}

document/layer/arcgis/ArcGISVectorTileLayer.js, line 547

转换为 JSON 对象

Returns:
Type Description
Object JSON 对象

ArcGISVectorTileLayer.fromJSON(json){ArcGISVectorTileLayer}

document/layer/arcgis/ArcGISVectorTileLayer.js, line 539

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

Name Type Description
json Object

JSON 对象

Returns:
Type Description
ArcGISVectorTileLayer 一个新的ArcGISVectorTileLayer对象