Фильтрация объектов на карте по различным признакам

Open in CodeSandbox

С помощью класса GeoQueryResult можно формировать набор меток на карте из JSON-описаний их геометрий.

Метод search позволяет фильтровать объекты выборки по различным признакам. Например выбирать объекты с определенным значением полей данных или выбирать объекты по типу геометрии.

В данном примере показано, как осуществлять выборку геообъектов по нескольким признакам, делать объединение или пересечение выборок. 

  <!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 style="padding: 5px;">
        <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>


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

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

    // Создадим объекты из их 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);
}