2

Сделал вывод списка названий объектов на карте по примеру из песочницы https://tech.yandex.ru/maps/jsbox/2.1/object_list Как можно сделать скрытие названий объектов, которые находятся за границами видимой карты (после перемещения или зума карты)?

2 ответа 2

5

Отфильтровать объекты, которые находятся в пределах видимой области можно с помощью GeoQueryResult.searchInside.

Подписаться на изменение видимой области можно с помощью события Map@boundschange

var geoObjectsQuery;
var map;

ymaps.ready(['Map', 'geoQuery'])
  .then(function() {
    map = new ymaps.Map('map', {
      center: [55.75, 37.62],
      zoom: 9,
      controls: []
    });

    // Создаем метки и добавляем их на карту.
    var geoObjects = new ymaps.GeoObjectCollection({
      children: generatePlacemarks(map.getBounds(), 50)
    });
    map.geoObjects.add(geoObjects);
    
    // Создаем geoQuery для запросов к гео-объектам.
    geoObjectsQuery = ymaps.geoQuery(geoObjects);
    
    // Сразу же показываем список видимых гео-объектов. 
    refreshVisibleList();
    
    // Обновляем список видимых гео-объектов при изменении видимой области.
    map.events.add('boundschange', function() { 
      refreshVisibleList();
    });
  })
  .catch(console.error);

function refreshVisibleList() {
  // С помощью geoQuery получаем список объектов на карте.
  var visibleGeoObjects = geoObjectsQuery.searchIntersect(map);

  // Собираем данные из видимых гео-объектов.
  var visibleObjectsHtml = [];
  visibleGeoObjects.each(function(x) {
    var iconContent = x.properties.get('iconContent');
    visibleObjectsHtml.push('<li>' + iconContent + '</li>');
  });
  
  // Обновляем список.
  var visibleElement = document.getElementById('visible');
  visibleElement.innerHTML = 'Видимые:' +
    '<ul>' + visibleObjectsHtml.join('') + '</ul>'
}

/** Создает случайные метки в пределах области. */
function generatePlacemarks(bounds, n) {
  n = n || 50;
  var placemarks = [];
  for (var i = 0; i < n; i++) {
    placemarks.push(new ymaps.Placemark([
      bounds[0][0] + (bounds[1][0] - bounds[0][0]) * Math.random(),
      bounds[0][1] + (bounds[1][1] - bounds[0][1]) * Math.random()
    ], {
      iconContent: i,
    }));
  }
  
  return placemarks;
}
#map {
  width: 300px;
  height: 300px;
  display: inline-block;
}

#visible {
  display: inline-block;
  width: 150px;
  height: 300px;
  overflow-y: scroll;
}
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>
<div id="visible"></div>

1
  • Спасибо! Очень наглядный пример.
    – Alexander
    29 ноя 2017 в 16:07
2

Привет, у карты есть метод getBounds (https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map-docpage/#getBounds) с помощью которого можно определить границы карты (прямоугольная область).

Так же в апи есть вспомогательная библиотека util.bounds в которой есть метод containsPoint (https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/util.bounds-docpage/#containsPoint) который может определить входит ли точка в данную прямоугольную область.

Для данного примера определить видим ли объект на карте и добавить его в список можно используя примерно такую логику:

    var bounds = myMap.getBounds();
    var contains = ymaps.util.bounds.containsPoint(bounds, item.center);
    if (contains) {
        // добавляем объект в список
    } else {
        // не добавляем объект в список
    }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.