Как получить массив точек после фильтрования по searchInside
На карту выводятся точки с json файла.
Написали функционал обвода области, а после - попадание точек в эту область.
Все работает и точки фильтруются. Ненужные - скрываются.
Дальше нам нужно как-то обработать полученные точки и отправить их по Ajax в php файл.
И... это никак не получается сделать.
var geoObject = new ymaps.Polygon([coordinates], {}, styles[currentIndex]);
myMap.geoObjects.add(geoObject);
var objectsInsideCircle = myObjects.searchInside(geoObject);
objectsInsideCircle - вот тут у нас получаются объекты, которые мы потом кластеризуем и выводим.
Но с этими данными никак нельзя нормально работать. А в документации Яндекс карты я не нашел ни слова о том, как их преобразовать в массов данных, как он получал точки с json (то есть в таком же виде) или же хотя бы массив из ID точек.
"type": "Feature",
"id": 721414,
В json мы ID передаем как раз.
UPD Распишу все подробнее.
Это пример данных с json.
{type: 'FeatureCollection', features: Array(305)}
features: Array(305)
[0 … 99]
0: {type: 'Feature', id: 721414, geometry: {…}, properties: {…}, options: {…}}
1: {type: 'Feature', id: 720991, geometry: {…}, properties: {…}, options: {…}}
2: {type: 'Feature', id: 720986, geometry: {…}, properties: {…}, options: {…}}
3: {type: 'Feature', id: 720985, geometry: {…}, properties: {…}, options: {…}}
4: {type: 'Feature', id: 720812, geometry: {…}, properties: {…}, options: {…}}
5: {type: 'Feature', id: 720809, geometry: {…}, properties: {…}, options: {…}}
6: {type: 'Feature', id: 720807, geometry: {…}, properties: {…}, options: {…}}
7: {type: 'Feature', id: 720806, geometry: {…}, properties: {…}, options: {…}}
8: {type: 'Feature', id: 720805, geometry: {…}, properties: {…}, options: {…}}
9: {type: 'Feature', id: 720804, geometry: {…}, properties: {…}, options: {…}}
10: {type: 'Feature', id: 720803, geometry: {…}, properties: {…}, options: {…}}
11: {type: 'Feature', id: 720802, geometry: {…}, properties: {…}, options: {…}}
12: {type: 'Feature', id: 720801, geometry: {…}, properties: {…}, options: {…}}
13: {type: 'Feature', id: 720800, geometry: {…}, properties: {…}, options: {…}}
14: {type: 'Feature', id: 720799, geometry: {…}, properties: {…}, options: {…}}
15: {type: 'Feature', id: 720798, geometry: {…}, properties: {…}, options: {…}}
16: {type: 'Feature', id: 720793, geometry: {…}, properties: {…}, options: {…}}
17: {type: 'Feature', id: 720790, geometry: {…}, properties: {…}, options: {…}}
18: {type: 'Feature', id: 720305, geometry: {…}, properties: {…}, options: {…}}
19: {type: 'Feature', id: 720304, geometry: {…}, properties: {…}, options: {…}}
20: {type: 'Feature', id: 720055, geometry: {…}, properties: {…}, options: {…}}
21: {type: 'Feature', id: 720054, geometry: {…}, properties: {…}, options: {…}}
22: {type: 'Feature', id: 720053, geometry: {…}, properties: {…}, options: {…}}
23: {type: 'Feature', id: 720050, geometry: {…}, properties: {…}, options: {…}}
24: {type: 'Feature', id: 719956, geometry: {…}, properties: {…}, options: {…}}
25: {type: 'Feature', id: 719955, geometry: {…}, properties: {…}, options: {…}}
26: {type: 'Feature', id: 719696, geometry: {…}, properties: {…}, options: {…}}
27: {type: 'Feature', id: 719695, geometry: {…}, properties: {…}, options: {…}}
28: {type: 'Feature', id: 719694, geometry: {…}, properties: {…}, options: {…}}
29: {type: 'Feature', id: 719408, geometry: {…}, properties: {…}, options: {…}}
30: {type: 'Feature', id: 719407, geometry: {…}, properties: {…}, options: {…}}
31: {type: 'Feature', id: 719406, geometry: {…}, properties: {…}, options: {…}}
32: {type: 'Feature', id: 719143, geometry: {…}, properties: {…}, options: {…}}
33: {type: 'Feature', id: 719142, geometry: {…}, properties: {…}, options: {…}}
34: {type: 'Feature', id: 719140, geometry: {…}, properties: {…}, options: {…}}
35: {type: 'Feature', id: 719139, geometry: {…}, properties: {…}, options: {…}}
36: {type: 'Feature', id: 719138, geometry: {…}, properties: {…}, options: {…}}
37: {type: 'Feature', id: 718948, geometry: {…}, properties: {…}, options: {…}}
38: {type: 'Feature', id: 718944, geometry: {…}, properties: {…}, options: {…}}
39: {type: 'Feature', id: 718705, geometry: {…}, properties: {…}, options: {…}}
40: {type: 'Feature', id: 718703, geometry: {…}, properties: {…}, options: {…}}
41: {type: 'Feature', id: 718702, geometry: {…}, properties: {…}, options: {…}}
42: {type: 'Feature', id: 718701, geometry: {…}, properties: {…}, options: {…}}
43: {type: 'Feature', id: 718700, geometry: {…}, properties: {…}, options: {…}}
44: {type: 'Feature', id: 718699, geometry: {…}, properties: {…}, options: {…}}
45: {type: 'Feature', id: 718698, geometry: {…}, properties: {…}, options: {…}}
46: {type: 'Feature', id: 718696, geometry: {…}, properties: {…}, options: {…}}
47: {type: 'Feature', id: 718693, geometry: {…}, properties: {…}, options: {…}}
48: {type: 'Feature', id: 718360, geometry: {…}, properties: {…}, options: {…}}
49: {type: 'Feature', id: 718359, geometry: {…}, properties: {…}, options: {…}}
50: {type: 'Feature', id: 718357, geometry: {…}, properties: {…}, options: {…}}
51: {type: 'Feature', id: 718356, geometry: {…}, properties: {…}, options: {…}}
52: {type: 'Feature', id: 718355, geometry: {…}, properties: {…}, options: {…}}
53: {type: 'Feature', id: 718354, geometry: {…}, properties: {…}, options: {…}}
54: {type: 'Feature', id: 718353, geometry: {…}, properties: {…}, options: {…}}
55: {type: 'Feature', id: 718352, geometry: {…}, properties: {…}, options: {…}}
56: {type: 'Feature', id: 718351, geometry: {…}, properties: {…}, options: {…}}
57: {type: 'Feature', id: 718349, geometry: {…}, properties: {…}, options: {…}}
58: {type: 'Feature', id: 718348, geometry: {…}, properties: {…}, options: {…}}
59: {type: 'Feature', id: 718346, geometry: {…}, properties: {…}, options: {…}}
60: {type: 'Feature', id: 718309, geometry: {…}, properties: {…}, options: {…}}
61: {type: 'Feature', id: 717796, geometry: {…}, properties: {…}, options: {…}}
62: {type: 'Feature', id: 717795, geometry: {…}, properties: {…}, options: {…}}
63: {type: 'Feature', id: 717793, geometry: {…}, properties: {…}, options: {…}}
64: {type: 'Feature', id: 717792, geometry: {…}, properties: {…}, options: {…}}
65: {type: 'Feature', id: 717100, geometry: {…}, properties: {…}, options: {…}}
66: {type: 'Feature', id: 717099, geometry: {…}, properties: {…}, options: {…}}
67: {type: 'Feature', id: 717098, geometry: {…}, properties: {…}, options: {…}}
68: {type: 'Feature', id: 717097, geometry: {…}, properties: {…}, options: {…}}
69: {type: 'Feature', id: 717095, geometry: {…}, properties: {…}, options: {…}}
70: {type: 'Feature', id: 717094, geometry: {…}, properties: {…}, options: {…}}
71: {type: 'Feature', id: 717093, geometry: {…}, properties: {…}, options: {…}}
72: {type: 'Feature', id: 717091, geometry: {…}, properties: {…}, options: {…}}
73: {type: 'Feature', id: 717088, geometry: {…}, properties: {…}, options: {…}}
74: {type: 'Feature', id: 717080, geometry: {…}, properties: {…}, options: {…}}
75: {type: 'Feature', id: 716973, geometry: {…}, properties: {…}, options: {…}}
76: {type: 'Feature', id: 716972, geometry: {…}, properties: {…}, options: {…}}
77: {type: 'Feature', id: 716971, geometry: {…}, properties: {…}, options: {…}}
78: {type: 'Feature', id: 716970, geometry: {…}, properties: {…}, options: {…}}
79: {type: 'Feature', id: 716969, geometry: {…}, properties: {…}, options: {…}}
80: {type: 'Feature', id: 716968, geometry: {…}, properties: {…}, options: {…}}
81: {type: 'Feature', id: 716580, geometry: {…}, properties: {…}, options: {…}}
82: {type: 'Feature', id: 716578, geometry: {…}, properties: {…}, options: {…}}
83: {type: 'Feature', id: 716575, geometry: {…}, properties: {…}, options: {…}}
84: {type: 'Feature', id: 716573, geometry: {…}, properties: {…}, options: {…}}
85: {type: 'Feature', id: 716286, geometry: {…}, properties: {…}, options: {…}}
86: {type: 'Feature', id: 716285, geometry: {…}, properties: {…}, options: {…}}
87: {type: 'Feature', id: 716283, geometry: {…}, properties: {…}, options: {…}}
88: {type: 'Feature', id: 716281, geometry: {…}, properties: {…}, options: {…}}
89: {type: 'Feature', id: 716280, geometry: {…}, properties: {…}, options: {…}}
90: {type: 'Feature', id: 716279, geometry: {…}, properties: {…}, options: {…}}
91: {type: 'Feature', id: 716278, geometry: {…}, properties: {…}, options: {…}}
92: {type: 'Feature', id: 716276, geometry: {…}, properties: {…}, options: {…}}
93: {type: 'Feature', id: 715682, geometry: {…}, properties: {…}, options: {…}}
94: {type: 'Feature', id: 715680, geometry: {…}, properties: {…}, options: {…}}
95: {type: 'Feature', id: 715679, geometry: {…}, properties: {…}, options: {…}}
96: {type: 'Feature', id: 715676, geometry: {…}, properties: {…}, options: {…}}
97: {type: 'Feature', id: 715673, geometry: {…}, properties: {…}, options: {…}}
98: {type: 'Feature', id: 715672, geometry: {…}, properties: {…}, options: {…}}
99: {type: 'Feature', id: 715670, geometry: {…}, properties: {…}, options: {…}}
[100 … 199]
[200 … 299]
[300 … 304]
length: 305
[[Prototype]]: Array(0)
type: "FeatureCollection"
[[Prototype]]: Object
Грубо говоря массивные данные.
По ним строятся точки и баллуны в Яндекс Картах.
var myObjects = ymaps.geoQuery(data);
var clusterer = myObjects.clusterize();
myMap.geoObjects.add(clusterer);
Добавляем на карту и кластеризуем. В итоге мы получаем на карте точки.
Дальше привожу уже рабочий и готовый код по отрисовке фигуры и нахождению точек, что попали на эту фигуру
/* Функционал Обвести область */
jQuery('.page-map .for_map .btm_paintProcess').click(function(){
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
} else {
jQuery(this).addClass('active');
}
});
var paintProcess;
// Опции многоугольника или линии.
var styles = [
{strokeColor: '#0000ff', strokeOpacity: 0.8, strokeWidth: 5, fillColor: '#0000ff', fillOpacity: 0.5},
];
var currentIndex = 0;
// Подпишемся на событие нажатия кнопки мыши
myMap.events.add('mousedown', function (e) {
// Если кнопка мыши была нажата с зажатой клавишей "alt", то начинаем рисование контура.
if ( jQuery('.page-map .for_map .btm_paintProcess').hasClass('active') ) {
if (currentIndex == styles.length - 1) {
currentIndex = 0;
} else {
currentIndex += 1;
}
paintProcess = ymaps.ext.paintOnMap(myMap, e, {style: styles[currentIndex]});
}
});
// Подпишемся на событие отпускания кнопки мыши.
myMap.events.add('mouseup', function (e) {
if (paintProcess) {
// Получаем координаты отрисованного контура.
var coordinates = paintProcess.finishPaintingAt(e);
paintProcess = null;
// В зависимости от состояния кнопки добавляем на карту многоугольник или линию с полученными координатами.
var geoObject = new ymaps.Polygon([coordinates], {}, styles[currentIndex]);
myMap.geoObjects.add(geoObject);
var objectsInsideCircle = myObjects.searchInside(geoObject);
objectsInsideCircle.setOptions('preset', 'islands#blueIcon');
myMap.geoObjects.removeAll(); // Очищаем все объекты на карте
var clusterer2 = objectsInsideCircle.clusterize();
myMap.geoObjects.add(clusterer2); // Добавляем кластеры на карту
myMap.geoObjects.add(geoObject);
jQuery('.page-map .for_map .btm_paintProcess').removeClass('active');
jQuery.ajax({
type: 'POST',
url: '/exchange/ajax/object_sidebar_map_filter.php',
data: {
'objects' : objectsInsideCircle
},
success: function(data){
console.log(1);
jQuery('.page-map .search-map-sidebar .objects').replaceWith(data);
}
})
}
});
/* END Функционал Обвести область */
Суть:
- Нажимаем кнопку и начинаем рисовать
- На карте образуется фигура
- Идет поиск точек, что попали внутрь этой фигуры
- Скрываем те, что у нас не попадают (в нашем случаем мы все чистим, а потом уже возвращаем те, что попадают)
- Тут должна быть отправка полученных точек по Ajax в PHP файл
И непонятно как отправить данные...
Как видите, в самом конце написана функция AJAX отправки. Вот только данные не передаются.
Скриншот: http://joxi.ru/12M3jJgSgooa8r
1 - Данные с json.
2 - Данные в objectsInsideCircle.
3 - Ошибка AJAX
Uncaught TypeError: Cannot read properties of undefined (reading 'fire')
Ответы (1 шт):
Самостоятельно решил данный вопрос.
Как мы помним, по вопросу у меня в objectsInsideCircle находятся отфильтрованные объекты.
В json у меня в options так же у каждой точки есть параметр id.
Именно по нему и буду искать.
let thsiObjs = new Array();
objectsInsideCircle.each(function (geoObject, index) {
var thsiObj = geoObject.options.getAll();
thsiObjs.push(thsiObj.id);
});
Вот он код.
Создаем пустой массив. Проходимся по всем точкам и из них забираем параметр id из параметра options.
Дальше эти id в пустой массив.
Вот и все. В итоге у нас получается массив из id точек. А уже дальше передаем этот массив по Ajax в php файл.