Class: Marker

Marker

点标记,可以完成带有图标和文字标签的显示,也可以只显示图标,也可以只显示文字。

  const marker = new Marker({
    position: [122.144666, 29.95417],
    icon: {
      anchor: [0.5, 1],
      scale: 0.3,
      src: require("../../assets/dataImages/monitor.png")
    },
    text: {
      content: "金鼎轩",
      direction: "right",
      offset: [0, 0],
      textFill: {
        color: "#1296DB"
      },
      textStroke: {
        color: "#fff",
        width: 2
      }
    }
  });
  const layer_ = new VectorLayer({
    name: "Marker测试",
    zIndex: 1
  });
  layer_.addFeature(maker);
  map.addLayer(layer_);

new Marker(options)

overlay/Marker.js, line 45

构造一个点标记对象

Name Type Description
options MarkerOptions

通过MarkerOptions设置点标记对象的属性

Name Type Description
position Array

点位坐标值 [lng,lat]
zIndex Number

Marker的显示顺序
extData Any

用户自定义属性，支持JavaScript API任意数据类型， 如Marker的id等 地图容器DIV的ID值或者DIV对象
icon IconOptions

需在点标记中显示的图标的属性对象(如果只想显示文字 标签,不需要设置该对象参数)

Name Type Default Description
anchor Array [0.5, 0.5] optional

锚点,默认图标中心
scale Number 1 optional

图标大小比例,值域[0-1]
src String

图标资源url
备注

更多详细属性，点击链接查看： https://openlayers.org/en/latest/apidoc/module-ol_style_Icon.html
text TextOptions

需在点标记中显示的文字标签的属性对象(如果只想显示 图标,不需要设置该对象参数)

Name Type Default Description
content String

标记显示的文本内容
font String `bold 15px 黑体` optional

字体样式为CSS“字体”值，请参见： https : //developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font。
direction String "right" optional

相对于图标的方位,可选值： 'top' 'right' 'bottom' 'left' 'center'
offset Array [0,0] optional

相对于 direction 的位置偏移
textFill Object.<FillOptions>

字体填充样式

Name Type Default Description
color String "#333" optional

字体填充颜色
opacity Number 1 optional

字体填充颜色透明度
textStroke Object.<StrokeOptions>

字体描边样式

Name Type Default Description
color String "#fff" optional

字体描边颜色
width Number 2 optional

文字描边宽度
backgroundFill Object.<FillOptions>

字体背景填充样式,默认无背景填充
backgroundStroke Object.<StrokeOptions>

字体背景边框样式,默认无背景边框
备注

更多属性，链接查看: https://openlayers.org/en/latest/apidoc/module-ol_style_Text-Text.html

Extends

Classes

Marker

Methods

inherited addToLayer(layer){Feature}

overlay/CustomFeature.js, line 133

要素添加到指定图层

Name Type Description
layer VectorLayer

要素要添加的图层
Returns:
Type Description
Feature 当前overlay要素对象

inherited getExtData(){Any}

overlay/CustomFeature.js, line 157

获取要素绑定的额外数据

Returns:
Type Description
Any extData 用户自定义属性，支持JavaScript API任意数据类型， 如Circle的id等 地图容器DIV的ID值或者DIV对象

inherited getFill(){Object.<FillOptions>}

overlay/CustomFeature.js, line 213

获取要素的填充设置

Returns:
Type Description
Object.<FillOptions> fillOptions要素的填充设置

getIcon(){Object.<IconOptions>}

overlay/Marker.js, line 159

获取Marker的图标属性

Returns:
Type Description
Object.<IconOptions> 图标属性

getPosition(){Array}

overlay/Marker.js, line 131

获取Marker的坐标

Returns:
Type Description
Array position坐标

inherited getStroke(){Object.<StrokeOptions>}

overlay/CustomFeature.js, line 250

获取要素的stroke样式属性

Returns:
Type Description
Object.<StrokeOptions> 要素的stroke样式属性

getText(){Object.<TextOptions>}

overlay/Marker.js, line 187

获取Marker的文字属性

Returns:
Type Description
Object.<TextOptions> 文字属性

inherited getZIndex(){Number}

overlay/CustomFeature.js, line 185

获取要素显示顺序

Returns:
Type Description
Number zIndex要素的显示顺序

inherited on(type, callback, context){Object}

overlay/CustomFeature.js, line 88

要素监听不同类型的事件

Name Type Default Description
type String

事件类型,现暂支持:mouseover/mouseout/click/singleclick/dblclick /pointerdrag/pointermove
callback function

回调函数
context Object this optional

上下文环境
Returns:
Type Description
Object 返回事件类型以及回调函数

inherited setExtData(extData)

overlay/CustomFeature.js, line 146

给要素绑定额外数据

Name Type Description
extData Any

用户自定义属性，支持JavaScript API任意数据类型， 如Circle的id等 地图容器DIV的ID值或者DIV对象

inherited setFill(fillOptions)

overlay/CustomFeature.js, line 194

设置要素的填充颜色,当要素类有这个属性时才起作用,可以设置fill里面的单个属性

Name Type Description
fillOptions Object.<FillOptions>

要素的填充设置

setIcon(iconOptions)

overlay/Marker.js, line 140

设置Marker的图标

Name Type Description
iconOptions Object.<IconOptions>

图标需要修改的一些属性

setPosition(position)

overlay/Marker.js, line 114

设置Marker的位置坐标

Name Type Description
position Array

坐标

inherited setStroke(strokeOptions)

overlay/CustomFeature.js, line 222

设置要素的stroke样式,当要素类有这个属性时才起作用,可以设置stroke里面的单个属性

Name Type Description
strokeOptions Object.<StrokeOptions>

要素的stroke样式属性

setText(textOptions)

overlay/Marker.js, line 168

设置Marker的文字

Name Type Description
textOptions Object.<TextOptions>

文字需要修改的一些属性

inherited setZIndex(zIndex)

overlay/CustomFeature.js, line 166

设置要素显示顺序

Name Type Description
zIndex Number

要素的显示顺序

inherited un(type, callback, context)

overlay/CustomFeature.js, line 105

移出要素事件的监听

Name Type Default Description
type String

事件类型,现暂支持:mouseover/mouseout/click/singleclick/dblclick /pointerdrag/pointermove
callback function

回调函数
context Object this optional

上下文环境