Common Cesium-Plugin MapboxGL-Plugin Leaflet-Plugin OpenLayers-Plugin Video-Plugin
API文档
类名 ArcGISVectorTileLayer

# new ArcGISVectorTileLayer(options)

ArcGIS矢量瓦片图层

支持通过如下三种方式来初始化矢量瓦片图层对象：
1、通过服务基地址来初始化矢量瓦片图层对象；
2、通过加载矢量瓦片样式文件的方式来初始化矢量瓦片图层对象；
3、通过设置矢量瓦片样式的方式来初始化矢量瓦片图层对象；


[ES5引入方式]：
zondy.layer.ArcGISVectorTileLayer()
[ES6引入方式]：
import { ArcGISVectorTileLayer } from "@mapgis/webclient-common"

针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码，则请确认图层资源以加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}

同时也支持二次开发自定义业务逻辑，示例如下：
[自定义矢量瓦片业务逻辑-es5]，[自定义矢量瓦片业务逻辑-es6]

参数:

名称 类型 默认值 描述
options Object

构造参数
url String null

服务基地址，和style参数二者选其一
基地址格式如下：
'https://{ip}:{port}/arcgis/rest/services/{服务名称}/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

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

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

示例

初始化矢量瓦片对象

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

继承关系

成员变量

Array.<String>

# capabilities

服务支持的能力

Overrides:
Polygon | Extent | Circle | MultiPolygon | null

# clippingArea

空间裁剪范围

Inherited From:
Object

# readonly currentStyleInfo

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

Inherited From:
String

# description

图层描述

String

# labelsRenderMode

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

Inherited From:
Number

# mvtExtent

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

Inherited From:
Default Value:
  • 4096
Object

# style

矢量瓦片的mvt样式对象

Inherited From:
TileInfo | undefined

# readonly tileInfo

瓦片切图信息

Overrides:
String

# type

图层类型

String

# url

矢量瓦片服务地址

Inherited From:

方法

# static fromJSON(json)

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

参数:

名称 类型 描述
json Object

JSON对象

一个新的ArcGISVectorTileLayer对象

ArcGISVectorTileLayer

# clone()

克隆方法

Inherited From:

图层

Layer

# covertCustomStyleToMVTStyle(customStyle, tiles)

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

参数:

名称 类型 描述
customStyle Object

自定义的style
tiles Array.<String>

瓦片实际地址

修改好的符合矢量瓦片规范的样式对象

Object

# deleteStyleLayer(styleLayerId)

删除样式图层

参数:

名称 类型 描述
styleLayerId String

样式图层id
Inherited From:

# getExtendProperties(styleLayerId, key)

获取样式图层的额外属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
key String

额外属性的属性名
Inherited From:

额外属性的属性值

Any

# getLayoutProperties(styleLayerId)

获取样式图层布局属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
Inherited From:

样式图层布局属性

Object | null

# getPaintProperties(styleLayerId)

获取样式图层绘制属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
Inherited From:

返回样式图层绘制属性

Object | null

# getStyleLayer(styleLayerId)

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

参数:

名称 类型 描述
styleLayerId String

样式图层的id
Inherited From:

样式图层对象

Object

# getStyleLayerId(index)

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

参数:

名称 类型 描述
index Number

样式图层的序号
Inherited From:

样式图层的id

String

# getStyleLayerIndex(styleLayerId)

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

参数:

名称 类型 描述
styleLayerId String

样式图层的id
Inherited From:

样式图层的序号

Number

# getStyleLayerVisibility(styleLayerId)

获取样式图层可见性

参数:

名称 类型 描述
styleLayerId String

样式图层id
Inherited From:

样式图层可见性状态

Boolean

# setExtendProperties(styleLayerId, key, value)

设置样式图层的额外属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
key String

额外属性的属性名
value Any

额外属性的属性值
Inherited From:

# setLayoutProperties(styleLayerId, layout)

设置样式图层布局属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
layout Object

布局属性
Inherited From:

# setPaintProperties(styleLayerId, paint)

设置样式图层绘制属性

参数:

名称 类型 描述
styleLayerId String

样式图层id
paint Object

绘制属性
Inherited From:

# setStyleLayer(styleLayer, index)

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

参数:

名称 类型 描述
styleLayer Object

样式图层对象
index String

样式图层顺序
Inherited From:

# setStyleLayerVisibility(styleLayerId, visible)

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

参数:

名称 类型 描述
styleLayerId String

样式图层id
visible Boolean

可见性
Inherited From:

# toJSON()

转换为json对象

Overrides:

json对象

Object
构造函数
成员变量
方法
事件