автоматическое скрытие текста при увеличении - PullRequest
Новая
       15

автоматическое скрытие текста при увеличении

0 голосов
/ 16 мая 2019

У меня есть кусок кода в 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);
  }

Необходимо скрыть текст, когда пользователь полностью увеличивает масштаб (или после определенного увеличения). Любая помощь / руководство приветствуется.

1 Ответ

1 голос
/ 16 мая 2019

Разделите стили значка и текста и используйте функцию стиля, где вы можете проверить разрешение. Я ожидаю, что в реальной среде вы также захотите заменить «Тестовый текст» свойством вашей функции? Вы также можете сделать функцию стиля стилем вашего слоя вместо того, чтобы устанавливать его в каждом объекте, так как он передается объекту. 

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