Фильтр по цвету метки

@Kather · Регистрация: 04.11.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Подскажите, как реализовать функцию кластеризации на Yandex карте?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <title>Карта техники ROPA на территории РФ.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" 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>
    <script src="clusterer_create.js" type="text/javascript"></script>
    <style>
        body, html {
            font-family: Arial;
            font-size: 14pt;
            padding: 0;
            margin: 0;
            max-width: 100%;
            height: 100%;
        }
        #map {
            max-width: 100%;
            height: 80%;
        }
    </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='gray' checked=true>Погрузчики свеклы</input><br>
            <input type='checkbox' id='black' checked=true>Свеклоуборочный комбайн (черные)</input><br>
            <input type='checkbox' id='yellow' checked=true>Свеклоуборочный комбайн (желтые)</input>
        </div>
    </div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
ymaps.ready(init);
 
function init() {
    var myMap = new ymaps.Map('map', {
            center: [53.00, 59.45],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        }),
        objectManager = new ymaps.ObjectManager({
            // Чтобы метки начали кластеризоваться, выставляем опцию.
            clusterize: true,
            // ObjectManager принимает те же опции, что и кластеризатор.
            gridSize: 64,
            // Макет метки кластера pieChart.
            clusterIconLayout: "default#pieChart"
        });
    myMap.geoObjects.add(objectManager);
    
    // Функция, которая по состоянию чекбоксов в меню
    // показывает или скрывает геообъекты из выборки.
    function checkState () {
        var shownObjects,
            byColor = new ymaps.GeoQueryResult();
            /*byShape = new ymaps.GeoQueryResult();*/
        
        // Отберем объекты по цвету. 
        if ($('#red').prop('checked')) {
            // Будем искать по двум параметрам:
            // - для точечных объектов по полю preset;
            // - для контурных объектов по цвету заливки.
            byColor = geoObjects.search('options.fillColor = "#cc3300"')
                .add(geoObjects.search('options.preset = "islands#redIcon"'));
        }
        if ($('#gray').prop('checked')) {
            byColor = geoObjects.search('options.fillColor = "#cccccc"')
                .add(geoObjects.search('options.preset = "islands#grayIcon"'))
                // После того, как мы нашли все зеленые объекты, добавим к ним
                // объекты, найденные на предыдущей итерации.
                .add(byColor);
        }
        if ($('#black').prop('checked')) {
            byColor = geoObjects.search('options.fillColor = "#000000"')
                .add(geoObjects.search('options.preset = "islands#blackIcon"'))
                .add(byColor);
        }
        if ($('#yellow').prop('checked')) {
            byColor = geoObjects.search('options.fillColor = "#ffd300"')
                .add(geoObjects.search('options.preset = "islands#yellowIcon"'))
                .add(byColor);
        }
        // Отберем объекты по форме.
        if ($('#point').prop('checked')) {
            byShape = geoObjects.search('geometry.type = "Point"');
        }
        if ($('#polygon').prop('checked')) {
            byShape = geoObjects.search('geometry.type = "Polygon"').add(byColor);
        }
        if ($('#circle').prop('checked')) {
            byShape = geoObjects.search('geometry.type = "Circle"').add(byColor);
        }
        
        // Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
        // которые совмещают нужные признаки.
        shownObjects = byColor.addToMap(myMap);
        // Объекты, которые не попали в выборку, нужно убрать с карты.
        geoObjects.remove(shownObjects).removeFromMap(myMap);
    }
    
    $('#red').click(checkState);
    $('#gray').click(checkState);
    $('#black').click(checkState);
    $('#yellow').click(checkState);
    $('#point').click(checkState);
    $('#polygon').click(checkState);
    $('#circle').click(checkState);
    
    // Создадим объекты из их JSON-описания и добавим их на карту.
    window.geoObjects = ymaps.geoQuery(
      {type: "FeatureCollection", 
       features: [
          {type: 'Feature', geometry: {type: 'Point', coordinates: [55.34954, 37.721587]}, 
          "properties": {"balloonContent": "M", "hintContent": "M"}, 
          options: {preset: 'islands#grayIcon'}},
          {type: 'Feature', geometry: {type: 'Point', coordinates: [55.24954, 37.4]},
         "properties": {"balloonContent": "P", "hintContent": "P"},
                options: {preset: 'islands#blackIcon'}},
          {type: 'Feature', geometry: {type: 'Point', coordinates: [55.14954, 37.61587]},
              "properties": {"balloonContent": "K", "hintContent": "K"},
                options: {preset: 'islands#redIcon'}},
          {type: 'Feature', geometry: {type: 'Point', coordinates: [55.396969, 43.830201]},
            "properties": {"balloonContent": "K", "hintContent": "K"},
                options: {preset: 'islands#redIcon'}},
          {type: 'Feature', geometry: {type: 'Point', coordinates: [52.885420, 35.956179]},
            "properties": {"balloonContent": "P", "hintContent": "P"},
                options: {preset: 'islands#blackIcon'}},
            {type: 'Feature', geometry: {type: 'Point', coordinates: [53.081306, 39.605717]}, 
            "properties": {"balloonContent": "T", "hintContent": "T"},
                options: {preset: 'islands#yellowIcon'}},
          {type: 'Feature', geometry: {type: 'Point', coordinates: [55.518258, 50.307525]},
            "properties": {"balloonContent": "K", "hintContent": "K"},
                options: {preset: 'islands#redIcon'}}
        ]
    }).addToMap(myMap);
  
  clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);
 
    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
}

@Kather · 12.09.2018, 14:09 **[ТС]**

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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" type="text/javascript"></script>
  <script src="geoobjects_menu.js" type="text/javascript"></script>
    <script src="clusterer_pie_chart.js" type="text/javascript"></script>
  <script src="object_manager_filter.js" type="text/javascript"></script>
    <style>
        html, body, #map {
            max-width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 5
        }, {
            searchControlProvider: 'yandex#search'
        }),
        clusterer = new ymaps.Clusterer({
            // Макет метки кластера pieChart.
            clusterIconLayout: 'default#pieChart',
            // Радиус диаграммы в пикселях.
            clusterIconPieChartRadius: 25,
            // Радиус центральной части макета.
            clusterIconPieChartCoreRadius: 10,
            // Ширина линий-разделителей секторов и внешней обводки диаграммы.
            clusterIconPieChartStrokeWidth: 3,
            // Определяет наличие поля balloon.
            hasBalloon: true
        }),
        points = [
          [55.396969, 43.830201], [52.885420, 35.956179], [56.871868, 35.914011], [51.730361, 36.192647], [52.728047, 41.422920], [53.258703, 34.392345], [55.796289, 49.108795] 
        ],
        points2 = [
          [53.081306, 39.605717]
        ]
        geoObjects = [];
/**************************************************************/
    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], {balloonContent: 'K'}, {
            iconColor: '#cc3300'
        });
    }
 
  for (var i = 0, len = points2.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points2[i], {balloonContent: 'T'}, {
            iconColor: '#ffd300'
        });
    }
 
    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);
 
    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
 /****************************************************/
// Создадим пункты выпадающего списка.
    var listBoxItems = ['K', 'M', 'P', 'T']
        .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: true
                }
            })
        }),
        // Список 
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: true,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    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]
        }
    }
  /***************************************************/
});

Добавлено через 4 часа 59 минут
Необходимо было объявить внутри кода javascript переменную data, и в неё поместить содержимое файла data.json.
Тогда будет работать и кластеризация, и фильтрация меток.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .