# 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' | 指定矢量瓦片注记的渲染模式,仅在三维上有效 |
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引入方式
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引入方式
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: ''
})
继承关系
成员变量
# labelsRenderMode
指定矢量瓦片注记的渲染模式,仅在三维上有效; on-screen: 使用Cesium接口实时渲染注记; off-screen: 使用矢量瓦片来绘制注记; 请注意模式切换时,会造成性能损失,在显卡较弱的机器上会出现卡顿现象;
# maxScale
最大显示比例尺,图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例,图层将不可见。默认值为0,0表示图层没有最大比例尺、可见性不受最大比例尺限制。maxScale应该始终小于minScale。
- Inherited From:
- Default Value:
- 0
# minScale
最小显示比例尺,图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例,图层将不可见。默认值为0,0表示图层没有最小比例尺、可见性不受最小比例尺限制。minScale应该始终大于maxScale。
- Inherited From:
- Default Value:
- 0
# opacity
图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。
- Inherited From:
方法
# getExtendProperties(styleLayerId, key)
参数:
名称 | 类型 | 描述 |
---|---|---|
styleLayerId |
String | 样式图层id |
key |
String | 额外属性的属性名 |
额外属性的属性值
# off(typesopt, fnopt, contextopt)
移除事件
示例如下:
[1、移除一个事件的指定回调函数]
[2、移除一个事件的所有回调函数]
[3、移除多个事件的同一个指定的回调函数]
[4、移除多个指定事件的回调函数]
[5、删除时指定上下文 - types类型为字符串]
[6、删除时指定上下文 - types类型为对象]
参数:
名称 | 类型 | 描述 |
---|---|---|
types |
string | 移除指定事件类型上绑定的回调函数 |
fn |
function | 事件回调函数,当types为字符串,且不指定要删除的回调函数时,删除该事件上的所有回调函数 |
context |
Object | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
移除一个事件的指定回调函数
// 一个事件的回调函数
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)
注册一个新的监听事件;
示例如下:
[1、注册一个事件]
[2、一次注册多个事件 - 同一个回调函数]
[3、一次注册多个事件 - 分别指回调应函数]
[4、当types为字符串时 - 指定上下文]
[5、当types为对象时 - 指定上下文]
参数:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
types |
String | Object | null | 事件类型 |
fn |
function | null | 事件回调函数 |
context |
Object | null | 事件回调函数的this关键字将指向的对象 |
- Inherited From:
当前实例
示例
注册一个事件
// 初始化一个点击事件回调函数
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)
# setExtendProperties(styleLayerId, key, value)
参数:
名称 | 类型 | 描述 |
---|---|---|
styleLayerId |
String | 样式图层id |
key |
String | 额外属性的属性名 |
value |
Any | 额外属性的属性值 |
# setLayoutProperties(styleLayerId, layout)
参数:
名称 | 类型 | 描述 |
---|---|---|
styleLayerId |
String | 样式图层id |
layout |
Object | 布局属性 |
# setStyleLayerVisibility(styleLayerId, visible)
参数:
名称 | 类型 | 描述 |
---|---|---|
styleLayerId |
String | 样式图层id |
visible |
Boolean | 可见性 |
事件
# 图层刷新完毕事件
图层刷新完毕事件,请注意该事件是图层更新事件(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);
}
}
});