Клуб API Карт

Клуб API Карт

Создание конструктора на своем сайте

Пост в архиве.

Изначальное задание/проблема: нужно сделать на сайте возможность пользователям добавлять свои метки, линии, многоугольники.


То есть что бы было что-то вроде этого:

http://api.yandex.ru/maps/tools/constructor/


Если посмотреть спрайт с которого отображаются кнопки управления "Переместить карту", "Увеличить", "Измерить расстояние", то там так же есть и иконки для кнопок "Установка точек", "Рисование линий", "Рисование многоугольников".

Проблема в том что как добавить последние три к себе на карту не нашел ни в документации ни здесь в клубе.


Поэтому буду очень благодарен, если кто подскажет есть ли для этого (добавление кнопок "Установка точек", "Рисование линий", "Рисование многоугольников") готовое решение или нужно создавать собственный кнопки и прорабатывать их поведение?


p.s. Интересует API 2.0.

5 комментариев
Авторизуйтесь, чтобы оставить комментарий
thekashey
28 января 2016, 04:23

Готовое решение и есть и нет.

Для установки точки вам требуется слушать click на карте, и при этом самом клике создать новый геообьект.

Передвигается он редактором.

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

Осталось сохранить - используем map.geoObjects.each и сохраняем в json все нужные поля обьектов которые у нас есть.

Этот json можно сохранить прямо текстом в бд, а потом востановить обьекты на карте.

Следует учесть что карта сейчас уже "нативно" умеет загружать данные из формата geoJson(а также kml или yml), есть идея научить ее самостоятельно в эти форматы сохранятся(но сейчас не умеет)

project-xf
28 января 2016, 04:23

Очень интересно. А можно про "нативную" загрузку из формата geoJson поподробнее? (что это за формат, я уже прочитала)

Например, использую я $.getJSON и получаю некий ассоциативный массив

myarray = { "type": "FeatureCollection",

      "features": [

             { "type": "Feature",

                      "geometry": {"type": "Point", "coordinates": [100.0, 0.0]}
              }

              { "type": "Feature",

                       "geometry":{ "type": "LineString", "coordinates": [ [101.0, 0.0], [102.0, 1.0]]},

                        "options": {"strokeWidth": 3, "strokeColor": "#FF00FF", "strokeStyle": "solid","strokeOpacity": 1};

              }
                   ]

}

(пример на основе примера, приведенного в спецификации на формат)

и я могу просто писать обработку вида

var myObject = new ymaps.GeoObject(myarray.features[i]);

myMap.geoObjects.add(myObject);

и координаты и свойства геообъекта автоматически распознаются и расставятся по своим местам?

или надо все-таки явно выбирать по ключам из массива геометрию, цвет, прозрачность и т.д.и присваивать через myObject.options.set?

thekashey
28 января 2016, 04:23

Насчет нативной загрузки я немного поспешил - сейчас доступна загрузка только из geoXML(тоже самое только XML)

При этом сама структура данных почти полностью совпадают с geoJSON(не получилось красиво реализовать все, отхождения всетаки есть, например только одна геометрия)

Чтобы из geoJSON создать обьекты прийдется самому итерировать по фичам и создавать обьекты.

При этом, если они описанны как так вы и написали то var placemark = new ymaps.GeoObject({geometry:features[i].geometry},features[i].options);

Те свойства совпадают и по именам, и по типам, но нет "читателя-задавателя" с нашей стороны.

do.beer.man
28 января 2016, 04:23

Вот простейший пример можно глянуть? Без каких-то там BEM.DOM.decl(...) или BEM.HTML.decl(...) ;).
Я создал этот лэйаут балуна, но чую не так, ибо кроме самого себя он ничего не видит. Я имею ввиду this.
Или надо юзать префикс editor?

bohartik
28 января 2016, 04:23

dobeerman, для меня проблема была решена созданием своего тулбара, своих кнопок, своих балунов со своими формами и своими обработчиками.

То есть нужно создать тулбар (ToolBar), к нему добавить кнопки (Button), а на событие click на карте прописать обработчики в зависимости от того какая кнопка активная...