Javascript 我们可以使用html标签和css来设计openlayers中的功能吗?

Javascript 我们可以使用html标签和css来设计openlayers中的功能吗?,javascript,openlayers,openlayers-3,openlayers-5,Javascript,Openlayers,Openlayers 3,Openlayers 5,我在OpenLayers 5中有一个多边形功能。它有一些随机id,我需要在稍微右对齐的多边形中心显示 我使用了ol.style.Text()样式在多边形上显示id。我可以使用类的offsetX和offsetY选项来管理对齐,但是如何在html元素中显示文本或模拟文本,因为ol.style.text()只接受文本数据 openlayers中的覆盖肯定会解决这个问题,我可以使用几何体上的getInteriorPoint()获得多边形的中点,但我不想使用覆盖,因为地图上可能有大量多边形,为每个多边形添

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

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

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

以下是我试图实现的预期输出:

这是我的密码:


还要检查我做了什么来打开和关闭Id,并说明这是否可以改进。ID可以根据缩放级别打开和关闭。

您可以在画布元素中绘制背景并以图标样式使用,而不用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;
   }
}

通过仅为当前视图范围内的要素创建覆盖,并且仅为特定缩放级别创建覆盖,您完全可以使用覆盖。这将使创建的覆盖的数量保持较低,从而保持良好的性能。好的,您是否知道覆盖的任何替代品,如直接使用样式功能。