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

普南帕特尔

我想使用 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;
    }      

麦克风

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章