new ArcGISVectorTileLayer(options)
支持如下方法:
[1、通过传入的json构造并返回一个新的几何对象]2、导出为json对象3、通过矢量瓦片样式图层的id,找到对应的矢量瓦片样式图层对象4、通过矢量瓦片样式图层的id,找到对应的矢量瓦片样式图层的序号5、通过矢量瓦片样式图层的序号,找到对应的矢量瓦片样式图层的id6、设置样式图层属性对象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 |
构造参数
|
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引入方式
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引入方式
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
-
空间裁剪范围
-
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: 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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-created' 可选 图层加载完毕事件
messageString null 可选 更新描述
UpdateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap 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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap 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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
eventLayerViewScaleVisibleEvent 事件对象 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 eventLayerViewUpdateEvent 事件对象
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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-update' 可选 图层更新完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap 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 eventObject 事件对象
Properties
Name Type Default Description typeString 'layerview-remove' 可选 图层销毁完毕事件
messageString null 可选 更新描述
updateContentArray.<UpdateContent> null 可选 更新详情对象
layerLayer null 可选 要销毁的地图图层对象
layerViewMapView null 可选 图层的视图对象
sourceTargetLayer null 可选 事件发起对象
targetMap null 可选 事件接收对象
Example
图层销毁完毕事件 Layer.on('layerview-remove', function (result) { console.log("销毁完毕:", result.layer) });
Methods
-
ArcGISVectorTileLayer.fromJSON(json){ArcGISVectorTileLayer}
document/layer/arcgis/ArcGISVectorTileLayer.js, line 588 -
Name Type Description jsonObject 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 customStyleObject 自定义的style
tilesArray.<String> 瓦片实际地址
Returns:
Type Description Object 修改好的符合矢量瓦片规范的样式对象 -
inherited deleteStyleLayer(styleLayerId)
document/layer/baseLayer/VectorTileLayer.js, line 460 -
Name Type Description styleLayerIdString 样式图层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 sublayerIDString 图层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 styleLayerIdString 样式图层id
keyString 额外属性的属性名
Returns:
Type Description Any 额外属性的属性值 -
inherited getLayoutProperties(styleLayerId){Object|null}
document/layer/baseLayer/VectorTileLayer.js, line 549 -
Name Type Description styleLayerIdString 样式图层id
Returns:
Type Description Object | null 样式图层布局属性 -
inherited getPaintProperties(styleLayerId){Object|null}
document/layer/baseLayer/VectorTileLayer.js, line 514 -
Name Type Description styleLayerIdString 样式图层id
Returns:
Type Description Object | null 返回样式图层绘制属性 -
inherited getProperty(path){*}
document/layer/baseLayer/Layer.js, line 818 -
获取属性
Name Type Description pathString Returns:
Type Description * 属性值 -
inherited getStyleLayer(styleLayerId){Object}
document/layer/baseLayer/VectorTileLayer.js, line 379 -
Name Type Description styleLayerIdString 样式图层的id
Returns:
Type Description Object 样式图层对象 -
inherited getStyleLayerId(index){String}
document/layer/baseLayer/VectorTileLayer.js, line 407 -
Name Type Description indexNumber 样式图层的序号
Returns:
Type Description String 样式图层的id -
inherited getStyleLayerIndex(styleLayerId){Number}
document/layer/baseLayer/VectorTileLayer.js, line 395 -
Name Type Description styleLayerIdString 样式图层的id
Returns:
Type Description Number 样式图层的序号 -
inherited getStyleLayerVisibility(styleLayerId){Boolean}
document/layer/baseLayer/VectorTileLayer.js, line 500 -
Name Type Description styleLayerIdString 样式图层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 styleLayerIdString 样式图层id
keyString 额外属性的属性名
valueAny 额外属性的属性值
-
inherited setLayoutProperties(styleLayerId, layout)
document/layer/baseLayer/VectorTileLayer.js, line 563 -
Name Type Description styleLayerIdString 样式图层id
layoutObject 布局属性
-
inherited setPaintProperties(styleLayerId, paint)
document/layer/baseLayer/VectorTileLayer.js, line 528 -
Name Type Description styleLayerIdString 样式图层id
paintObject 绘制属性
-
inherited setProperty(path, value){Boolean}
document/layer/baseLayer/Layer.js, line 778 -
设置属性值或者属性路径对应的值。由于当前仅支持第一级属性响应,无法解决多级属性响应机制,此方法支持属性路径响应机制。例如:path输入'tileInfo.startLevel',则会响应式更新startLevel。
Name Type Description pathString 属性路径,可以传入单个属性后者一个属性的路径
value* Returns:
Type Description Boolean 是否设置成功 -
inherited setStyleLayer(styleLayer, index)
document/layer/baseLayer/VectorTileLayer.js, line 419 -
Name Type Description styleLayerObject 样式图层对象
indexString 样式图层顺序
-
inherited setStyleLayerVisibility(styleLayerId, visible)
document/layer/baseLayer/VectorTileLayer.js, line 487 -
Name Type Description styleLayerIdString 样式图层id
visibleBoolean 可见性
-
toJSON(){Object}
document/layer/arcgis/ArcGISVectorTileLayer.js, line 596 -
转换为json对象
Returns:
Type Description Object json对象