MapGIS Client for JavaScript API

new GroupLayer(options)

document/layer/GroupLayer.js, line 15

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

Name Type Description

options

Object

构造参数

Name	Type	Default	Description
`layers`	Array	[]	可选子图层数组
`visible`	Boolean	true	可选图层可见性
`opacity`	Number	1	可选图层透明度，0到1之间的数字

Example

组图层示例

// 初始化图层管理容器
// ES5引入方式
const { IGSMapImageLayer,WMTSLayer,GroupLayer } = zondy.layer
// ES6引入方式
import { IGSMapImageLayer,WMTSLayer,GroupLayer} from "@mapgis/webclient-common"
// 创建一个矢量图层
const igsMapImageLayer = new IGSMapImageLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Map/WorldJWVector/MapServer'
});
// 创建一个WMS图层
const wmsLayer = new WMTSLayer({
  url: 'http://192.168.82.89:8089/igs/rest/services/Tile/北京市/WMTSServer'
});
// 创建一个组图层
const groupLayer = new GroupLayer({
  // 添加子图层
  layers: [igsMapImageLayer, wmsLayer]
})

Extends

Layer

Members

allLayersCollection.<Layer>

图层扁平后的容器。根据图层容器layers变化，会进行动态更新。如果是一个组图层，则会按照深度遍历的顺序排列

capabilitiesObject

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

copyrightString

descriptionString

图层描述

extendPropsObject

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

Default Value:

extensionOptionsObject

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

Default Value:

extentExtent null

图层范围

headersObject

设置服务请求头

httpMethodFetchMethod

http请求方式

idString

图层id

layersCollection.<Layer>

图层容器。通过图层上add、addMany方法添加的图层会放到此容器中

loadedBoolean

是否加载完毕

Default Value:

loadErrorObject

请求失败后的错误信息，toJSON方法不会导出该属性

Default Value:

loadStatusString

图层加载状态

Default Value:

maxScaleNumber

最大显示比例尺，图层在视图中可见的最大比例尺(最放大)。如果地图被放大到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。maxScale应该始终小于minScale。

Default Value:

minScaleNumber

最小显示比例尺，图层在视图中可见的最小比例尺(最缩小)。如果地图被缩小到超过这个比例，图层将不可见。默认值为0，如果图层是瓦片类型，maxScale、minScale的默认值能和tileInfo上的保持一致，如果图层是动态图层，则和地图视图保持一致。minScale应该始终大于maxScale。

Default Value:

opacityNumber

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

spatialReferenceSpatialReference null

图层坐标系对象

titleString

图层名称

tokenAttachTypeTokenAttachType

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

tokenKeyString

token名

Default Value:

tokenValueString

token值

typeLayerType

图层类型

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

GroupLayer.fromJSON(json){GroupLayer} document/layer/GroupLayer.js, line 307

Name	Type	Description
`json`	*

Returns:

Type	Description
GroupLayer

add(layer, index){*} document/layer/GroupLayer.js, line 183

Name	Type	Description
`layer`	Layer	图层
`index`	Number	图层在列表内的下标值

Returns:

Type	Description
*

addMany(layers, index){*} document/layer/GroupLayer.js, line 202

Name	Type	Description
`layers`	Array.<Layer>
`index`	*

Returns:

Type	Description
*

clone(){GroupLayer} document/layer/GroupLayer.js, line 297

克隆并返回一个新图层

Returns:

Type	Description
GroupLayer	新的组图层对象

destroy(){*} document/layer/GroupLayer.js, line 326

Returns:

Type	Description
*

findLayerById(layerId){Layer|null} document/layer/GroupLayer.js, line 276

通过图层id获取子图层

Name	Type	Description
`layerId`	String	子图层id

Returns:

Type	Description
Layer \| null	子图层对象

getFlatLayers(){Array} document/layer/GroupLayer.js, line 267

获取组图层中的所有子图层数组

Returns:

Type	Description
Array	所有子图层数组

inherited getProperty(path){*} document/layer/baseLayer/Layer.js, line 818

获取属性

Name	Type	Description
`path`	String

Returns:

Type	Description
*	属性值

isLoaded(){Boolean} document/layer/GroupLayer.js, line 170

判断图层是否加载成功

Returns:

Type	Description
Boolean	图层是否加载成功

load() document/layer/GroupLayer.js, line 133

从igs获取图层信息的方法

inherited refresh() document/layer/baseLayer/Layer.js, line 747

刷新图层

remove(layer) document/layer/GroupLayer.js, line 219

删除子图层

Name	Type	Description
`layer`	Layer	图层对象

removeAll() document/layer/GroupLayer.js, line 242

移除所有子图层

removeMany(layers){*} document/layer/GroupLayer.js, line 232

Name	Type	Description
`layers`	Array.<Layer>

Returns:

Type	Description
*

reorder(layer, index) document/layer/GroupLayer.js, line 257

调整图层顺序

Name	Type	Description
`layer`	Layer	要调整顺序的图层
`index`	Number	图层列表的下标值

Example

layer.reorder(layer, '要移动到的index');

setMap(map){*} document/layer/GroupLayer.js, line 317

Name	Type	Description
`map`	*

Returns:

Type	Description
*

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

toJSON(){Object} document/layer/GroupLayer.js, line 285

将图层转为json对象

Returns:

Type	Description
Object	josn对象

Class: GroupLayer

new GroupLayer(options)

Example

Extends

Members

allLayersCollection.<Layer>

capabilitiesObject

copyrightString

descriptionString

extendPropsObject

extensionOptionsObject

extentExtent null

headersObject

httpMethodFetchMethod

idString

layersCollection.<Layer>

loadedBoolean

loadErrorObject

loadStatusString

maxScaleNumber

minScaleNumber

opacityNumber

spatialReferenceSpatialReference null

titleString

tokenAttachTypeTokenAttachType

tokenKeyString

tokenValueString

typeLayerType

visibleNumber

Events

inherited 图层加载完毕事件

Properties:

Properties

Example

inherited 图层显隐更新完毕事件

Properties:

Properties

Example

图层显隐更新完毕事件

inherited 图层比例尺显示隐藏状态更新事件。当前仅支持非组图层以及场景子图层

Properties:

Properties

Example

图层刷新完毕事件

inherited 图层视图更新事件

Properties:

Example

inherited 图层透明度更新完毕事件

Properties:

Properties

Example

图层透明度更新完毕事件

inherited 图层销毁完毕事件

Properties:

Properties

Example

Methods

GroupLayer.fromJSON(json){GroupLayer}

Returns:

add(layer, index){*}

Returns:

addMany(layers, index){*}

Returns:

clone(){GroupLayer}

Returns:

destroy(){*}

Returns:

findLayerById(layerId){Layer|null}

Returns:

getFlatLayers(){Array}

Returns:

inherited getProperty(path){*}

Returns:

isLoaded(){Boolean}

Returns:

load()

inherited refresh()

remove(layer)

removeAll()

removeMany(layers){*}