VuePress

# new Ships66.layers.MarkLayer

new Ships66.layers.MarkLayer(vectorOption, option)

MarkerLayer 继承layer/Vector (opens new window)

参数	说明	类型	可选值	默认值
vectorOption	layer/Vector (opens new window)配置项参数	Object	-	-
option	图层配置项

属性	说明	类型	可选值	默认值
startDrawTip	绘制标记前的提示语	String	-	'单击开始划定区域'
continueTip	绘制过程中的提示语	String	-	'双击结束绘制'
fontStyle	标记名称的大小样式	String	-	bold 12px iconfont
iconSize	标记点的大小样式	String	-	bold 12px iconfont
fontColor	标记名称的颜色	String	-	#ffffff
fontBgColor	标记名称的背景颜色	String	-	'#8c9cad'
fontBgWidth	标记名称的背景颜色的粗细	Number	-	8
iconFont	标记地点的 Unicode 图标	String	-	''
iconColor	标记地点 Unicode 图标的颜色	String	-	'orange'
fillColor	标记面里面填充的颜色	String	-	'rgba(255, 255, 255, 0.4)'
graphStrokeColor	标记线、标记面的线的颜色	String	-	'rgba(255, 255, 255, 0.4)'
graphStrokeWidth	标记线、标记面的线的粗细	Number	-	2

事件说明
事件通过 on('事件名'，'回调函数')触发,详情查阅openlayers (opens new window)

事件名	说明	回调参数
drawEnd	画完标记、修改标记之后都会触发	function(e){}

TIP

MarkerLayer 存在 2 个 Layer，渲染层为 ml，绘制层 dl，该事件是从 ml 发射出来的，所以调用时需要通过 ml 触发。

const marker = new Ships66.layers.MarkLayer();
marker.on('drawEnd', (e) => {
  let {target,type,feature,radius} = e; // 返回的数据
  // target 当前图层MarkLayer
  // gis 当前feature的WKT格式，当类型为圆时代表圆心
  // feature 当前特征的数据
  // radius 当类型为圆时则返回半径，其他类型时返回null
});

调用 addInteraction()和 editFunc()都会触发 drawEnd
了解 WKT ：ol/format/WKT (opens new window)

# populate(data)

渲染标记入口

参数	说明	类型
data	渲染的数据	Array

data 格式如下：

[
  {
    "id": "唯一值",
    "name": "名称",
    "color": "为标记面时，是标记面的边框颜色RGBA格式，标记面的颜色与边框相同，透明度改为0.7；当为标记点时，是标记点的颜色",
    "style": "为标记点时，是标记点的图标样式，格式为Unicode",
    "type": "标记类型 Point：点，Line：线，Circle圆，Polygon多边形，Rectangle矩形",
    "gis": "LINESTRING(115.3449135417296 28.132760075132012,115.2680092448546 27.315866033752243,116.1469154948546 27.851429675949106)",
    "groupid": "组id",
    "perimeter": "标记圆的周长",
    "isShow": "显示隐藏，1显示，0隐藏"
  }
]

# updateFeature(item)

更新单条 feature 数据

参数	说明	类型
item	特征的 data 数据	String

{
  "id": "唯一值",
  "name": "名称",
  "color": "为标记面时，是标记面的边框颜色RGBA格式，标记面的颜色与边框相同，透明度改为0.7；当为标记点时，是标记点的颜色",
  "style": "为标记点时，是标记点的图标样式，格式为Unicode",
  "type": "标记类型 Point：点，Line：线，Circle圆，Polygon多边形，Rectangle矩形",
  "gis": "LINESTRING(115.3449135417296 28.132760075132012,115.2680092448546 27.315866033752243,116.1469154948546 27.851429675949106)",
  "groupid": "组id",
  "perimeter": "标记圆的周长",
  "isShow": "显示隐藏，1显示，0隐藏"
}

# countArea(data, feature)

计算标记线长度和标记面面积

参数	说明	类型
data	标记的数据	Object
feature	标记在地图上的特征	Object

返回值若有效则为字符串（"长度/面积+单位"），无效则返回空字符串（""）

# findById(id)

通过 id 返回 MarkerLayer 里存在 feature

参数	说明	类型
id	特征的 id	String

若查询的特征存在则返回特征feature (opens new window)

# setFeatureVisible(id,visible)

设置单个标记显示隐藏

参数	说明	类型
id	标记的 id	Object
otherStyle	标记的显示隐藏，true 为显示，false 为隐藏	Object

# setGroupsVisible(groupId, isShow)

设置标记组的显示隐藏

参数	说明	类型
groupId	标记的组 id	String
isShow	标记 1 为显示，2 为隐藏	Number

# addInteraction(drawType, otherStyle, isShowTip = false)

画标记的工具方法

参数	说明	类型	参数
drawType	标记的类型	String	Place(点),LineString(线),Circle(圆),Polygon(多边形),Rectangle(矩形)
otherStyle	标记的样式	Object	{ style: '', color: 'red' }，style 是点的样式，color 是点的颜色
isShowTip	标记的提示工具	Boolean	默认值为 false，在绘制过程中会显示提示语在

# changeFeatureStyle(obj,id)

设置或更改标记的样式

参数	说明	类型
obj	标记的线颜色和填充颜色{ lineColor, insideColor, color, style }（lineColor 标记线的颜色，insideColor 标记填充面颜色，color 标记点颜色，style 标记点颜色）	Object
id	标记的 id	String

# editFunc(data,otherStyle)

编辑标记

参数	说明	类型
data	标记的数据	Object
otherStyle	标记点的样式和颜色{style:'',color:''}（style 标记点 icon，color 标记点颜色）	Object

# findMarker(data, fly = true)

定位到标记所在的位置

参数	说明	类型
data	标记的数据	Object
fly	是否有飞行动画	Boolean

# deleteFunc(data)

在地图上删除标记

参数	说明	类型
data	标记的数据	Object

# cancelDrawOrEdit(showTip = false)

在地图上删除标记

参数	说明	类型
showTip	标记的提示语是否存在，为 true 时，使用当前方法会清除提示语	Boolean

← 标记（MarkerLayer）