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

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.0.31/?load=package.standard,package.geoObjects,package.geoQuery&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script type="text/javascript" src="https://yandex.st/jquery/1.9.0/jquery.js"></script>

	<script src="geoobjects_menu.js" type="text/javascript"></script>
</head>

<style>
    body {
        font-family: "Arial";
        font-size: 11pt;
    }
</style>
<body>
    <div id="map" style="width:400px; height:300px"></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>
</body>

</html>


ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
        center: [55.30954, 37.721587],
        zoom: 8,
    });

    // Функция, которая по состоянию чекбоксов в меню
    // показывает или скрывает геообъекты из выборки.
    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 = "twirl#redIcon"'));
        }
        if ($("#green").prop("checked")) {
            byColor = myObjects
                .search('options.fillColor = "#00ff00"')
                .add(myObjects.search('options.preset = "twirl#greenIcon"'))
                // После того, как мы нашли все зеленые объекты, добавим к ним
                // объекты, найденные на предыдущей итерации.
                .add(byColor);
        }
        if ($("#yellow").prop("checked")) {
            byColor = myObjects
                .search('options.fillColor = "#ffcc00"')
                .add(
                    myObjects.search('options.preset = "twirl#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: "twirl#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: "twirl#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: "twirl#redIcon",
                    },
                },
            ],
        })
        .addToMap(myMap);
}