Question

我在openlayers中有一段代码。放大后，我需要自动隐藏一些文本。

到目前为止，没有任何效果。这就是我现在拥有的：

this.addMarker = function(lon, lat) {
    var mar = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
    });
    var iconBlue = new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [12, 40],
        anchorXUnits: 'pixels',
        anchorYUnits: 'pixels',
        opacity: 1,
        src: '../../images/marker_blue.png'
      }),
      text: new ol.style.Text({
        text: "Test text",
        scale: 1.2,
        fill: new ol.style.Fill({
          color: "#fff"
        }),
        stroke: new ol.style.Stroke({
          color: "0",
          width: 3
        })
      })
    });
    mar.setStyle(iconBlue);
    vectorSource.addFeature(mar);
  }

需要在用户完全放大（或特定缩放之后）时隐藏文本。任何帮助/指导表示赞赏。

Answer 1

分隔图标和文本样式，并使用样式功能可在其中测试分辨率。在实时环境中，我希望您还希望将“测试文本”替换为功能的属性？您也可以将样式函数设为图层的样式，而不是在每个要素中都设置样式，因为它会传递给要素。

var iconBlueIcon = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [12, 40],
    anchorXUnits: 'pixels',
    anchorYUnits: 'pixels',
    opacity: 1,
    src: '../../images/marker_blue.png'
  })
});
var iconBlueText = new ol.style.Style({
  text: new ol.style.Text({
    text: "Test text",
    scale: 1.2,
    fill: new ol.style.Fill({
      color: "#fff"
    }),
    stroke: new ol.style.Stroke({
      color: "0",
      width: 3
    })
  })
});
var iconBlue = function(feature, resolution) {
    var styles = [iconBlueIcon];
    if (resolution > minRes) {
        iconBlueText.getText().setText(feature.get('someProperty'))
        styles.push(iconBlueText);
    }
    return styles;
}

this.addMarker = function(lon, lat) {
    var mar = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
    });
    mar.setStyle(iconBlue);
    vectorSource.addFeature(mar);
  }

放大时自动隐藏文字

1 个答案: