# new Ships66.layers.MarkerLayer
TIP
新版标记优化了写法,使调用更加简单
new Ships66.layers.MarkerLayer(vectorOption, option)
MarkerLayer 继承layer/Vector (opens new window)
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
vectorOption | layer/Vector (opens new window)配置项参数 | Object | - | - |
option | 图层配置项 | 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 触发。
import { WKT } from 'ol/format';
const marker = new Ships66.layers.MarkLayer();
marker.ml.on('drawEnd', (e) => {
let {target,type,feature,radius} = e; // 返回的数据
// target 当前图层MarkLayer
// type 当前绘制/编辑的feature类型
// feature 当前特征的数据
// radius 当类型为圆时则返回半径,其他类型时返回null
const geometry = new WKT().writeFeature(e.feature, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
}); // 将数据转成WKT格式存储和读取
});
调用 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隐藏"
}
]
TIP
color属性名,为 null 或''时则标记为默认颜色;若有值则为相应的颜色。
style属性名,为 null 或''时则标记点为默认样式;若有值则为相应的 icon 样式。
# findById(id)
查找 feature
参数 | 说明 | 类型 |
---|---|---|
id | 特征的 id | String |
若查询的特征存在则返回特征feature (opens new window)
# countArea(data, feature)
计算标记线长度和标记面面积
参数 | 说明 | 类型 |
---|---|---|
data | 标记的数据 | Object |
feature | 标记在地图上的特征 | Object |
返回值若有效则为字符串("长度/面积+单位"),无效则返回空字符串("")
# setMarkersShow(groupId, isShow)
设置标记组的显示隐藏
参数 | 说明 | 类型 |
---|---|---|
groupId | 标记的组 id | String |
isShow | 标记 1 为显示,2 为隐藏 | Number |
# findMarker(data, fly = true)
定位到标记所在的位置
参数 | 说明 | 类型 |
---|---|---|
data | 标记的数据 | Object |
fly | 是否有飞行动画 | Boolean |
# deleteFunc(data)
在地图上删除标记
参数 | 说明 | 类型 |
---|---|---|
data | 标记的数据 | Object |
# editFunc(data,otherStyle)
编辑标记
参数 | 说明 | 类型 |
---|---|---|
data | 标记的数据 | Object |
otherStyle | 标记点的样式和颜色{style:'',color:''}(style 标记点 icon,color 标记点颜色) | Object |
# setFeatureVisible(id,visible)
设置单个标记显示隐藏
参数 | 说明 | 类型 |
---|---|---|
id | 标记的 id | Object |
otherStyle | 标记的显示隐藏,true 为显示,false 为隐藏 | Object |
# addInteraction(drawType, otherStyle, isShowTip = false)
画标记的工具方法
参数 | 说明 | 类型 | 参数 |
---|---|---|---|
drawType | 标记的类型 | String | Place(点),LineString(线),Circle(圆),Polygon(多边形),Rectangle(矩形) |
otherStyle | 标记的样式 | Object | { style: '', color: 'red' },style 是点的样式,color 是点的颜色 |
isShowTip | 标记的提示工具 | Boolean | 默认值为 false,在绘制过程中会显示提示语在 |
# setFeatureColor(obj,id)
设置或更改标记的样式
参数 | 说明 | 类型 |
---|---|---|
obj | 标记的线颜色和填充颜色{ lineColor, insideColor, color, style }(lineColor 标记线的颜色,insideColor 标记填充面颜色,color 标记点颜色,style 标记点颜色) | Object |
id | 标记的 id | String |
# cancelDrawFun()
关闭新增或者编辑
# clearDrawLayer()
清除绘制图层上的标记