我們可以使用 html 標簽和 css 來設計 openlayers 中的功能嗎？

Question

我在 OpenLayers 5 中有一個多邊形特征。它有一些隨機 id，我需要在稍微右對齊的多邊形中心顯示。

我使用ol.style.Text()樣式在多邊形上顯示 id。 我可以使用類的offsetX和offsetY選項管理對齊，但是如何在 html 元素中顯示文本或模仿它，因為ol.style.Text()只接受文本數據。

openlayers 中的疊加肯定會解決這個問題，我能夠在幾何上使用getInteriorPoint()獲得多邊形的中點，但我不想使用疊加，因為地圖上可能有大量的多邊形並且為每個添加疊加會惡化性能和內存利用率。

這是預期的輸出/我正在努力實現：

這是我的代碼：

當前代碼

還要檢查我為打開和關閉 Id 所做的工作，並提及是否可以改進。 可以根據縮放級別打開和關閉 ID。

Answer 1

您可以在畫布元素中繪制背景並以圖標樣式使用它，而不是使用 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;
   }
}