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