Клуб API Карт

geometry.Circle - не могу в нем разобраться.

Антон
27 мая 2014, 01:33

Здравствуйте дорогие форумчане, помогите разобраться с даной опцией ...

Хочу реализовать на карте такую возможность, что когда пользователь маштабирует карту на маштаб 17-18, вокруг раставленных точек появляються круги которые обозначают область покрытия Wi-Fi. Что-то подобное мне удалось сделать, но это все равно не то, что мне нужно ... http://jsfiddle.net/Tonchi/agAD4/4/

 

Вот кусок кода одной из точек. А еще как добавить чтобы ета точка имелла свой значок ? Если дописывать эти два параметра, ничего не происходит ...

 

 iconLayout: 'default#image', // иконка

 iconImageHref: 'http://free-wifi.com.ua/image/wifi.png' // иконка

 

{
coord: [48.440189, 22.717202],
balloon: 'Mukachevo',
color: '#1faee9'
},

Как в этот кусок кода добавить круг вокруг точки? или же к каждой точке нужно добавлять такой кусок кода ?

 

    var circle = new ymaps.Circle(

        [[48.441044, 22.717894], 20],{}, {

        geodesic: true

    });

    myMap.geoObjects.add(circle);

Как сделать на множественное количество точек? дублировать такие куски кода ? и как сделать чтобы при маштабировании на 15-14-13-12 и т.д. круг просто пропадал.

 

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

http://jsfiddle.net/Tonchi/agAD4/1/

И еще, то, что теперь есть мне помогли реализовать в этой теме.

http://clubs.ya.ru/mapsapi/replies.xml?item_no=49191

Создавайте круги для каждой точки и добавляйте их в отдельную коллекцию.

Слушайте на карте событие "boundschange", и если при его наступлении масштаб карты меньше 17, выставляйте ей опцию visible=false

Пожалуйста помогите с примером. Не могу разобраться в песочнице, нет примера как при маштабировании сделать так, чтобы обекты появлялись и пропадали (круги вокруг точек) :(((

Вот что у меня теперь есть. http://jsfiddle.net/agAD4/5/

Если нажать на кластер где число 14 то видно, что уже есть два круга как их добавить в отдельную колекцию и как сделать чтобы круги пропадали если маштабирование меньше 17 ?

Еще раз большое спасибо за помощь.

 

Если нажать на кластер где число 14 то видно, что уже есть два круга как их добавить в отдельную колекцию и как сделать чтобы круги пропадали если маштабирование меньше 17 ?

1. Создать отдельную коллекцию

2. Добавить ее на карту

3. Добавить все круги в эту коллекцию.

 

про событие boundschange я писал вам выше

Нашел примеры с колекциями:

http://api.yandex.ru/maps/doc/jsapi/2.0/dg/concepts/geoobjects.xml

Но не могу разобоаться как круги собрать в колецию?

http://jsfiddle.net/K5e26/

 

а про событие boundschange вообще нет никаких примеров, тяжело разрбраться :(

Примеры смотреть не надо

смотрите поля карты в документации и интерфейсы.

http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Map.xml

Удалось не много ушовершенствовать сам код.

http://jsfiddle.net/agAD4/7/

Теперь круги в масиве, но сам код все равно довольно таки обьемный.

    // Создаем коллекцию геообъектов.

    var myCollection = new ymaps.GeoObjectCollection();

        

    // Добавляем метки в коллекцию.

    myCollection.add(new ymaps.Circle([[48.440189, 22.717202], 25], {hintContent: "Free Wi-Fi"},

    {fillColor: "#79AA5877", strokeColor: "#599F23", strokeOpacity: 0.5, strokeWidth: 5} ));

    

    myCollection.add(new ymaps.Circle([[48.440515, 22.717424], 25], {hintContent: "Free Wi-Fi"},

    {fillColor: "#79AA5877", strokeColor: "#599F23", strokeOpacity: 0.5, strokeWidth: 5} ));

        

    // Добавляем коллекцию на карту.

    myMap.geoObjects.add(myCollection);

Как сделать, чтобы эти опции относились ко всем точкам не прописывая их к каждом круге?

{hintContent: "Free Wi-Fi"}, {fillColor: "#79AA5877", strokeColor: "#599F23", strokeOpacity: 0.5, strokeWidth: 5}

 Чтобы круги прописывать только так 

myCollection.add(new ymaps.Circle([[48.440515, 22.717424], 25]));

пропишите эти опции коллекции.

Вот что получилось сделать. http://jsfiddle.net/K5e26/3/

Не могу обьеденить точки в кластеризатор и еще хуже, так и не смог разобраться и реализовать появление кругов только на маштабе 17-18 ... Помогите пожалуйста. Заранее большое спасибо.

По поводу сокращения кода могу посоветовать разбить массив "wifiDots" на 3 разных массива с координатами, а свойства прописать отдельно. И запустить последовательное добавление объектов в "wifiGeoObjects" для всех трёх.

Можете помочь с примером ?

http://jsfiddle.net/Tonchi/agAD4/4/

если не сложно канешно.

Заранее большое спасибо.

var Mukachevo = {coord: [[48.440189, 22.717202], [48.440612, 22.717551], [48.441044, 22.717894]],
    balloon: 'Mukachevo',
    color: '#1faee9'};
var Irshava = {coord: [[48.31272039, 23.04213754], [48.31229098, 23.04194979], [48.31194115, 23.04171165]],
    balloon: 'Irshava',
    color: '#3b5998'};

// "zone" должен быть обязательно ниже данных с координатами и свойствами
var zone = [Mukachevo, Irshava];

var wifiGeoObjects = [];
for (var i1 = 0; i1 < zone.length; i1++) {
    for (var i2 = 0; i2 < zone[i1].coord.length; i2++) {
        var geoObject = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: zone[i1].coord[i2]
            }, properties: {
                clusterCaption: zone[i1].title,
                balloonContentBody: zone[i1].balloon
            }
        }, {preset: 'islands#circleDotIcon',
            iconColor: zone[i1].color
        });
        wifiGeoObjects.push(geoObject);
    };
};
Первый цикл перебирает массив зон, а второй перебирает координаты в каждой зоне.

Может я что-то делаю не так? http://jsfiddle.net/FX993/

Еще нужно обьеденять точки в кластеризатор и прикрепить к каждой точке круг покрытия Wi-Fi

Я так понимаю, круги можно сделать так?

 

// Создаем коллекцию геообъектов.

var myCollection = new ymaps.GeoObjectCollection({}, {            

fillColor: "#79AA5877",           // цвет круга (77) прозрачность

strokeColor: "#599F23",           // цвет границы круга

strokeOpacity: 0.5,               // прозрачность

});

 

// Добавляем метки в коллекцию.

myCollection.add(new ymaps.Circle([[48.440189, 22.717202], 25]));

myCollection.add(new ymaps.Circle([[48.440515, 22.717424], 25]));

 

// Добавляем коллекцию на карту.

myMap.geoObjects.add(myCollection);

 

Я сам только недавно начал разбираться с API и круги пока что не использовал, поэтому ничего подсказать не могу.

А кластеризатор в моём примере выше используется.

Но в вашем примере допущена наверное ошибка, потому, что он не работает.

Это не весь код, а только его кусок, отвечающий за заполнение коллекции.

 

Ну вроде как разобрался почти со всем что мне нужно. Но не могу обьеденить все в кластеризатор. Прошу еще рас помочь мне с этим. Заранее большое спасибо.

http://jsfiddle.net/Tonchi/FX993/8/

Весть тот код, который я выше написал - он не для красоты вообще-то. Он в класторизаторе используется. И у вас его нет.

Тот код вместо вот этого вставлять надо:

 

for (var i = 0, l = UzhgorodCoords.length; i < l; i++) {
        UzhgorodCollection.add(new ymaps.Placemark(UzhgorodCoords[i]));

}

Потом все коллекции нужно будет загрузить в класторизатор и на карту выводить именно данные из класторизатора.

***

http://jsfiddle.net/FX993/9/

Сделал для Мукачёво, с остальным сами должны разбраться - по аналогии.

Спасибо вам большое за помощь ! Без Вас бы не смог разобраться.

Вот результат того, что получилось сделать.

http://jsfiddle.net/Tonchi/FX993/12/

 

П.С. Осталось сделать только, чтобы круги при маштабировании на 16 и ниже пропадали.