使用偏移量 -OpenLayers 将标签/文本分配给图标答案

【问题标题】：Assign label/text to icon using offset -OpenLayers使用偏移量 -OpenLayers 将标签/文本分配给图标
【发布时间】：2020-12-04 02:58:56
【问题描述】：

我想使用 OpenLayers 将文本或标签分配给图标。我可以将标签分配给图标，但它会将文本放在图标上。但我想在偏移处显示标签，以便图标和标签都正确显示。我曾尝试使用 offsetY，但它不起作用并且不会更改位置。

var styleToponimiFunction = function(feature,resolution) {
      console.log(feature);
      var iconName;
     
      if (feature.get("remark")=='Daerah Istimewa') {
        iconName='daerah_istimewa2.png';  
      }
      else if (feature.get("remark")=='Kecamatan'){
        iconName='kecamatan.png';  
      }
      iconStyle = [new ol.style.Style({
        
          image: new ol.style.Icon(({
              anchor: [0.5, 46], 
              anchorXUnits: "fraction",
              anchorYUnits: "pixel",              
              scale:0.03,
              opacity:1,
              src: "icons/" + iconName,
             })),
          text: new ol.style.Text({
                text: feature.get('namobj'),
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: 'black' }),
                stroke: new ol.style.Stroke({
                color: '#fff', 
                width: 2,
                textAlign: 'center',
                Baseline: 'hanging',               
                offsetX : 0,
                offsetY : -12,           
                          
                }),
                declutter: true,
                overflow: true
             }),           
             })
             ]
      return iconStyle;
    }

【问题讨论】：

标签： label styles openlayers offset labeling

【解决方案1】：

文本选项不应在 Stroke 构造函数中，Baseline 也应为 textBaseline

            stroke: new ol.style.Stroke({
              color: '#fff', 
              width: 2,
            }),
            textAlign: 'center',
            textBaseline: 'hanging',               
            offsetX : 0,
            offsetY : -12,

【讨论】：