0

https://yandex.ru/dev/maps/jsbox/2.1/geoobjects_menu/ как в этом примере сделать чекбокс для снятия/очистки всех меток на карте и чекбоксов выбора типо

$('#снять выбор').click(myMap.geoObjects.removeAll());
1
  • Можно перебрать элементы вручную. Что конкретно вызывает у вас затруднение? Возможно я не правильно вас понял и вас интересует именно универсальный метод от API Yandex Maps?
    – Kirill
    27 мар в 12:02

1 ответ 1

0

В коде ниже, в HTML - добавлен идентификатор блоку с фильтрами и новый чекбокс, а в JavaScript добавлен обработчик и связь с новым чекбоксом:

html

<!DOCTYPE html>

<html>

<head>
    <title>Фильтрация объектов на карте по различным признакам</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.js"></script>
    <script src="geoobjects_menu.js" type="text/javascript"></script>
    <style>
        body, html {
            font-family: Arial;
            font-size: 11pt;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 60%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="filters" style="padding: 5px;">
         <div>
            Фильтр по геометриям <br>
            <input type='checkbox' id='all' checked=true>Все оъекты</input><br>
        </div>
        <div>
            Фильтр по цветам <br>
            <input type='checkbox' id='red' checked=true>Красные</input><br>
            <input type='checkbox' id='green' checked=true>Зеленые</input><br>
            <input type='checkbox' id='yellow' checked=true>Желтые</input>
        </div>
        <div>
            Фильтр по геометриям <br>
            <input type='checkbox' id='point' checked=true>Точки</input><br>
            <input type='checkbox' id='polygon' checked=true>Многоугольники</input><br>
            <input type='checkbox' id='circle' checked=true>Круги</input>
        </div>
    </div>
</body>
</html>

js

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.30954, 37.721587],
            zoom: 8
        }, {
            searchControlProvider: 'yandex#search'
        });
    
    // Функция, которая по состоянию чекбоксов в меню
    // показывает или скрывает геообъекты из выборки.
    function checkState () {
        var shownObjects,
            byColor = new ymaps.GeoQueryResult(),
            byShape = new ymaps.GeoQueryResult();
        
        // Отберем объекты по цвету. 
        if ($('#red').prop('checked')) {
            // Будем искать по двум параметрам:
            // - для точечных объектов по полю preset;
            // - для контурных объектов по цвету заливки.
            byColor = myObjects.search('options.fillColor = "#ff1000"')
                .add(myObjects.search('options.preset = "islands#redIcon"'));
        }
        if ($('#green').prop('checked')) {
            byColor = myObjects.search('options.fillColor = "#00ff00"')
                .add(myObjects.search('options.preset = "islands#greenIcon"'))
                // После того, как мы нашли все зеленые объекты, добавим к ним
                // объекты, найденные на предыдущей итерации.
                .add(byColor);
        }
        if ($('#yellow').prop('checked')) {
            byColor = myObjects.search('options.fillColor = "#ffcc00"')
                .add(myObjects.search('options.preset = "islands#yellowIcon"'))
                .add(byColor);
        }
        // Отберем объекты по форме.
        if ($('#point').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Point"');
        }
        if ($('#polygon').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Polygon"').add(byShape);
        }
        if ($('#circle').prop('checked')) {
            byShape = myObjects.search('geometry.type = "Circle"').add(byShape);
        }
        
        // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
        // которые совмещают нужные признаки.
        shownObjects = byColor.intersect(byShape).addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        myObjects.remove(shownObjects).removeFromMap(myMap);
    }
    
    function toggleAll () {
        var filters = $('#filters input');
        var value = filters.first().prop('checked');

        filters.each(function (i) {
              $(this).prop('checked', value);
          });

        checkState();
    }

    $('#red').click(checkState);
    $('#green').click(checkState);
    $('#yellow').click(checkState);
    $('#point').click(checkState);
    $('#polygon').click(checkState);
    $('#circle').click(checkState);

    $('#all').click(toggleAll);
    
    // Создадим объекты из их JSON-описания и добавим их на карту.
    window.myObjects = ymaps.geoQuery({
        type: "FeatureCollection",
        features: [
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.34954, 37.721587]
                },
                options: {
                    preset: 'islands#yellowIcon'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Circle',
                    coordinates: [55.24954, 37.5],
                    radius: 20000
                },
                options: {
                    fillColor: "#ffcc00"
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [[[55.33954, 37.7], [55.43954, 37.7], [55.33954, 38.7], [55.33954, 37.7]]]
                },
                options: {
                    fillColor: "#ffcc00"
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.24954, 37.4]
                },
                options: {
                    preset: 'islands#greenIcon'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Circle',
                    coordinates: [55.14954, 37.61587],
                    radius: 10000
                },
                options: {
                    fillColor: '#00ff00'
                }
            },
            {
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [55.14954, 37.61587],
                    radius: 10000
                },
                options: {
                    preset: 'islands#redIcon'
                }
            }
        ]
    }).addToMap(myMap);
}
2
  • Огромное спасибо
    – xalecav
    27 мар в 12:25
  • Единственно, не всегда сразу срабатывает, после того как поперещелкивать остальные чекбоксы
    – xalecav
    27 мар в 14:49

Ваш ответ

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

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