new GraphicsLayer(options)
支持如下方法:
[1、添加要素][2、删除要素]
[3、添加要素组]
[4、删除要素组]
[5、删除全部要素]
[6、通过传入的json构造并返回一个新的几何对象]
7、导出为json对象8、克隆几何对象
图形图层,不支持在线数据,仅支持传入多个几何对象并绘制
目前二维和三维上支持4326(包括4490,4214以及4610),3857以及EPSG支持的自定义坐标系,若是想要绘制非4326坐标系几何,需要在初始化要素对象的几何时,指定具体坐标系
[ES5引入方式]:
zondy.layer.GraphicsLayer()
[ES6引入方式]:
import { GraphicsLayer } from "@mapgis/webclient-common"
针对图层的操作请在图层加载完毕事件中进行
Layer.on('layerview-created', function (result) {
console.log("加载完毕:", result.layer)
});
如果不想在该事件中放入业务代码,则请确认图层资源已加载完毕后再进行操作
if(layer.loadStatus === 'loaded') {
// 你的业务逻辑
}
| Name | Type | Description | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
构造参数
|
Fires
- Layer#event:图层加载完毕事件
- Layer#event:图层销毁完毕事件
- Layer#event:图层更新完毕事件
- Layer#event:图层显隐更新完毕事件
- Layer#event:图层透明度更新完毕事件
- Layer#event:图层顺序更新完毕事件
- GraphicsLayer#event:添加要素事件
- GraphicsLayer#event:添加多个要素事件
- GraphicsLayer#event:删除要素事件
- GraphicsLayer#event:删除多个要素事件
- GraphicsLayer#event:删除所有要素事件
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');
Extends
Members
-
capabilitiesObject
-
图层支持能力。图层支持能力分为客户端能力和服务端能力,其中客户端能力包含cesium、leaflet、mapboxgl引擎能力。默认图层客户端能力:所有引擎支持图层加载;默认图层服务端能力为空。
-
copyrightString
-
版权所有
-
deconflictionStrategyString
-
注记避让策略,可选1.'static'默认避让策略 2.'none' 无避让策略。当前仅支持SceneView,且仅支持BillBoard、Label、Dom图元进行避让,Dom图元只能和Dom图元避让
-
descriptionString
-
图层描述
-
elevationInfoElevationInfo
-
高程模式参数
-
extendPropsObject
-
额外属性,当前图层对象上不支持的属性,二次开发用户希望挂在图层对像上的属性可以存储到该属性中
- Default Value: {}
extensionOptionsObject
初始化图层的额外参数,可以通过该参数传入引擎原生的构造参数
- Default Value: {}
extentExtent
图层范围
graphicsFeatureCollection.<Feature>
几何对象数组
headersObject
设置服务请求头
httpMethodFetchMethod
http请求方式
idString
图层id
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
opacityNumber
图层透明度,0到1之间的值,0为完全透明,1为不透明,会触发图层更新完毕事件。IGSSceneLayer图层类型为地形时,不支持该属性。
spatialReferenceSpatialReference null
图层坐标系对象
titleString
图层名称
tokenAttachTypeTokenAttachType
token附加类型。默认psot请求优先附加到body,get请求优先附加到url末尾
tokenKeyString
token名
- Default Value: token
tokenValueString
token值
typeLayerType
图层类型
visibleNumber
图层显示或隐藏,true则显示,false则隐藏,会触发图层更新完毕事件
Events
-
删除多个要素事件
document/layer/GraphicsLayer.js, line 282 -
删除多个要素事件,请注意该事件是图层更新事件(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 === 'removeMany'){ console.log("删除多个要素事件:", event); } } }); -
删除所有要素事件
document/layer/GraphicsLayer.js, line 309 -
删除所有要素事件,请注意该事件是图层更新事件(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 === 'removeAll'){ console.log("删除所有要素事件:", event); } } }); -
删除要素事件
document/layer/GraphicsLayer.js, line 255 -
删除要素事件,请注意该事件是图层更新事件(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 === 'remove'){ console.log("删除要素事件:", event); } } }); -
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) }); -
添加多个要素事件
document/layer/GraphicsLayer.js, line 228 -
添加多个要素事件,请注意该事件是图层更新事件(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 === 'addMany'){ console.log("添加多个要素事件:", event); } } }); -
添加要素事件
document/layer/GraphicsLayer.js, line 201 -
添加要素事件,请注意该事件是图层更新事件(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 === 'add'){ console.log("添加要素事件:", event); } } });
Methods
-
GraphicsLayer.fromJSON(json)
document/layer/GraphicsLayer.js, line 721 -
Name Type Description jsonObject 可选 JSON对象
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 = new GraphicsLayer.fromJSON(json) -
_calculateExtent(){Extent|null}
document/layer/GraphicsLayer.js, line 796 -
计算Extent范围
Returns:
Type Description Extent | null -
add(feature)
document/layer/GraphicsLayer.js, line 444 -
添加要素,参考示例:[添加要素]
Name Type Description featureFeature 要添加的要素
-
addMany(features)
document/layer/GraphicsLayer.js, line 549 -
添加要素组
Name Type Description featuresFeatureSet | Array.<Feature> 要添加的要素数组或集合
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 766 -
克隆GraphicsLayer对象
Returns:
Type Description GraphicsLayer 克隆后的GraphicsLayer实例 -
inherited destroy(){*}
document/layer/baseLayer/Layer.js, line 618 -
Returns:
Type Description * -
findGraphicById(id){Feature|null}
document/layer/GraphicsLayer.js, line 682 -
根据几何图元id获取几何图元
Name Type Description idString Returns:
Type Description Feature | null -
inherited getProperty(path){*}
document/layer/baseLayer/Layer.js, line 818 -
获取属性
Name Type Description pathString Returns:
Type Description * 属性值 -
inherited isLoaded(){Boolean}
document/layer/baseLayer/Layer.js, line 543 -
判断图层是否加载成功
Returns:
Type Description Boolean 图层是否加载成功 -
inherited refresh()
document/layer/baseLayer/Layer.js, line 747 -
刷新图层
-
remove(feature)
document/layer/GraphicsLayer.js, line 498 -
删除要素
Name Type Description featureFeature 要删除的要素
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()
document/layer/GraphicsLayer.js, line 664 -
删除全部要素
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)
document/layer/GraphicsLayer.js, line 607 -
删除要素组
Name Type Description featuresArray.<Feature> 要删除的要素数组或集合
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]) -
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 是否设置成功 -
toJSON(){Object}
document/layer/GraphicsLayer.js, line 745 -
导出json对象
Returns:
Type Description Object json对象