Как осуществить фильтрацию уже созданных полигонов API яндекс карт если создаются они автоматически?

Question

Всем привет. Про API яндекс карт узнал на прошлой неделе после того как встала определенная задача, нужно было вывести на карту N-количество полигонов, но что бы координаты этих полигонов задавались не в ручную, а брались из свойств инфоблоков Битрикса. С этим как то справился, вот код того что получилось:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

use \Bitrix\Main\Localization\Loc;
 {  
    ?>
    <script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
        type="text/javascript"></script>

    <script type="text/javascript">

        ymaps.ready(function () {

            // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
            var myMap = new ymaps.Map('map',
                {
                    center: [48.48, 135.08],
                    zoom: 14,
                    controls: ['zoomControl', 'typeSelector',  'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
                    
                })


            <?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {           
              
            ?>

            <? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>

            <?

            } else {
             //Цвет заливки
            if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
                $iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
            } else {
                $iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
            }  
            //Цвет обводки
            if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
                $strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
            } else {
                $strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
            }

            $body = ''; 

            ?>
            // Построение полигона
            Polygon<?=$item['ID']?> = new ymaps.Polygon(                 
                
                [[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
                
                {
                // Содержимое балуна    
                balloonContentHeader: '<a href="https:ссылка/"><?=$item['NAME']?></a>', // Заголовок 
                balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>'  + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
                balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
                clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
                hintContent: "<?=$item['NAME']?>" // Подсказка объекта

            }, {
                
                fillColor: '<?=$iconColor?>', // Цвет заливки
                fillOpacity: 0.45, // Прозрачность заливки
                strokeColor: '<?=$strokeColor?>', // Цвет обводки
                strokeWidth: 2, // Толщина обводки
                strokeOpacity: 0.5 // Прозрачность обводки
            })<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>


            <? } //endif?>

            <? } //endforeach?>

            <?
            foreach ($arResult as $item) {
                echo "myMap.geoObjects.add(Polygon".$item['ID'].");";  // Добавлени полигонов на карту
            }
            ?>

        });

    </script>

    <div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>

    <?
}
?>

Все отлично работает, полигоны появляются их описание тоже.

Но тут встала следующая задача, сделать так что бы можно было фильтровать эти полигона по районам "центр, северный, южный". Нашел в инструкции яндекса как это делать, но вот там что бы это реализовать массив полигонов должен задаваться в отдельном файле и имеет такой вид:

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

Затем через несколько часов поисков нашел еще один вроде как подходящий способ, он заключается в создании чекбоксов на страницы и с помощью их делать выборку по карте.

Вот код того что получилось:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

use \Bitrix\Main\Localization\Loc;
 {  
    ?>
    <script src="https://api-maps.yandex.ru/2.1?apikey=(Тут был мой ключ)&lang=ru_RU"
        type="text/javascript">
    </script>

    <script type="text/javascript">

        ymaps.ready(function () {

            // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
            var myMap = new ymaps.Map('map',
                {
                    center: [48.48, 135.08],
                    zoom: 13,
                    controls: ['zoomControl', 'typeSelector',  'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)
                    
                });

        // Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
        function checkState () {
            var shownObjects,
                byСluster = new ymaps.GeoQueryResult();
                        
            // Отберем объекты по форме.
            if ($('#Железнодорожный').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Железнодорожный"');
            }
            if ($('#Индустриальный').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
            }
            if ($('#Кировский').prop('checked')) {
                byСluster = myObjects.search('clusterCaption = "Кировский"').add(byСluster);
            }
            
            // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты которые совмещают нужные признаки.
            shownObjects = byСluster.addToMap(myMap);
            // Объекты, которые не попали в выборку, нужно убрать с карты.
            myObjects.remove(shownObjects).removeFromMap(myMap);
        }
        
        $('#Железнодорожный').click(checkState);
        $('#Индустриальный').click(checkState);
        $('#Кировский').click(checkState);  

                    
            <?foreach ($arResult as $item) { if (!empty($item["PREVIEW_PICTURE"])) {           
              
            ?>

            <? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>

            <?

            } else {
             //Цвет заливки
            if(!empty($item['PROPERTY_COLORIMGPLACE_VALUE'])) {
                $iconColor = $item['PROPERTY_COLORIMGPLACE_VALUE'];
            } else {
                $iconColor = '65dbc653'; //Если цвет не задан, то будет этот.
            }  
            //Цвет обводки
            if(!empty($item['PROPERTY_COLORSTROKE_VALUE'])) {
                $strokeColor = $item['PROPERTY_COLORSTROKE_VALUE'];
            } else {
                $strokeColor = '1102b8e2'; //Если цвет не задан, то будет этот.
            }

            $body = ''; 

            ?>
            // Построение полигона
            Polygon<?=$item['ID']?> = new ymaps.Polygon(                 
                
                [[<?=$item['PROPERTY_MESTO_VALUE']?>]], // Получение координат
                
                {
                // Содержимое балуна    
                balloonContentHeader: '<a href="https:ссылка"><?=$item['NAME']?></a>', // Заголовок 
                balloonContent: '<b>Куратор: </b>' + '<?=$item['PROPERTY_BALOON_VALUE']["TEXT"]?><br/>' + '<b>Адрес: </b>' + '<?=$item['PROPERTY_ADRESS_VALUE']?><br/>' + '<b>Район: </b>' + '<?=$item['PROPERTY_RAION_VALUE']?><br/>'  + '<b>Дата создания: </b>' + '<?=$item['PROPERTY_DATE_CREATE_VALUE']?><br/>', // Содержимое
                balloonContentFooter: 'Телефон: </b>' + '<?=$item['PROPERTY_CONTACTS_VALUE']["TEXT"]?>', // Футер
                clusterCaption: "<?=$item['PROPERTY_RAION_VALUE']?>", // Кластер объекта
                hintContent: "<?=$item['NAME']?>" // Подсказка объекта

            }, {
                
                fillColor: '<?=$iconColor?>', // Цвет заливки
                fillOpacity: 0.45, // Прозрачность заливки
                strokeColor: '<?=$strokeColor?>', // Цвет обводки
                strokeWidth: 2, // Толщина обводки
                strokeOpacity: 0.5 // Прозрачность обводки
            })<? if($counter_i == count($arResult)) { echo ";"; } else { echo ","; $counter_i++;} ?>


            <? } //endif?>

            <? } //endforeach?>

            <?
            foreach ($arResult as $item) {
                echo "myMap.geoObjects.add(Polygon".$item['ID'].");";  // Добавлени полигонов на карту
            }
            ?>           

        })

    </script>

    <div id="map" style="width: <?= $arParams['mapWidht'] ?>; height: <?= $arParams['mapHeight'] ?>"></div>

    <?
}
?>

Но вот почему то ничего фильтровать у меня не хочет. То -ли как говорится я дурак, то-ли лыжи не едут. Подскажите в какую сторону вообще копать то? Вот ссылка на пример из песочницы яндекса

Так же нужно реализовать поиск, что бы при вводе адреса в строку поиска загоралось содержимое того полигона в котором этот дом попал. То есть что то типа эмуляции нажатия на карту по адресу. Это копать пока вообще страшно...

Дополняю сообщение примером работы скрипта, это первый вариант кода, который я описал в начале сообщения:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(function() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
          center: [48.48, 135.08],
          zoom: 12,
          controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

        }),
        objectManager = new ymaps.ObjectManager({
          // Кластеризация меток
          clusterize: true
        });
      myMap.geoObjects.add(objectManager);


      // Создание списка районов (фильтров).
      var listBoxItems = ['Железнодорожный', 'Индустриальный', 'Кировский', 'Краснафлотский', 'Центральный']
        .map(function(title) {
          return new ymaps.control.ListBoxItem({
            data: {
              content: title
            },
            state: {
              selected: true
            }
          })
        }),
        reducer = function(filters, filter) {
          filters[filter.data.get('content')] = filter.isSelected();
          return filters;
        },


        // Теперь создадим список из 5 пунктов "районов".
        listBoxControl = new ymaps.control.ListBox({
          data: {
            content: 'Районы',
            title: 'Фильтр по районам'
          },
          items: listBoxItems,
          state: {

            expanded: false, // Список по умолчанию свёрнутый
            filters: listBoxItems.reduce(reducer, {})
          }
        });
      myMap.controls.add(listBoxControl);

      // Добавим отслеживание изменения признака, выбран ли пункт списка.
      listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        listBoxControl.state.set('filters', filters);
      });
      // Отслеживание изменений в элементе управления.список.государственное поле.
      var filterMonitor = new ymaps.Monitor(listBoxControl.state);


      filterMonitor.add('filters', function(filters) {
        // Применим фильтр.
        objectManager.setFilter(getFilterFunction(filters));
      });

      function getFilterFunction(categories) {
        return function(obj) {
          var content = obj.properties.balloonContent;
          return categories[content]
        }
      }

      $.ajax({
        url: "data.json"
      }).done(function(data) {
        objectManager.add(data);
      });

      // Построение полигона
      Polygon106497 = new ymaps.Polygon(

          [
            [
              [48.4872099152, 135.044750889],
              [48.4865858624, 135.045233687],
              [48.4863005786, 135.044150075],
              [48.4869567290, 135.043726286],
              [48.4872099152, 135.044750889]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Виктория&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Кировский", // Кластер объекта
            hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта

          }, {

            fillColor: 'ff0000', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '020202', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon106500 = new ymaps.Polygon(

          [
            [
              [48.5206, 135.107],
              [48.5215, 135.108],
              [48.5217, 135.107],
              [48.5217, 135.107],
              [48.5212, 135.106],
              [48.5206, 135.107]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Максимум Света&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Железнодорожный", // Кластер объекта
            hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта

          }, {

            fillColor: '4cd46365', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '525252c3', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon121371 = new ymaps.Polygon(

          [
            [
              [48.4751158751, 135.061937151],
              [48.4765480869, 135.064731156],
              [48.4703986385, 135.073185479],
              [48.4690278941, 135.070227689],
              [48.4751158751, 135.061937151]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка">ТОС &quot;Камская 6&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + '', // Футер
            clusterCaption: "Южный", // Кластер объекта
            hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта

          }, {

            fillColor: '99fc99', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: 'ff007f', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),



        myMap.geoObjects.add(Polygon106497);
      myMap.geoObjects.add(Polygon106500);
      myMap.geoObjects.add(Polygon121371);
    });
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
</body>

</html>

В данном примере я так понимаю ничего не работает изза этого куска кода:

 $.ajax({
        url: "data.json"
      }).done(function(data) {
        objectManager.add(data);
      });

Если я правильно понимаю то тут подключается база "data.json" но у меня получение координат построено подругому.

А вот пример второго кода, но редакторе при клике на чекбокс выдает какую то ошибку, пока не понял с чем она связана, завтра еще с ПК попробую посмотреть, сейчас с виснущего нетбука не совсем удобно, возможно в этой ошибке проблема и кроется

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(function() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
        center: [48.48, 135.08],
        zoom: 12,
        controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

      });

      // Функция, которая по состоянию чекбоксов в меню показывает или скрывает геообъекты из выборки.
      function checkState() {
        var shownObjects,
          byСluster = new ymaps.GeoQueryResult();

        // Отберем объекты по кластеру.
        if ($('#jdr').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Железнодорожный"');
        }
        if ($('#industr').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Индустриальный"').add(byСluster);
        }
        if ($('#kirov').prop('checked')) {
          byСluster = geoObjects.search('clusterCaption = "Кировский"').add(byСluster);
        }

        // Мы отобрали объекты по кластеру. Покажем на карте объекты которые совмещают нужные признаки.
        shownObjects = byСluster.addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        geoObjects.remove(shownObjects).removeFromMap(myMap);
      }

      $('#jdr').click(checkState);
      $('#industr').click(checkState);
      $('#kirov').click(checkState);



      // Построение полигона
      Polygon106497 = new ymaps.Polygon(
          [
            [
              [48.4872099152, 135.044750889],
              [48.4865858624, 135.045233687],
              [48.4863005786, 135.044150075],
              [48.4869567290, 135.043726286],
              [48.4872099152, 135.044750889]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Виктория&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'Имя<br/>' + '<b>Адрес: </b>' + 'адрес<br/>' + '<b>Район: </b>' + 'Кировский<br/>' + '<b>Дата создания: </b>' + '10.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Кировский", // Кластер объекта
            hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта

          }, {

            fillColor: 'ff0000', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '020202', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon106500 = new ymaps.Polygon(

          [
            [
              [48.5206, 135.107],
              [48.5215, 135.108],
              [48.5217, 135.107],
              [48.5217, 135.107],
              [48.5212, 135.106],
              [48.5206, 135.107]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка/">ТОС &quot;Максимум Света&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + 'имя<br/>' + '<b>Адрес: </b>' + 'пер. Краснодарский, дом 19а<br/>' + '<b>Район: </b>' + 'Железнодорожный<br/>' + '<b>Дата создания: </b>' + '11.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + 'цифры', // Футер
            clusterCaption: "Железнодорожный", // Кластер объекта
            hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта

          }, {

            fillColor: '4cd46365', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: '525252c3', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),


        // Построение полигона
        Polygon121371 = new ymaps.Polygon(

          [
            [
              [48.4751158751, 135.061937151],
              [48.4765480869, 135.064731156],
              [48.4703986385, 135.073185479],
              [48.4690278941, 135.070227689],
              [48.4751158751, 135.061937151]
            ]
          ], // Получение координат

          {
            // Содержимое балуна    
            balloonContentHeader: '<a href="https://ссылка">ТОС &quot;Камская 6&quot;</a>', // Заголовок 
            balloonContent: '<b>Куратор: </b>' + '<br/>' + '<b>Адрес: </b>' + 'ул. Камская, дом 6<br/>' + '<b>Район: </b>' + '<br/>' + '<b>Дата создания: </b>' + '13.02.2020<br/>', // Содержимое
            balloonContentFooter: 'Телефон: </b>' + '', // Футер
            clusterCaption: "Южный", // Кластер объекта
            hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта

          }, {

            fillColor: '99fc99', // Цвет заливки
            fillOpacity: 0.45, // Прозрачность заливки
            strokeColor: 'ff007f', // Цвет обводки
            strokeWidth: 2, // Толщина обводки
            strokeOpacity: 0.5 // Прозрачность обводки
          }),



      myMap.geoObjects.add(Polygon106497);
      myMap.geoObjects.add(Polygon106500);
      myMap.geoObjects.add(Polygon121371);
    });
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div style="padding: 5px;">

    <div>
      Фильтр по Районам <br>
      <input type='checkbox' id='jdr' checked=true>Железнодорожный</input><br>
      <input type='checkbox' id='industr' checked=true>Индустриальный</input><br>
      <input type='checkbox' id='kirov' checked=true>Кировский</input>
    </div>
  </div>
</body>

</html>

Answer 1

Ну по прошествию чуть больше недели я все же победил этот код, фильтрация работает исправно)))

Вот что в итоге получилось:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Многоугольник</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=3261ce08-c60a-4114-96f8-ce820abf124a" type="text/javascript"></script>

  <script type="text/javascript">
    ymaps.ready(init);

    function init() {

      // Создание экземпляра карты и его привязка к контейнеру с заданным id ("map")
      var myMap = new ymaps.Map('map', {
        center: [48.48, 135.08],
        zoom: 12,
        controls: ['zoomControl', 'typeSelector', 'fullscreenControl'] // "Элементы управления (Зум, слои, фулскрин)

      }, {
        searchControlProvider: 'yandex#search'
      });

      // Функция, которая по состоянию чекбоксов в меню
      // показывает или скрывает геообъекты из выборки.
      function checkState() {
        var shownObjects,
          byCoppp = new ymaps.GeoQueryResult();

        // Отберем объекты по цвету. 
        if ($('#jdr').prop('checked')) {
          // Будем искать по двум параметрам:
          // - для точечных объектов по полю preset;
          // - для контурных объектов по цвету заливки.
          byCoppp = myObjects.search('options.fildColor = "Железнодорожный"');
        }
        if ($('#industr').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Индустриальный"')
            // После того, как мы нашли все зеленые объекты, добавим к ним
            // объекты, найденные на предыдущей итерации.
            .add(byCoppp);
        }
        if ($('#kirov').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Кировский"')
            .add(byCoppp);
        }
        if ($('#centr').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Центральный"')
            .add(byCoppp);
        }
        if ($('#krasnflot').prop('checked')) {
          byCoppp = myObjects.search('options.fildColor = "Краснофлотский"')
            .add(byCoppp);
        }


        // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
        // которые совмещают нужные признаки.
        shownObjects = byCoppp.addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        myObjects.remove(shownObjects).removeFromMap(myMap);
      }

      $('#jdr').click(checkState);
      $('#industr').click(checkState);
      $('#kirov').click(checkState);
      $('#centr').click(checkState);
      $('#krasnflot').click(checkState);




      // Создадим объекты из их JSON-описания и добавим их на карту.
      window.myObjects = ymaps.geoQuery({
        type: "FeatureCollection",
        features: [


          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.4872099152, 135.044750889],
                  [48.4865858624, 135.045233687],
                  [48.4863005786, 135.044150075],
                  [48.4869567290, 135.043726286],
                  [48.4872099152, 135.044750889]
                ]
              ]

            },
            options: {
              fillColor: 'ff0000', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '020202', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Кировский" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Виктория&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.5206, 135.107],
                  [48.5215, 135.108],
                  [48.5217, 135.107],
                  [48.5217, 135.107],
                  [48.5212, 135.106],
                  [48.5206, 135.107]
                ]
              ]

            },
            options: {
              fillColor: '4cd46365', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '525252c3', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Железнодорожный" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Максимум Света&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [48.4751158751, 135.061937151],
                  [48.4765480869, 135.064731156],
                  [48.4703986385, 135.073185479],
                  [48.4690278941, 135.070227689],
                  [48.4751158751, 135.061937151]
                ]
              ]

            },
            options: {
              fillColor: '99fc99', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: 'ff007f', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "Центральный" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "ТОС &quot;Камская 6&quot;" // Подсказка объекта
            }
          },



          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                []
              ]

            },
            options: {
              fillColor: '65dbc653', // Цвет заливки
              fillOpacity: 0.45, // Прозрачность заливки
              strokeColor: '1102b8e2', // Цвет обводки
              strokeWidth: 2, // Толщина обводки
              strokeOpacity: 0.5, // Прозрачность обводки
              fildColor: "" // Кластер объекта 

            },
            // Содержимое балуна
            properties: {

              hintContent: "" // Подсказка объекта
            }
          },


        ]

      }).addToMap(myMap);
    }
  </script>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div style="padding: 5px;">


    <div class="overSelect"></div>
  </div>
  <div id="checkboxes">
    <label for="one">
                        <input type='checkbox' id='jdr' checked=true>Железнодорожный</label>
    <label for="two">
                        <input type='checkbox' id='industr' checked=true>Индустриальный</label>
    <label for="three">
                        <input type='checkbox' id='kirov' checked=true>Кировский</label>
    <label for="three">
                        <input type='checkbox' id='centr' checked=true>Центральный</label>
    <label for="three">
                        <input type='checkbox' id='krasnflot' checked=true>Краснофлотский</label>
  </div>
  
</body>

</html>

Теперь все фильтруется как нужно! Осталось теперь придумать как туда поиск запилить, боюсь код полностью придется менять((

БЛОГ НА HUSL

Как осуществить фильтрацию уже созданных полигонов API яндекс карт если создаются они автоматически?

Ответы (1 шт):