Openlayers 3相對於特徵大小的特徵標籤位置？

我在OL地圖上有幾個圖層，包含相同大小的特徵的輪廓，背景顏色和標籤，因此您可以顯示或隱藏一個或多個圖層。其中兩個圖層只是標籤...樣式不包含填充或描邊。一張標籤應該坐在上面的其他的功能中心爲中心，但OL似乎它們分散垂直進一步遠離或靠近在一起，在相對於特徵多邊形的高度，這樣的：Openlayers 3相對於特徵大小的特徵標籤位置？

我曾嘗試在較低標籤的文本樣式塊中設置offsetY: 15，在較低標籤前添加一個換行符，並在較低標籤上設置textBaseline:'top'，並在頂部設置textBaseline:'bottom'（這是最後一次嘗試！），但它們總是以不同的方式傳播！

下面是我對上標籤樣式塊：

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') : '' 
        }) 
       }) 
     ]; 
    }

而對於較低的標籤：

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 
        }) 
       }) 
     ]; 
    }

兩個肯定有相同的多邊形輪廓。沒有問題。我只能想，也許的OpenLayers被處理偏移量爲一個百分比，而不是如文檔中陳述像素：

來源

2016-09-14 Helen Danger Burns

看起來像它是從我可以告訴的像素：tinyurl.com/hxpj6hn顯示一個示例，適用於像素。嘗試在每個數組中使用一種文本樣式返回樣式數組。同樣的結果？ –

由於我的代碼一些複雜的迴路我忽視的是，有一些領域的多邊形邊界略有出入，這意味着他們的標籤被顯示在稍有不同的地方。現在我已將所有多邊形邊界設置爲相同，標籤確實與offsetY的行爲正確無誤。我很抱歉。

來源

2016-09-22 11:05:22

更多的解決方法不是一個答案，因爲我認爲沒有錯用你的方法，但這是否會產生相同的結果？

[ 
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 
    }) 
})]

來源

2016-09-17 22:41:50

我不太清楚你是如何建議我實現這個？ –

我建議你將兩種文本樣式放在一個圖層上，而不是將兩個圖層放在同一個幾何圖形中。 –

啊我看到了...我不能，因爲我必須能夠獨立地切換他們的知名度。 –

Openlayers 3相對於特徵大小的特徵標籤位置？

回答

相關問題