Question

早上好，

我的标记中的标签zindex存在问题。使用标记类型Image尊重ZIndex，但是当我尝试添加标签时：标签上未应用Zindex。

我使用的代码见下文：

var features = [];
var myStyle = new ol.style.Style({zIndex: 1,image: new ol.style.Icon(({anchor: [0.5, 74],anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: '/css/images/markerB.png'})),text: new ol.style.Text({font: '100 28px icon_set_1',text: "Z",offsetY: -52,fill: new ol.style.Fill({color: 'black'})})});
var lat = 3;
for(i=0;i<=0.5;i+=0.1) {
  var lon = 50 + i;
  var iconFeature = new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326',     'EPSG:3857'))});
  iconFeature.setStyle(myStyle);
  features.push(iconFeature);
}
vectorSource = new ol.source.Vector({features: features});vectorLayer = new ol.layer.Vector({source: vectorSource});map.addLayer(vectorLayer);

可能有人可以告诉我，我做错了什么？提前谢谢。

Answer 1

请检查此代码，这里是小提琴http://jsfiddle.net/n4h77xnz/

  var features = [];
  var myStyle = new ol.style.Style({
      zIndex: 1,
      image: new ol.style.Icon(({
          anchor: [0.5, 0.5],
          scale: 0.4,
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'icon.png'
      })),
      text: new ol.style.Text({
          font: '100 22px icon_set_1',
          text: "yz",
          offsetY: 22,
          fill: new ol.style.Fill({
              color: 'black'
          })
      })
  });
  var lat = 3;
  for (i = 0; i <= 0.5; i += 0.1) {
      var lon = 50 + i;
      console.log(lon, lat);
      var iconFeature = new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857'))
      });
      iconFeature.setStyle(myStyle);
      features.push(iconFeature);
  }
  vectorSource = new ol.source.Vector({
      features: features
  });
  vectorLayer = new ol.layer.Vector({
      source: vectorSource
  });
  map.addLayer(vectorLayer);

  map.getView().fit(vectorLayer.getSource().getExtent(), map.getSize())

标签上的zIndex

1 个答案: