Openlayers 3 özellik özelliklerine göre etiket özellik konumu?

Question

OL harita üzerinde, aynı boyutlar için anahatlar, arka plan renkleri ve etiketler içeren birkaç katmanım var, böylece katmanlardan birini veya birkaçını gösterebilir veya gizleyebilirsiniz. Bu katmanların ikisi sadece etiketlerdir ... stilde dolgu veya kontur yoktur. Bir etiket özelliğinin orta merkezinde diğerinin üzerinde oturmalı ancak OL böyle, dikey daha uzakta ya da birbirine göreli özelliği çokgen yüksekliğine bunları yaymak görünüyor:

denedim alt etiketin metin stili bloğuna bir offsetY: 15 ayarlayarak alt etiketden önce bir satır sonu ekleyerek ve alt etikette textBaseline:'top' ve üstte textBaseline:'bottom' ayarını yapın (bu son çukur girişimi oldu!) ama her zaman farklı şekilde yayılır!

function fields_label_style() { 
     return [ 
      new ol.style.Style({ 
        fill: new ol.style.Fill({ 
         color: 'rgba(255,255,255,0)' 
        }), 
        stroke: new ol.style.Stroke({ 
         color: 'rgba(255,255,255,0)', 
         width: 1 
        }), 
        text: new ol.style.Text({ 
         font: '13px Calibri,sans-serif', 
         fill: new ol.style.Fill({ color: '#ffffff' }), 
         stroke: new ol.style.Stroke({ 
          color: '#000000', width: 2 
         }), 
         // get the text from the feature - `this` is ol.Feature 
         // and show only under certain resolution 
         text: map.getView().getZoom() > 14 ? this.get('description') : '' 
        }) 
       }) 
     ]; 
    } 

Ve alt etiket

:

function cropping_label_style() { 
     return [ 
      new ol.style.Style({ 
        fill: new ol.style.Fill({ 
         color: 'rgba(255,255,255,0)' 
        }), 
        stroke: new ol.style.Stroke({ 
         color: 'rgba(255,255,255,0)', 
         width: 1 
        }), 
        text: new ol.style.Text({ 
         font: '13px Calibri,sans-serif', 
         fill: new ol.style.Fill({ color: '#ffffff' }), 
         stroke: new ol.style.Stroke({ 
          color: '#000000', width: 2 
         }), 
         // get the text from the feature - `this` is ol.Feature 
         // and show only under certain resolution 
         text: map.getView().getZoom() > 14 ? this.get('description') : '', 
         offsetY: 15 
        }) 
       }) 
     ]; 
    } 

İkisi kesinlikle aynı poligon taslağa sahip

İşte üst etiket için benim tarzım apartman. Soru yok. Ben sadece belki OpenLayers tedavi olduğunu düşünebiliriz ziyade belgelerinde belirtildiği gibi pikselden daha yüzde olarak offset:

Answer 1

nedeniyle benim kodunda bazı karmaşık döngüler için onların etiketleri biraz farklı yerlerde sergilendi anlamı alanların bazıları üzerinde çokgen sınırları arasında küçük bir farklılık olduğunu gözardı. Şimdi tüm poligon sınırlarını aynı şekilde etiketin, offsetY'un beklendiği gibi davranmasıyla doğru şekilde hizalandığını yaptım. Özür dilerim.

Answer 2

Ben senin yaklaşımı yanlış bir şey görmüyorum çünkü bir cevap daha geçici bir çözüm Daha fakat Bu aynı sonucu veriyor mu?

[ 
new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(255,255,255,0)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: 'rgba(255,255,255,0)', 
     width: 1 
    }) 
}), 

new ol.style.Style({ 
    text: new ol.style.Text({ 
     font: '13px Calibri,sans-serif', 
     fill: new ol.style.Fill({ 
      color: '#ffffff' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#000000', 
      width: 2 
     }), 
     // get the text from the feature - `this` is ol.Feature 
     // and show only under certain resolution 
     text: map.getView().getZoom() > 14 ? this.get('description') : '' 
    }) 
}), 

new ol.style.Style({ 
    text: new ol.style.Text({ 
     font: '13px Calibri,sans-serif', 
     fill: new ol.style.Fill({ 
      color: '#ffffff' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#000000', 
      width: 2 
     }), 
     // get the text from the feature - `this` is ol.Feature 
     // and show only under certain resolution 
     text: map.getView().getZoom() > 14 ? this.get('description') : '', 
     offsetY: 15 
    }) 
})]