OpenLayers 5 - 有没有办法使集群文本居中？

Question

我正在制作可以显示我的标记的应用程序，因为其中有很多我需要制作集群。除文本外的所有内容均按预期工作。

我试过更改锚点和锚点[X/Y]单位，但即使我将其更改为固定像素，它总是呈现错误。

这是我的代码：

const style = new Style({
    image: new CircleStyle({
        radius: 12,
        stroke: new Stroke({
            color: '#ffffff',
            width: 1,
        }),
        fill: new Fill({
            color: '#3399CC'
        }),
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        anchor: [0.5, 0.5],
    }),
    text: new Text({
        font: '14px/24px sans-serif',
        text: '2',
        fill: new Fill({
            color: '#ffffff'
        })
    })
});

var clusters = new VectorLayer({
    source: clusterSource,
    style: style
});

簇中的文本未正确对齐。我附上一些图片来进一步说明问题。

_{（来源：devhub.pl）}

Answer 1

检查地震群的例子。所有文本对齐似乎都没有问题。

https://openlayers.org/en/latest/examples/earthquake-clusters.html

Answer 2

我认为单独使用 OpenLayers API 无法正确对齐它。我想出了另一个解决方案。我做了一个函数来在 Canvas 上下文中呈现圆圈和文本。

我使用这个功能：

const createImage = function (diameter, text) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

    // set canvas width and height to double the outer diameter
    canvas.width = diameter * 2;
    canvas.height = diameter * 2;

    // white border
    ctx.beginPath();
    ctx.arc(diameter, diameter, diameter, 0, 2 * Math.PI);
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    // inner circle
    ctx.beginPath();
    ctx.arc(diameter, diameter, diameter - 1.5, 0, 2 * Math.PI); // the -1.5 makes a nice offset
    ctx.fillStyle = '#104ddb';
    ctx.fill();

    // text in the circle
    ctx.beginPath();
    ctx.font = '14px Arial';
    ctx.fillStyle = '#ffffff';
    ctx.textAlign = 'center'; // center horizontally
    ctx.textBaseline = 'middle'; // center vertically
    ctx.fillText(text, diameter, diameter);

    return canvas.toDataURL();
};

样式如下：

style = new Style({
    image: new Icon({
        src: createImage(24, '2'), // createImage(radius, text)
        imgSize: [24, 24],
    }),
});

希望对大家有所帮助。

OpenLayers 5 - 有没有办法使集群文本居中？

OpenLayers 5 - is there a way to center cluster text?

openlayers

openlayers-5