MapGIS Client for JavaScript API

new GraphicsLayer(options)

document/layer/GraphicsLayer.js, line 9

图形图层，不支持在线数据，仅支持传入多个几何对象并绘制
目前二维和三维上支持4326(包括4490，4214以及4610)，3857以及EPSG支持的自定义坐标系，若是想要绘制非4326坐标系几何，需要在初始化要素对象的几何时，指定具体坐标系

Name Type Default Description

options

Object

{}

可选

构造参数

Name	Type	Default	Description
`graphics`	Array.<Feature>		可选几何对象，支持的几何数据如下： `1、点几何` `2、多点几何` `3、线几何` `4、多线几何` `5、区几何` `6、多区几何` `7、矩形几何` `8、圆几何` 参考示例： [1、创建图层] [2、删除图层] [3、添加要素] [4、添加自定义坐标系的要素]
`id`	String		可选图层 id，未提供时会自动生成随机 id。
`visible`	Boolean	true	可选图层可见性，参考示例：图层可见性。
`opacity`	Number	1	可选图层透明度，取值范围 0~1，参考示例：图层透明度。
`elevationInfo`	ElevationInfo		可选高程模式参数。
`deconflictionStrategy`	String	'none'	可选注记避让策略。可选： `'static'`：默认避让策略 `'none'`：无避让策略当前仅支持 SceneView，且仅支持 BillBoard、Label、Dom 图元进行避让（Dom 仅与 Dom 避让）。

Examples

创建图层

// ES5引入方式
const { Feature,Color} = zondy
const { Circle } = zondy.geometry
const { SimpleFillSymbol } = zondy.symbol
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import { Color,Feature,Circle, GraphicsLayer,SimpleFillSymbol} from "@mapgis/webclient-common"
// 创建一个要素
const feature = new Feature({
  //不填则创建一个随机的guid
  id: '你的id',
  //设置属性
  attributes: {},
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  }),
  //设置样式
  symbol: new SimpleFillSymbol({
    //设置颜色
    color: new Color(255, 0, 112, 1)
  })
})
// 初始化几何图层
const graphicsLayer = new GraphicsLayer({
  graphics:[feature]
})

删除图层

map.remove(graphicsLayer)

将要素添加入图层

// ES5引入方式
const { Feature,Color} = zondy
const { Circle } = zondy.geometry
const { SimpleFillSymbol } = zondy.symbol
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import { Feature,Color,Circle, GraphicsLayer,SimpleFillSymbol} from "@mapgis/webclient-common"
// 创建一个要素
const feature = new Feature({
  //不填则创建一个随机的guid
  id: '你的id',
  //设置属性
  attributes: {},
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  }),
  //设置样式
  symbol: new SimpleFillSymbol({
    //设置颜色
    color: new Color(255, 0, 112, 1)
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
// 添加要素
graphicsLayer.add(feature)

添加自定义坐标系的要素

// ES5引入方式
const { Feature,SpatialReference,Color} = zondy
const { Circle } = zondy.geometry
const { SimpleFillSymbol } = zondy.symbol
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import { Feature,SpatialReference,Color,Circle, GraphicsLayer,SimpleFillSymbol} from "@mapgis/webclient-common"
// 创建一个要素
const feature = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [403511.251934197, 3320534.43647428],
    // 半径，单位像素
    radius: 4,
    // 设置坐标系
    spatialReference: new SpatialReference({
      wkid: '坐标系的wkid'
    })
  }),
  //设置样式
  symbol: new SimpleFillSymbol({
    //设置颜色
    color: new Color(255, 0, 112, 1)
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
// 添加要素
graphicsLayer.add(feature)

图层可见性

 // ES5引入方式
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  GraphicsLayer } from "@mapgis/webclient-common"
// 创建图层时设置可见性
const graphicsLayer = new GraphicsLayer({
  // 设置图层visible
  visible: true
})

// 图层加载完成后，设置可见性
graphicsLayer.visible = !graphicsLayer.visible

图层透明度

// ES5引入方式
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  GraphicsLayer } from "@mapgis/webclient-common"
// 创建图层时设置透明度
const graphicsLayer = new GraphicsLayer({
  opacity: 1
})

// 图层加载完成后，设置可见性
graphicsLayer.opacity = 0.5

图层顺序

// 加载完毕后，更改图层顺序
map.reorder(graphicsLayer, '要移动到的index');

Members

deconflictionStrategyString

注记避让策略。

当前仅支持 SceneView，且仅支持 BillBoard、Label、Dom 图元进行避让（Dom 仅与 Dom 避让）。

elevationInfoElevationInfo

高程模式参数

extentExtent null

当前图形图层的范围。

该属性会根据 graphics 集合中的几何动态计算，结果统一投影为 EPSG:4326；当图层中没有可参与计算范围的要素时返回 null。

graphicsFeatureCollection.<Feature>

图形要素集合。

该属性为 FeatureCollection（响应式集合），用于存放当前图层的所有要素。

titleString

图层名称

typeLayerType

图层类型

Events

删除多个要素事件 document/layer/GraphicsLayer.js, line 257

删除多个要素语义事件（通过 layerview-update 识别）。

该事件用于表达“图形图层执行一次 removeMany 操作并完成渲染更新”。当前实现通过监听 layerview-update 事件，并在 event.updateContent 中筛选 name === 'removeMany' 的更新项来识别。

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

监听删除多个要素事件

graphicsLayer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  updateContent.forEach((item) => {
    if (item.name === 'removeMany') {
      console.log('删除多个要素事件:', event)
    }
  })
})

删除所有要素事件 document/layer/GraphicsLayer.js, line 284

删除所有要素语义事件（通过 layerview-update 识别）。

该事件用于表达“图形图层执行一次 removeAll 操作并完成渲染更新”。当前实现通过监听 layerview-update 事件，并在 event.updateContent 中筛选 name === 'removeAll' 的更新项来识别。

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

监听删除所有要素事件

graphicsLayer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  updateContent.forEach((item) => {
    if (item.name === 'removeAll') {
      console.log('删除所有要素事件:', event)
    }
  })
})

删除要素事件 document/layer/GraphicsLayer.js, line 230

删除要素语义事件（通过 layerview-update 识别）。

该事件用于表达“图形图层执行一次 remove 操作并完成渲染更新”。当前实现通过监听 layerview-update 事件，并在 event.updateContent 中筛选 name === 'remove' 的更新项来识别。

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

监听删除要素事件

graphicsLayer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  updateContent.forEach((item) => {
    if (item.name === 'remove') {
      console.log('删除要素事件:', event)
    }
  })
})

添加多个要素事件 document/layer/GraphicsLayer.js, line 203

添加多个要素语义事件（通过 layerview-update 识别）。

该事件用于表达“图形图层执行一次 addMany 操作并完成渲染更新”。当前实现通过监听 layerview-update 事件，并在 event.updateContent 中筛选 name === 'addMany' 的更新项来识别。

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

监听添加多个要素事件

graphicsLayer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  updateContent.forEach((item) => {
    if (item.name === 'addMany') {
      console.log('添加多个要素事件:', event)
    }
  })
})

添加要素事件 document/layer/GraphicsLayer.js, line 176

添加要素语义事件（通过 layerview-update 识别）。

该事件用于表达“图形图层执行一次 add 操作并完成渲染更新”。当前实现通过监听 layerview-update 事件，并在 event.updateContent 中筛选 name === 'add' 的更新项来识别。

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

监听添加要素事件

graphicsLayer.on('layerview-update', (event) => {
  const updateContent = event.updateContent || []
  updateContent.forEach((item) => {
    if (item.name === 'add') {
      console.log('添加要素事件:', event)
    }
  })
})

Methods

_calculateExtent(){Extent|null} document/layer/GraphicsLayer.js, line 827

计算Extent范围

Returns:

Type	Description
Extent \| null

add(feature){void} document/layer/GraphicsLayer.js, line 420

向图形图层中添加一个要素。

添加前会校验要素 id 是否重复；添加成功后会更新图层范围缓存状态，并触发图层更新事件。

Name	Type	Description
`feature`	Feature	要添加的要素。

Returns:

Type	Description
void

addMany(features){void} document/layer/GraphicsLayer.js, line 505

批量添加多个要素。

支持直接传入 FeatureSet 或 Feature 数组；添加后会更新范围缓存状态并触发图层更新事件。

Name	Type	Description
`features`	FeatureSet \| Array.<Feature>	要添加的要素集合。

Returns:

Type	Description
void

Example

添加要素组

// ES5引入方式
const { Feature } = zondy
const { Circle } = zondy.geometry
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
map.add(graphicsLayer)
// 一次添加多个要素
graphicsLayer.addMany([feature1, feature2])

clone(){GraphicsLayer} document/layer/GraphicsLayer.js, line 788

克隆当前图形图层。

会基于当前实例的序列化结果创建一个新的 GraphicsLayer 实例，包含相同的要素和配置。

Returns:

Type	Description
GraphicsLayer	克隆后的图形图层实例。

findGraphicById(id){Feature|null} document/layer/GraphicsLayer.js, line 685

根据要素 id 查找图层中的几何要素。

适用于在业务侧通过唯一标识快速定位图形图层中的单个要素。

Name	Type	Description
`id`	String	要素 id。

Returns:

Type	Description
Feature \| null	匹配到的要素；未找到时返回 `null`。

remove(feature){void} document/layer/GraphicsLayer.js, line 446

从图形图层中删除一个要素。

仅当目标要素已存在于当前图层中时才会执行删除；删除后会标记范围缓存失效并触发更新事件。

Name	Type	Description
`feature`	Feature	要删除的要素。

Returns:

Type	Description
void

Example

删除要素

// ES5引入方式
const { Feature,Color } = zondy
const { Circle } = zondy.geometry
const { GraphicsLayer } = zondy.layer
const { SimpleFillSymbol } = zondy.symbol

// ES6引入方式
import {  Feature,Color,Circle,GraphicsLayer,SimpleFillSymbol } from "@mapgis/webclient-common"
// 创建一个要素
const feature = new Feature({
  //不填则创建一个随机的guid
  id: '你的id',
  //设置属性
  attributes: {},
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  }),
  //设置样式
  symbol: new SimpleFillSymbol({
    //设置颜色
    color: new Color(255, 0, 112, 1)
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer()
graphicsLayer.add(feature)
map.add(graphicsLayer)
// 删除要素
graphicsLayer.remove(feature)

removeAll(){void} document/layer/GraphicsLayer.js, line 630

删除当前图层中的全部要素。

调用后 graphics 集合会被清空，图层范围会在下次访问时重新计算，并触发图层更新事件。

Returns:

Type	Description
void

Example

删除全部要素

// ES5引入方式
const { Feature } = zondy
const { Circle } = zondy.geometry
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  Feature,Color,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer({
  graphics: [feature1, feature2]
})
map.add(graphicsLayer)
// 删除全部要素
graphicsLayer.removeAll()

removeMany(features){void} document/layer/GraphicsLayer.js, line 566

批量删除多个要素。

仅会删除当前图层中已存在的要素；删除完成后会刷新范围缓存状态并触发图层更新事件。

Name	Type	Description
`features`	Array.<Feature>	要删除的要素数组。

Returns:

Type	Description
void

Example

删除要素组

// ES5引入方式
const { Feature } = zondy
const { Circle } = zondy.geometry
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
// 创建图层
const graphicsLayer = new GraphicsLayer({
  graphics: [feature1, feature2]
})
map.add(graphicsLayer)
// 一次删除多个要素
graphicsLayer.removeMany([feature1, feature2])

toJSON(){Object} document/layer/GraphicsLayer.js, line 763

导出为 JSON 配置。

返回结果包含图形图层的公共状态、几何要素集合和高程配置，可用于持久化或克隆。

Returns:

Type	Description
Object	图层配置对象。

GraphicsLayer.fromJSON(json){GraphicsLayer} document/layer/GraphicsLayer.js, line 698

通过 JSON 配置创建一个图形图层实例。

适用于从持久化配置恢复图形图层；返回实例会被直接标记为已加载状态。

Name	Type	Description
`json`	Object	可选 JSON 配置对象。

Returns:

Type	Description
GraphicsLayer	新的图形图层实例。

Example

通过传入的 JSON 构造并返回一个新的图层对象

// ES5引入方式
const { Feature } = zondy
const { Circle } = zondy.geometry
const { GraphicsLayer } = zondy.layer

// ES6引入方式
import {  Feature,Circle,GraphicsLayer } from "@mapgis/webclient-common"
// 创建一个要素
const feature1 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [113, 30],
    // 半径
    radius: 4
  })
})
const feature2 = new Feature({
  //构建几何
  geometry: new Circle({
    // 中心点
    center: [123, 33],
    // 半径
    radius: 4
  })
})
const json = {
  graphics: [feature1, feature2]
}
// 创建图层
const graphicsLayer = GraphicsLayer.fromJSON(json)

Class: GraphicsLayer

new GraphicsLayer(options)

Examples

Members

deconflictionStrategyString

elevationInfoElevationInfo

extentExtent null

graphicsFeatureCollection.<Feature>

titleString

typeLayerType

Events

删除多个要素事件

Properties:

Properties

Example

删除所有要素事件

Properties:

Properties

Example

删除要素事件

Properties:

Properties

Example

添加多个要素事件

Properties:

Properties

Example

添加要素事件

Properties:

Properties

Example

Methods

_calculateExtent(){Extent|null}

Returns:

add(feature){void}

Returns:

addMany(features){void}

Returns:

Example

clone(){GraphicsLayer}

Returns:

findGraphicById(id){Feature|null}

Returns:

remove(feature){void}

Returns:

Example

removeAll(){void}

Returns:

Example

removeMany(features){void}

Returns:

Example

toJSON(){Object}

Returns:

GraphicsLayer.fromJSON(json){GraphicsLayer}

Returns:

Example