Клуб API Карт

Фильтрация range ползунками

raketaprod
14 марта 2015, 17:05

Всем привет! Столкнулся с проблемой фильтрации, а точнее не могу понять, почему значения не срабатывают.
За основу range слайдера беру jquery ui slider - range slider с двумя ползунками. И есть JSON файл, у которого в properties прописано два значения - minprice и maxprice ( "properties": {"maxprice": "20000", "minprice": "1000"...}) и есть код:



 

ymaps.ready(init);

function init() {
var myMap = new ymaps.Map('YMapsID', {
center: [37.573856, 55.751574],
zoom: 10
});

jQuery.getJSON('data1.json', function (json) {

var myObjects = ymaps.geoQuery(json)
.addToMap(myMap)
.applyBoundsToMap(myMap, {
checkZoomRange: true
});

var shownObjects,
byColor = new ymaps.GeoQueryResult(),
byShape = new ymaps.GeoQueryResult(),
byPrice = new ymaps.GeoQueryResult();


function checkState () {
// Отберем объекты по цвету.
if ($('#red').prop('checked')) {
// Будем искать по двум параметрам:
// - для точечных объектов по полю preset;
// - для контурных объектов по цвету заливки.
byColor = myObjects.search('options.fillColor = "#ff1000"')
.add(myObjects.search('options.preset = "islands#yellowStretchyIcon"'));
}
if ($('#red').prop('checked')) {
// Будем искать по двум параметрам:
// - для точечных объектов по полю preset;
// - для контурных объектов по цвету заливки.
byCity = myObjects.search('properties.fillColor = "#ff1000"')
.add(myObjects.search('options.preset = "islands#yellowStretchyIcon"'));
}
if ($('#green').prop('checked')) {
byColor = myObjects.search('options.fillColor = "#00ff00"')
.add(myObjects.search('options.preset = "islands#greenStretchyIcon"'))
// После того, как мы нашли все зеленые объекты, добавим к ним
// объекты, найденные на предыдущей итерации.
.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);
}


// Вот тут:
var minimus = $( "#slider-range" ).slider( "values", 0 );
byPrice = myObjects.search('properties.minpr > minimus').add(byPrice);
//

// Мы отобрали объекты по цвету и по форме. Покажем на карте объекты,
// которые совмещают нужные признаки.
shownObjects = byColor.intersect(byShape).intersect(byPrice).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);

$(function() {
$('#slider-range').slider({
range: true,
min: 0,
max: 8000,
values: [ 75, 7750 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function(event, ui) {
checkState();
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
});
}

 

За основу брал фильтрацию 2.0. И вывести фильтрацию по option.preset получилось нормально, а теперь при выполнении всей функции checkState() все просто исчезает.

Может кто знает, как без objectManager'a? И в чем ошибка может быть, что все пропадает?

З.Ы. Подобное делал через objectManager, при том очень гладко все прошло - сформирован запрос к json файлу на изменение чего либо, и проверяет просто properties.

12 комментариев
Подписаться на комментарии к посту

Код надо убирать под кат (кнопка врезка) никто не любит листать пост на 5 экранов в ленте.

 

 

'properties.minpr > minimus'

Шаблоны макетов строятся в контексте данных геообъекта, у них нет доступа к переменным из scope в котором они созданы

прошу прощения за лист, сейчас отредактирую. Насчет скопа - сейчас гляну... Хотя при чем тут скоп. Дело в том, что все, что выше - без этих двух строк на jquery slider внутри checkState() работают как надо и данные он берет. А тут именно перестает брать, и подозрение больше в том, что он возвращает false постоянно, потому что сравнивает неправильно

Притом что он сравнивает properties.minpr с undefined

В том то и дело, что нет! ставлю console.log(minimus) внутри checkStart() и он каждый раз, выпоняя функцию, как раз показывает мне число!

 

 
ставлю console.log(minimus) внутри 

Причем тут console.log

У вас в шаблоне написано " > minimus"

Так вот шаблонизатор никак эту переменную не увидит

хорошо, а как тогда её туда вставить? У ObjectManager'a с этим все проще, получается

maprefresh = function(){

  objectManager.setFilter(function(o){

   return (o.properties.minpr) > minprice

   && (o.properties.minpr) < maxprice

});

}

 

'properties.minpr > ' + minimus


geoQuery.search так же может принимать функцию

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

точнее даже так...

сначала 5 объектов

передвигаю познук вправо до значения 7000 (минпр максимум - 4000)

Результат - все убрал
____

0 объектов - передвинул влево - все показал

_____

5 объектов - вернул до 7000 - ничего не убрал (???). Извининте меня, конечно, но вы мое последнее спасение)))

Я просто даже представить не могу, почему такое может быть.
 

Я за вас не могу дебажить ваш код.

Поставьте breakpoint в отладчике и посмотрите с чем вы сравниваете

да я это понимаю, просто он сравнивает undefined с minimus. А что тут ещё сравнивать, если я указываю единственно нужный мне properties, остальные, которые статичные (т.е. не сравнить циферки) он выводит мне как надо. Видимо функция search вообще на это не годится...

А вот если ставлю console.log(myObjects.search('properties.minpr'))

Получаю это: Uncaught TypeError: Cannot read property '1' of null