放大時自動隱藏文字

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