OpenLayers 3圖像和文本樣式zindex

Question

我注意到文字和圖像樣式在渲染時似乎並不考慮它們的圖層順序。例如，當具有這些樣式的許多要素靠得很近時，所有文本都會呈現在其他重疊向量要素之上。有沒有辦法禁用或重寫此行爲？謝謝。

myFeature.setStyle(new ol.style.Style({ 
    image: new ol.style.Icon({ 
    src: '/images/myImage.png', 
    anchor: [0.5, 1], 
    anchorXUnits: 'fraction', 
    anchorYUnits: 'fraction' 
    }) 
})); 

myOtherFeature.setStyle(new ol.style.Style({ 
    image: new ol.style.Circle({ 
    fill: new ol.style.Fill({ 
     color: 'rgb(255,200,77)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: 'rgba(0,0,0,.2)', 
     width: 1 
    }), 
    radius: 14 
    }), 
    text: new ol.style.Text({ 
    font: 'light 10px Arial', 
    text: '1', 
    fill: new ol.style.Fill({color: 'black'}), 
    stroke: new ol.style.Stroke({color: 'black', width: 0.5}) 
    }) 
})); 

Answer 1

當使用文本疊加點符號時，如果您希望文本粘貼到符號上，則需要爲每個點指定自己的（增加的）zIndex。請參閱http://jsfiddle.net/8g1vayvc/。你也可以做到這一點的風格功能：

var myStyle = new ol.style.Style({/*...*/}); 
var zIndex = 0; 
function styleFunction(feature, resolution) { 
    myStyle.setZIndex(zIndex++); 
    return myStyle; 
}