我们可以使用 html 标签和 css 来设置 openlayers 中的特征样式吗？

Question

我在 OpenLayers 5 中有一个多边形功能。它有一些随机 ID，我需要在多边形的中心稍微右对齐显示。

我使用了 ol.style.Text() 样式在多边形上显示 id。我可以使用 class 的 offsetX 和 offsetY 选项来管理对齐方式，但是如何在 html 元素中显示文本或模仿它，因为 ol.style.Text()只接受文本数据。

openlayers 中的叠加层肯定会解决问题，我可以在几何体上使用 getInteriorPoint() 获得多边形的中点，但我不想使用叠加层，因为地图上可能有大量的多边形并为每个添加覆盖会降低性能和内存利用率。

这是预期的输出/我正在努力实现：

这是我的代码：

Current code

还要检查我为打开和关闭 Id 所做的工作，并提及是否可以改进。 ID 可以根据缩放级别打开和关闭。

Answer 1

您可以在 canvas 元素中绘制背景并在图标样式中使用它，而不是使用 CSS。并使用样式函数来设置多边形内部点的样式，而无需创建更多特征：

var canvas = document.createElement("canvas");
canvas.width = ??;
canvas.height = ??;
var ctx = canvas.getContext("2d");

// draw an arraw and rounded box
.....
.....

var iconUrl = canvas.toDataURL();



var offStyle = new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,255,255,0)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'green',
                                width: 1.5
                            })
});

var onStyle =  new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,255,255,0)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'black',
                                width: 1.5
                            })
});


var styleFunction = function (feature, resolution) {

    if (off) {  // or use (resolution > ????)
        return offStyle;
    else {
         var styles = [onStyle];
         if (feature.getGeometry().getType == 'Polygon') {
             styles.push( new ol.style.Style({
                       geometry: feature.getGeometry().getInteriorPoint(),
                       image: new ol.style.Icon({
                                src: iconUrl,

                                // options to anchor the icon
                                ....

                       }),
                       text: new ol.style.Text({
                                scale: 1,
                                text: feature.get('.....'),
                                font: 'normal 10px FontAwesome',
                                fill: new ol.style.Fill({
                                  color: 'black'
                              }),
                            }),
                            zIndex: 100
            }));
        }
        return styles;
   }
}

我们可以使用 html 标签和 css 来设置 openlayers 中的特征样式吗？

Can we use html tags and css to style the features in openlayers?

javascript

openlayers

openlayers-3

openlayers-5