Class: ArcGISVectorTileLayer

ArcGISVectorTileLayer

new ArcGISVectorTileLayer(options)

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

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

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]

Name Type 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
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

allSublayersCollection

所有子图层对象信息

capabilitiesObject

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

clippingAreaPolygon Extent Circle MultiPolygon null

空间裁剪范围

版权所有

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:
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

mvtExtentNumber

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

Default Value:
4096

opacityNumber

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

spatialReferenceSpatialReference null

图层坐标系对象

sublayersCollection

子图层列表对象

tileDisplayStrategyTileDisplayStrategy

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

tileInfoTileInfo

瓦片切图信息

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:
token

tokenValueString

token值

typeString

图层类型

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

ArcGISVectorTileLayer.fromJSON(json){ArcGISVectorTileLayer}

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

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

Name Type Description
json Object

JSON对象

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

inherited _initMapInfo(customStyle){*}

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

初始化mapInfo

Name Type Description
customStyle *
Returns:
Type Description
*

clone(){ArcGISVectorTileLayer}

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

克隆对象

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

covertCustomStyleToMVTStyle(customStyle, tiles){Object}

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

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

Name Type Description
customStyle Object

自定义的style

tiles Array.<String>

瓦片实际地址

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

inherited 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
*

inherited 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')

inherited getExtendProperties(styleLayerId, key){Any}

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

样式图层id

key String

额外属性的属性名

Returns:
Type Description
Any 额外属性的属性值

inherited getLayoutProperties(styleLayerId){Object|null}

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

样式图层id

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

inherited 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
* 属性值

inherited getStyleLayer(styleLayerId){Object}

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

样式图层的id

Returns:
Type Description
Object 样式图层对象

inherited getStyleLayerId(index){String}

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

样式图层的序号

Returns:
Type Description
String 样式图层的id

inherited getStyleLayerIndex(styleLayerId){Number}

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

样式图层的id

Returns:
Type Description
Number 样式图层的序号

inherited 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

刷新图层

inherited setExtendProperties(styleLayerId, key, value)

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

样式图层id

key String

额外属性的属性名

value Any

额外属性的属性值

inherited setLayoutProperties(styleLayerId, layout)

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

样式图层id

layout Object

布局属性

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

inherited setStyleLayer(styleLayer, index)

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

样式图层对象

index String

样式图层顺序

inherited setStyleLayerVisibility(styleLayerId, visible)

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

样式图层id

visible Boolean

可见性

toJSON(){Object}

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

转换为json对象

Returns:
Type Description
Object json对象