Как настроить видимость map.loadImage по уровню масштабирования в Mapbox GL JS? - PullRequest
Новая
       12

Как настроить видимость map.loadImage по уровню масштабирования в Mapbox GL JS?

1 голос
/ 02 апреля 2019

Я загружаю изображение со следующим кодом: 

map.on('load', function () {

map.loadImage('....png', function(error, image) { 
  if (error) throw error;
  map.addImage('b7', image);
  map.addLayer({ 
    "id": "b7",
    "type": "symbol",
    "source": { 
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [0, 0] 
          } 
        }] 
      }
    },
    "layout": {
      "icon-image": "b7",
      "icon-size": 0.2
    }
  });
});

Как я могу установить видимость на нет, при определенном уровне масштабирования?

Похоже, что вы не можете использовать map.setLayoutProperty для loadImage. В консоли написано: Ошибка: слой 'b7' не существует в стиле карты и не может быть стилизован.

Сыворотка, я попробую что-то вроде: 

map.setLayoutProperty( 'b7', 'visibility', 'none' );

Есть идеи?

1 Ответ

2 голосов
/ 02 апреля 2019

Два предложения о том, как решить эту проблему:

Во-первых, убедитесь, что имя вашего изображения и имя слоя различаются.Возможно, функция ищет слой b7, но сначала находит изображение с именем b7 (или наоборот).В любом случае это должно быть изменено, поскольку это создает конфликтующие переменные.

Во-вторых, если это не сработает, попробуйте добавить свой источник отдельно, а не внутри слоя. 

 map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.981906, 41.742503]
      },
      "properties": {
        "title": "title ",
        "icon": "myImage",
      }
    }]
  }
});

А затем добавьте слой с источником.

 map.addLayer({
  "id": "b7",
  "type": "symbol",
  "source": "mySource",
  "layout": {
    "icon-image": "myImage",
    "icon-size": 0.2
  }
});

Теперь вы можете вызывать setLayoutProperty для прослушивателя zoomstart.Добавьте условное обозначение, если вы хотите использовать его только при определенном уровне масштабирования, используя map.getZoom();. Здесь необходимо настроить видимость слоя, а не изображения. 

map.on('zoomstart', 'b7', function(e) {
  if (map.getZoom() > 12) {
    map.setLayoutProperty('b7', 'visibility', 'none');
  }
})

Ниже приведен фрагмент, дайте мне знать, еслиВы сталкиваетесь с любыми проблемами.

map.on('load', function() {

  map.loadImage('myImage.png', function(error, image) {
    if (error) throw error;
    map.addImage('myImage', image);
    map.addSource("mySource", {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [-73.981906, 40.742503]
          },
          "properties": {
            "title": "title ",
            "icon": "myImage",
          }
        }]
      }
    });

    map.addLayer({
      "id": "b7",
      "type": "symbol",
      "source": "mySource",
      "layout": {
        "icon-image": "myImage",
        "icon-size": 0.2
      }
    });
  });
});

map.on('zoomstart', 'b7', function(e) {
  if (map.getZoom() > 12) {
    map.setLayoutProperty('b7', 'visibility', 'none');
  }
})
...