开发 数据可视化 JS API 可视化图层 LabelsLayer 文字图层

LabelsLayer 文字图层 最后更新时间: 2021年01月22日

用点数据类型展示文字,支持设置文字的样式,避让等。支持 2D 和 3D。

2D 和 3D 都是使用 AMap.LabelMarker 实现文字渲染,使用 AMap.LabelsLayer 作为容器,支持事件监听、selectStyle 等接口。


示例代码:

const layer = new LabelsLayer({
    map: map,
    eventSupport: true,  // 图层事件支持,LabelsLayer 默认开启
    fitView: true,
    // visible: true,
    zIndex: 99,
    collision: false  // 是否开启文字自动避让
});

const list = [{
    coord: '123,44',
    value: '展示的文字'
}, ...];

layer.setData(list, {
    lnglat: function (obj) {
        return obj.value.coord.split(',')
    }
}).setOptions({
    style: {
        direction: "right",  // 文字位置
        offset: [0, 0],  // 文字偏移距离
        zooms: [3, 18],  // 文字显示范围
        text: function (data) {
            return data.value.value
        },  // 文本内容
        fillColor: function () {
            return `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
        },  // 文字填充色
        fontFamily: '字体',  // 文字字体(2D)
        fontSize: 30,  // 文字大小, 默认值:12
        fontWeight: "normal",  // 文字粗细(2D)。 可选值: 'normal'| 'lighter'| 'bold' 。默认值:'normal'
        strokeColor: "rgba(255,255,255,0.85)",  // 文字描边颜色
        strokeWidth: 1,  // 文字描边宽度
    },
    // 鼠标悬停在文字上的样式
    selectStyle: {
        fillColor: "red",
        fontSize: 35,
        fontWeight: "normal",
        strokeColor: "blue",
        strokeWidth: 4
    }
}).render();

// 监听图层鼠标悬停事件,通过 setOverlaysStyle 方法改变当前文字样式
layer.on('mouseover', function (ev) {
    console.log(ev.overlay.properties.value);
    layer.setOverlaysStyle(function (overlay) {
        return overlay._id == ev.overlay._id;
    }, {
            fillColor: `red`,
        });
});

// 监听图层鼠标离开事件,通过 setOverlaysStyle 方法还原当前文字样式
layer.on('mouseout', function (ev) {
    console.log(ev.overlay.properties.value);
    layer.setOverlaysStyle(function (overlay) {
        return overlay._id == ev.overlay._id;
    }, {
            fillColor: `blue`,
        });
});


1. 构造函数

构造函数

说明

Loca.LabelsLayer(<LayerOptions> options)

创建文字图层

图层配置项

类型

默认值

说明

collision

boolean

false

文字避让,在文字较多时,会自动隐藏部分文字,防止文字堆叠在一起。

animation

boolean

false

文字显示隐藏的动画,开启之后文字出现和消失的时候会有渐变动画。

eventSupport

boolean

true

对于 LabelsLayer 来说,会默认开启事件支持,对性能没有影响。

其他配置项和 Loca.Layer 相同。


2. Visual Options

配置项

类型

默认值

说明

style

Style Options

配置文字大小、样式、位置等。

selectStyle

Style Options

配置鼠标悬停在某个文字上面时,需要展示的当前文字的样式。


3. Style Options

配置项

类型

默认值

说明

text

string

'文字'

文字内容

direction

string

'top'

文字方位,可选值: 'top' 'right' 'bottom' 'left' 'center' 。

offset

array

[0, 0]

文字相对偏移量,数组第一个元素表示横向 x 轴,第二个元素表示纵向 y 轴。

zooms

array

[3, 20]

文字显示的缩放范围。最大范围在 3~20 之间。

fontSize

number

12

文字大小

fontFamily (2D)

string

默认字体

文字字体,仅支持 2D 模式。

fontWeight (2D)

string

'normal'

文字粗细。 可选值: 'normal'| 'lighter'| 'bold' ,仅支持 2D 模式。

fillColor

string

'rgb(0,0,0)'

文字颜色

strokeColor

string

'rgb(0,0,0)'

文字描边颜色

strokeWidth

number

1

文字描边宽度,注:只有描边颜色没有描边宽度时,默认描边宽度为 1。


4.方法

方法名

返回值

说明

getOverlays(<Function/Object> filter)

<array>overlys

通过过滤器(第一个参数)对所有覆盖物的原始数据进行过滤,如果过滤器是函数类型,则和 Array.filter 中的参数一样,过滤留下此函数执行结果为 true 的元素。

如果过滤器类型为对象,则对对象里面的字段进行遍历,以此和原始数据

中的字段值进行对比,全部字段值相同则保留此元素,反之过滤掉。 

setOverlayStyle(

  <LabelMarker> overlay,

  <Style Options> object

)

<LabelMarker>overlay

设置单个文字覆盖物的样式,可以通过 getOverlays 方法获取 overlay。

setOverlaysStyle(

  <Function/Object> filter,

  <Style Options> object

)

<array>overlays

设置覆盖物(文字)的样式,通过过滤器进行过滤,对过滤结果集合

进行设置统一样式(第二个参数参见上面Style Options)。

过滤器参见 getOverlays 方法

其他方法参见 Loca.Layer

返回顶部 示例中心 常见问题 智能客服 公众号
二维码