Class: CustomLabel

CustomLabel

用于在地图上显示一些自定义标签

const label = new CustomLabel({
    position: [118.792063, 31.92046],
    content: `<h1>第一个自定义标签!!!</h1>`
  });
this.$map.addOverlay(label);
// 绑定事件
const listener_ = label.on("mouseover", (evt, evt1) => {
  console.log(evt, evt1);
});
label.on("change:position", evt => {
  console.log(evt);
});

new CustomLabel(options)

overlay/CustomLabel.js, line 27

构造一个自定义标签。

Name Type Description

options

Object

通过options设计标签

Name	Type	Default	Description
`position`	Array		标签显示基点位置
`content`	String \| HTMLElement	""	optional 标签显示内容
`className`	String		自定义标签容器(父元素)的类名
`labelClassName`	String	"ay-label"	optional 自定义标签样式的类名
`zIndex`	Number	0	optional 自定义标签显示的顺序
`offset`	Array	[0, 0]	optional 放置标签时使用的像素偏移量。数组中的第一个元素是水平偏移量。正值将标签右移。数组中的第二个元素是垂直偏移量。正值会将标签向下移动。
`extData`	Any		用户自定义属性，支持JavaScript API任意数据类型，如Overlay的类型type,overlay相关数据对象等。
`positioning`	String	"center-center"	optional 定义覆盖相对于其位置属性的实际位置。可选值为：'bottom-left', 'bottom-center', 'bottom-right', 'center-left', 'center-center', 'center-right', 'top-left', 'top-center', and 'top-right'.
`备注`			更多的属性方法，请参考链接内容(支持链接中的所有方法属性)：https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

Classes

CustomLabel

Methods

getContent(){String|HTMLElement} overlay/CustomLabel.js, line 98

获取标签内容

Returns:

Type	Description
String \| HTMLElement	标签内容，可以是HTML要素字符串或者HTMLElement对象

getExtData(){Any} overlay/CustomLabel.js, line 196

获取标签绑定的额外数据

Returns:

Type	Description
Any	用户自定义属性，支持JavaScript API任意数据类型。

getOffset(){Array} overlay/CustomLabel.js, line 178

获取放置标签时使用的像素偏移量

Returns:

Type	Description
Array	放置标签时使用的像素偏移量。

getPosition(){Array} overlay/CustomLabel.js, line 138

获取标签位置

Returns:

Type	Description
Array	标签位置，经纬度数组

getPositioning(){String} overlay/CustomLabel.js, line 159

获取标签相对于其position属性的实际放置方式

Returns:

Type	Description
String	标签相对于其position属性的实际放置方式。

getZIndex(){Number} overlay/CustomLabel.js, line 120

获取标签内容显示顺序zIndex值

Returns:

Type	Description
Number	标签内容显示顺序zIndex值

on(type, listener){EventLisener} overlay/CustomLabel.js, line 209

给标签绑定事件

Name	Type	Description
`type`	String	事件类型,支持类型:mouseover/mouseout/mousedown/mouseup /click/dblclick/rightclick
`listener`	function	回调函数,返回两个参数，一个参数为：当前的标签对象；一个为当前的事件对象

Returns:

Type	Description
EventLisener	返回当前的事件对象，用于注销事件

setContent(content) overlay/CustomLabel.js, line 85

设置标签内容

Name	Type	Description
`content`	String \| HTMLElement	标签内容，可以是HTML要素字符串或者HTMLElement对象

setExtData(extData) overlay/CustomLabel.js, line 187

绑定标签的额外数据

Name	Type	Description
`extData`	Any	用户自定义属性，支持JavaScript API任意数据类型。

setOffset(offset) overlay/CustomLabel.js, line 169

设置放置标签时使用的像素偏移量。数组中的第一个元素是水平偏移量。正值将标签右移。数组中的第二个元素是垂直偏移量。正值会将标签向下移动。

Name	Type	Description
`offset`	Array	放置标签时使用的像素偏移量。

setPosition(position) overlay/CustomLabel.js, line 129

设置标签位置

Name	Type	Description
`position`	Array	标签位置，经纬度数组

setPositioning(positioning) overlay/CustomLabel.js, line 150

设置定义标签相对于其position属性的实际放置方式

Name	Type	Description
`positioning`	String	定义标签相对于其position属性的实际放置方式。当前使用的positioning值是'center-right'。可以通过此方法设置其他值，'bottom-left'， 'bottom-center'，'bottom-right'，'center-left'，'center-center'，'center-right'， 'top-left'，'top-center'，和'top-right'。

setZIndex(zIndex) overlay/CustomLabel.js, line 107

设置标签内容显示顺序

Name	Type	Description
`zIndex`	Number	标签内容渲染的z-index属性

un(type, listener) overlay/CustomLabel.js, line 242

给标签移除事件

Name	Type	Description
`type`	String	事件类型,支持类型:mouseover/mouseout/mousedown/mouseup /click/dblclick/rightclick
`listener`	function	回调函数,返回两个参数，一个参数为：当前的标签对象；一个为当前的事件对象