GraphicLayer

new mars2d.layer.GraphicLayer(options)

矢量数据图层

参数名称 类型 描述信息
options Object 可选

参数对象,包括以下:

参数名称 类型 默认值 描述信息
hasEdit Boolean false 可选

是否自动激活编辑(true时,单击后自动激活编辑)

isAutoEditing Boolean true 可选

完成标绘时是否自动启动编辑(需要hasEdit:true时)

isContinued Boolean false 可选

是否连续标绘

isDblclickForDrawEnd Boolean true 可选

是否双击自动结束标绘

symbol Object | function 可选

矢量数据的style样式,为Function时是完全自定义的回调处理 symbol(attr, style, feature),GraphicLayer图层仅loadGeoJSON方法中有效

参数名称 类型 描述信息
type GraphicType | String 可选

标识数据类型,默认是根据数据生成 point、polyline、polygon

styleOptions Object

Style样式,每种不同类型数据都有不同的样式,具体见各GraphicType矢量数据的style参数。

styleField String 可选

按 styleField 属性设置不同样式。

styleFieldOptions Object 可选

按styleField值与对应style样式的键值对象。

callback function 可选

自定义判断处理返回style ,示例:callback: function (attr, styleOpt){ return { color: "#ff0000" }; }

popup String | Array.<Globe.getTemplateHtml_template> | function 可选

绑定的popup弹窗值,也可以bindPopup方法绑定,支持:'all'、数组、字符串模板

popupOptions Map.PopupOptions 可选

popup弹窗时的配置参数,还包括:

参数名称 类型 描述信息
title String 可选

固定的标题名称

titleField String 可选

标题对应的属性字段名称

noTitle String 可选

不显示标题

tooltip String | Array.<Globe.getTemplateHtml_template> | function | Object 可选

绑定的tooltip弹窗值,也可以bindTooltip方法绑定,参数与popup属性完全相同。

tooltipOptions Map.TooltipOptions 可选

tooltip弹窗时的配置参数,还包括:

参数名称 类型 描述信息
title String 可选

固定的标题名称

titleField String 可选

标题对应的属性字段名称

noTitle String 可选

不显示标题

contextmenuItems Object 可选

绑定的右键菜单值,也可以bindContextMenu方法绑定

id String | Number createGuid() 可选

图层id标识

pid String | Number -1 可选

图层父级的id,一般图层管理中使用

name String '' 可选

图层名称

show Boolean true 可选

图层是否显示

zIndex Number 可选

瓦片层的显式zIndex

pane String 'overlayPane' 可选

指定图层添加到地图的哪个pane的DIV中,用于控制不同层级显示的,优先级高于zIndex。

参考:

继承

  • L.FeatureGroup

成员(属性)

readonly graphics : Array.<L.Layer>

当前图层内的矢量数据数组

hasEdit : Boolean

是否自动激活编辑(true时,单击后自动激活编辑)

readonly hasOpacity : boolean

是否可以调整透明度

id : String|Number

对象的id标识

readonly isAdded : Boolean

是否已添加到地图

readonly isDrawing : Boolean

是否正在绘制中

readonly isEditing : Boolean

是否正在编辑状态

readonly length : Number

图层内的Graphic矢量数据个数

name : String

名称 标识

opacity : Number

透明度

pid : String|Number

对象的pid标识

show : Boolean

显示隐藏状态

zIndex : Number

图层顺序,数字大的在上面。

方法

activateEdit()GraphicLayer

激活编辑,绑定相关处理,同 hasEdit=true

返回值:

当前对象本身,可以链式调用

addEventParent(obj)GraphicLayer

添加抛出事件到父类,它将接收传播的事件

参数名称 类型 描述信息
obj Object

父类对象

返回值:

当前对象本身,可以链式调用

addGraphic(graphic)L.Layer|Array.<L.Layer>

添加Graphic矢量数据

参数名称 类型 描述信息
graphic L.Layer | Object | Array.<L.Layer>

待添加的矢量数据 或 矢量数据构造参数

返回值:

矢量数据

addTo(map)GraphicLayer

将图层添加到地图

参数名称 类型 描述信息
map Map

地图对象

返回值:

当前对象本身,可以链式调用

bindContextMenu(contextmenuItems)Map

绑定右键菜单

参数名称 类型 描述信息
contextmenuItems Array.<Object>

右键菜单数组

返回值:

当前对象本身,可以链式调用

bindContextMenu(content)GraphicLayer

绑定右键菜单

参数名称 类型 描述信息
content Array.<Object>

右键菜单配置数组,数组中每一项包括:

参数名称 类型 描述信息
text String 可选

菜单文字

iconCls String 可选

小图标css

show function | Boolean 可选

菜单项是否显示的回调方法

callback function 可选

菜单项单击后的回调方法

返回值:

当前对象本身,可以链式调用

使用示例:
//在layer上绑定右键菜单
  graphicLayer.bindContextMenu([
    {
      text: "开始编辑对象",
      iconCls: "fa fa-edit",
      show: function (e) {
        let graphic = e.graphic;
        if (!graphic || !graphic.editing) {
          return false;
        }
        return !graphic.editing.enabled();
      },
      callback: function (e) {
        let graphic = e.graphic;
        if (graphic && graphic.editing) {
          graphic.editing.enable();
        }
      },
    },
    {
      text: "停止编辑对象",
      iconCls: "fa fa-edit",
      show: function (e) {
        let graphic = e.graphic;
        if (!graphic || !graphic.editing) {
          return false;
        }
        return graphic.editing.enabled();
      },
      callback: function (e) {
        let graphic = e.graphic;
        if (graphic && graphic.editing) {
          graphic.editing.disable();
        }
      },
    },
    {
      text: "删除对象",
      iconCls: "fa fa-trash-o",
      show: (event) => {
        let graphic = event.graphic;
        if (!graphic) {
          return false;
        } else {
          return true;
        }
      },
      callback: function (e) {
        let graphic = e.graphic;
        if (!graphic) {
          return;
        }
        graphicLayer.removeGraphic(graphic);
      },
    },
  ]);

bindPopup(content, options)GraphicLayer

绑定Popup弹窗配置

参数名称 类型 描述信息
content String | HTMLElement | function | L.Popup

Popup弹窗内容

options Map.PopupOptions | Object 可选

Popup弹窗参数

返回值:

当前对象本身,可以链式调用

bindTooltip(content, options)GraphicLayer

绑定Tooltip弹窗配置

参数名称 类型 描述信息
content String | HTMLElement | function | L.Tooltip

Tooltip弹窗内容

options Map.TooltipOptions | Object 可选

Tooltip弹窗参数

返回值:

当前对象本身,可以链式调用

bringToBack()GraphicLayer

将图层置于所有图层之下

返回值:

当前对象本身,可以链式调用

bringToBack()WfsLayer

将图层置于所有图层之下

返回值:

当前对象本身,可以链式调用

bringToFront()GraphicLayer

将图层置于所有图层之上

返回值:

当前对象本身,可以链式调用

bringToFront()WfsLayer

将图层置于所有图层之上

返回值:

当前对象本身,可以链式调用

clear()void

清除图层内所有矢量数据

返回值:

clearDrawing()boolean

清除正在绘制的对象

返回值:

是否清除了对象

closePopup()GraphicLayer

关闭打开的弹窗

返回值:

当前对象本身,可以链式调用

closeTooltip()GraphicLayer

关闭打开的弹窗

返回值:

当前对象本身,可以链式调用

destroy()void

销毁当前图层

返回值:

disableEdit()GraphicLayer

释放编辑,解除绑定相关事件,同 hasEdit=false

返回值:

当前对象本身,可以链式调用

eachGraphic(method, context)GraphicLayer

遍历所有矢量数据并将其作为参数传递给回调函数

参数名称 类型 描述信息
method function

回调方法

context Object 可选

侦听器的上下文(this关键字将指向的对象)。

返回值:

当前对象本身,可以链式调用

endDraw()GraphicLayer

完成绘制和编辑,如有未完成的绘制会自动完成。 在移动端需要调用此方法来类似PC端双击结束。

返回值:

当前对象本身,可以链式调用

fire(type, data, propagate)void

触发指定类型的事件。

参数名称 类型 默认值 描述信息
type String | EventType

事件类型

data Object 可选

传输的数据或对象,可在事件回调方法中event对象中获取进行使用

propagate BaseClass | Object null 可选

将事件传播给父类 (用addEventParent设置)

返回值:

flyTo(options)GraphicLayer

执行平滑的飞行动画,移动缩放地图范围至指定的数据范围

参数名称 类型 描述信息
options Object 可选

定位参数,包括:

参数名称 类型 默认值 描述信息
paddingTopLeft L.Point | Array.<Number> 可选

设置在将视图设置为适合边界时不应考虑的地图容器左上角的填充量。如果您在地图上有一些控件重叠式(如侧边栏),而且您不希望它们遮挡您正在缩放的对象,则很有用。

paddingBottomRight L.Point | Array.<Number> 可选

同上,不考虑地图容器右下角时使用。

padding L.Point | Array.<Number> 可选

相当于将左上和右下填充设置为相同的值。

maxZoom Number 可选

最大层级

animate Boolean true 可选

是否进行动画缩放。false时始终重置视图完全没有动画。

duration Number 0.25 可选

动画平移的持续时间,以秒为单位。

easeLinearity Number 0.25 可选

平移动画宽松的曲率因子 Cubic Bezier curve曲线的第三个参数。1.0表示线性动画,而这个数字越小,曲线越鞠躬。

noMoveStart Boolean false 可选

如果true,平移不会movestart在启动时触发事件(内部用于平移惯性)。

返回值:

当前对象本身,可以链式调用

getBounds()L.LatLngBounds

获取图层矩形边界

返回值:

矩形边界

getContextMenu()Array.<Object>

获取绑定的右键菜单

返回值:

右键菜单数组

getContextMenu()Array.<object>

获取绑定的右键菜单数组

返回值:

右键菜单数组

getGraphicById(id)L.Layer

根据id取矢量数据对象

参数名称 类型 描述信息
id Number | String

矢量数据id

返回值:

矢量数据对象

getGraphics()Array.<L.Layer>

获取图层内 所有矢量数据

返回值:

矢量数据数组

getPopup()L.Popup

获取当前绑定在图层上的Popup弹窗对象

返回值:

Popup弹窗对象

getTooltip()L.Tooltip

获取当前绑定在图层上的Tooltip弹窗对象

返回值:

Tooltip弹窗对象

hasContextMenu()Boolean

是否有绑定的右键菜单

返回值:

当前对象本身,可以链式调用

hasGraphic(graphic)Boolean

是否包含Graphic矢量数据

参数名称 类型 描述信息
graphic *

矢量数据

返回值:

是否包含

hasPopup()Boolean

是否存在Popup绑定

返回值:

是否存在Popup绑定

hasTooltip()Boolean

是否绑定了tooltip

返回值:

是否绑定

isPopupOpen()boolean

当前绑定的弹窗是是否打开

返回值:

是否打开弹窗

isTooltipOpen()boolean

当前绑定的弹窗是是否打开

返回值:

是否打开弹窗

listens(type, propagate)Boolean

是否有绑定指定的事件

参数名称 类型 描述信息
type String | EventType

事件类型

propagate Object 可选

是否判断指定的父类 (用addEventParent设置的)

返回值:

是否存在

loadGeoJSON(geojson, options)Array.<Marker>|Array.<Polyline>|Array.<Polygon>|Array.<Circle>|Array.<Rectangle>|*

加载转换GeoJSON格式规范数据为Graphic后加载到图层中。

参数名称 类型 描述信息
geojson String | Object

GeoJSON格式规范数据

options Object 可选

加载控制参数,包含:

参数名称 类型 默认值 描述信息
clear Boolean false 可选

是否清除图层已有数据

flyTo Boolean false 可选

是否加载完成后进行飞行到数据区域

type GraphicType | String 可选

转为指定的类型

style Object 可选

可以设置指定style样式,每种不同类型数据都有不同的样式,具体见各矢量数据的style参数。GraphicType

crs String 可选

原始数据的坐标系,如'EPSG:3857' (可以从 http://epsg.io查询)

onEachFeature function 可选

创建每个Graphic前的回调

filter function 可选

数据筛选方法,方法体内返回false时排除数据 filter:function(feature){return true}

返回值:

转换后的Graphic对象数组

off(types, fn, context)void

解除绑定指定类型事件监听器

参数名称 类型 描述信息
types String | EventType | Object 可选

事件类型,Object时删除一组类型/侦听器对。

fn function 可选

绑定的监听器回调方法

context Object 可选

侦听器的上下文(this关键字将指向的对象)。

返回值:

on(type, fn, context)void

绑定指定类型事件监听器

参数名称 类型 描述信息
type String | EventType | Object

事件类型,当是Object时可以添加一组类型/侦听器对,例如 {click: onClick, mousemove: onMouseMove}

fn function 可选

绑定的监听器回调方法

context Object 可选

侦听器的上下文(this关键字将指向的对象)。

返回值:

once(types, fn, context)void

绑定一次性执行的指定类型事件监听器 与on类似,监听器只会被触发一次,然后被删除。

参数名称 类型 描述信息
types String | EventType | Object 可选

事件类型,Object时删除一组类型/侦听器对。

fn function 可选

绑定的监听器回调方法

context Object 可选

侦听器的上下文(this关键字将指向的对象)。

返回值:

openPopup(graphic, latlng)GraphicLayer

打开Popup弹窗

参数名称 类型 描述信息
graphic Marker | Polyline | Polygon | *

矢量数据

latlng L.LatLng 可选

指定弹出的位置

返回值:

当前对象本身,可以链式调用

openTooltip(latlng)GraphicLayer

打开Tooltip弹窗

参数名称 类型 描述信息
latlng L.LatLng 可选

位置,如果latlng没有设置则在默认的所在位置打开。

返回值:

当前对象本身,可以链式调用

remove()GraphicLayer

将图层从地图上移除

返回值:

当前对象本身,可以链式调用

removeEventParent(obj)GraphicLayer

移除抛出事件到父类

参数名称 类型 描述信息
obj Object

父类对象

返回值:

当前对象本身,可以链式调用

removeGraphic(graphic)GraphicLayer

移除Graphic矢量数据

参数名称 类型 描述信息
graphic L.Layer

矢量数据

返回值:

当前对象本身,可以链式调用

setOpacity(opacity)GraphicLayer

设置覆盖的透明度

参数名称 类型 描述信息
opacity Number

透明度,取值范围 0-1

返回值:

当前对象本身,可以链式调用

setPopupContent(content)GraphicLayer

设定绑定在图层上的弹窗的内容

参数名称 类型 描述信息
content String | HTMLElement | L.Popup

Popup弹窗内容

返回值:

当前对象本身,可以链式调用

setTooltipContent(content)GraphicLayer

设定绑定在图层上的弹窗的内容

参数名称 类型 描述信息
content String | HTMLElement | L.Tooltip

Tooltip弹窗内容

返回值:

当前对象本身,可以链式调用

setZIndex(zIndex)GraphicLayer

调用setZIndex此组中包含的每个图层,传递z-index。

参数名称 类型 描述信息
zIndex Number

图层顺序值

返回值:

当前对象本身,可以链式调用

startDraw(options)L.Layer

开始绘制矢量数据,绘制的数据会加载在当前图层。

参数名称 类型 描述信息
options Object

Graphic构造参数,包含:

参数名称 类型 默认值 描述信息
type GraphicType | String

类型

style Object 可选

按type支持 GraphicType 类的构造方法参数

attr Object 可选

附带的属性信息

maxPointNum Number 9999 可选

绘制时,最多允许点的个数, 仅部分线面对象支持。

success function 可选

绘制创建完成的回调方法,同drawCreated事件,例如: success: function (graphic){ }

返回值:

创建完成的矢量数据对象

startEditing(graphic)GraphicLayer

激活编辑指定的矢量数据

参数名称 类型 描述信息
graphic Marker | Polyline | Polygon | Circle | Rectangle | *

需要激活编辑的矢量数据

返回值:

当前对象本身,可以链式调用

stopDraw()boolean

停止绘制。 线面对象:未完成的绘制会自动删除,已绘制的会完成在最后一个点位; 点状对象:会结束停留在最后一个点位,未完成的绘制会自动删除 如果需要清除正在绘制的对象,请用 clearDrawing() 方法

返回值:

是否清除了未完成的对象

stopEditing(graphic)GraphicLayer

停止编辑,释放正在编辑的对象。

参数名称 类型 描述信息
graphic Marker | Polyline | Polygon | Circle | Rectangle | * 可选

需要停止编辑的矢量数据,默认为上一次正在编辑的对象

返回值:

当前对象本身,可以链式调用

toGeoJSON()Object

将图层内的矢量数据转为GeoJSON格式对象

返回值:

返回GeoJSON格式对象(作为GeoJSON GeometryCollection)。

toGeoJSON(options)Object

将图层数据导出为GeoJSON格式规范对象。

参数名称 类型 描述信息
options Object 可选

参数对象: 预留参数

返回值:

GeoJSON格式规范对象

toJSON()Object

将图层转为Json简单对象,用于存储后再传参加载

返回值:

Json简单对象

unbindContextMenu()Map

解除绑定右键菜单

返回值:

当前对象本身,可以链式调用

unbindContextMenu()GraphicLayer

解除绑定的右键菜单

返回值:

当前对象本身,可以链式调用

unbindPopup()GraphicLayer

解除绑定Popup弹窗配置

返回值:

当前对象本身,可以链式调用

unbindTooltip()GraphicLayer

解除绑定Tooltip弹窗配置

返回值:

当前对象本身,可以链式调用

定义的类型

mars2d.layer.GraphicLayer.EventType

当前类支持的EventType事件类型(包括自定义字符串事件名)

属性:
属性名称 类型 描述信息
layeradd String

添加矢量数据之后触发

layerremove String

移除矢量数据之后触发

add String

添加到map地图上之后触发

remove String

从地图map上移除之后触发

click String

当用户单击(or taps)地图时触发

dblclick String

当用户双击(or double-taps)地图时触发

mousedown String

当用户在图层上按下鼠标按钮时触发

mouseover String

当鼠标进入图层时触发

mouseout String

当鼠标离开图层时触发

popupopen String

当绑定到当前图层的Popup弹窗打开时触发

popupclose String

当绑定到当前图层的Popup弹窗关闭时触发

tooltipopen String

当Tooltip提示框绑定到这个图层并打开时触发

tooltipclose String

当Tooltip提示框绑定到这个图层并关闭时触发

drawStart String

开始绘制 标绘事件

drawMouseMove String

正在移动鼠标中,绘制过程中鼠标移动了点 标绘事件

drawAddPoint String

绘制过程中增加了点 标绘事件

drawRemovePoint String

绘制过程中删除了最后一个点 标绘事件

drawCreated String

创建完成 标绘事件

editStart String

开始编辑 标绘事件

editMouseMove String

正在移动鼠标中,正在编辑拖拽修改点中标绘事件

editMovePoint String

编辑修改了点标绘事件

editRemovePoint String

编辑删除了点 标绘事件

editAddPoint String

编辑增加了中间点标绘事件

editStyle String

图上编辑修改了相关style属性 标绘事件

editStop String

停止编辑 标绘事件

使用示例:
//绑定监听事件
graphicLayer.on('popupopen', function (event) {
  console.log('触发了事件',event)
});
参考: