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

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`,
        });
});