Клуб API Карт

Клуб API Карт

ObjectManager и собственный iconContentLayout

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

Есть коллекция точек в базе данных. В json формате выдаю их с опцией preset islands#greenCircleDotIcon,islands#orangeCircleDotIcon... И так далее. Всего 4 типа точек: зеленые, оранжевые, красные, коричневые. 

Появилась необходимость использовать собственные изображения для точек. Если рисовать их "влоб" , по клику мышки, то использую такой подход:

ymaps.templateLayoutFactory.createClass('<div style="position:relative;left:-6px;top:-6px"><svg height="12" width="12"><circle cx="6" cy="6" r="6" fill="#56DB40" /></svg></div>')

 То есть создаю шаблон с svg рисунком зеленого цвета. 

Далее эти точки добавляю в коллекцию:

greenColletion = new ymaps.GeoObjectCollection(null,  {
 iconLayout: 'default#imageWithContent',
 iconImageHref:'',
 iconContentLayout: greenLayout});

Ну, собственно все. Но теперь вопрос. Как проделать все тоже самое с ObjectManager? Как мне запихнуть шаблон в Json описание точек, которое я генерирую на стороне сервера? Ведь, как я понимаю, шаблон создается на стороне клиента. 

Или хотя бы как мне назначить точкам картинку из файла (.svg, .gif...) в json описании? 

7 комментариев
Авторизуйтесь, чтобы оставить комментарий
Михаил С.
26 октября 2017, 19:24
С кастомным изображением разобрался :
iconLayout: 'default#image'

 iconImageHref: 'images/myIcon.gif' 

Но все-таки как быть с кастомным макетом? В принципе, нет уже необходимости, просто интересно.
dimik
26 октября 2017, 19:30
С ObjectManager все то же самое, нужно передавать строку – ключ на ваш макет в хранилище
Можно использовать хранилище макетов
А можно и пресет создать для макета, и положить в хранилище пресетов
Михаил С.
26 октября 2017, 19:43
dimik,
яснопонятно. То есть в хранилище пресетов (например) помещаю макет, содержащий '<div style="position:relative;left:-6px;top:-6px"><svg height="12" width="12"><circle cx="6" cy="6" r="6" fill="#56DB40" /></svg></div>' , обозвав его ключом 'my#GreenDot' , и радуюсь жизни, вызывая свой пресет на свет по данному ключу?
dimik
26 октября 2017, 19:55
Михаил С.,
да, получается удобно, макеты хранятся на клиенте, а с сервера приходят только строковые ключи.
В целом пресет, может содержать более одного макета, например макет иконки, макет балуна и какие-то еще опции.
Для примера можно смотреть, что лежит в Яндексовых пресетах
console.log(ymaps.option.presetStorage.get('islands#greenCircleDotIcon'))
Обновлено 26 октября 2017, 19:58
Михаил С.
26 октября 2017, 20:05
dimik,
огромнейшее спасибо. Действительно очень удобно, но я уже svg в отдельные файлы вытащил. Но все же вопрос еще: допустим у меня есть svg для рисунка стрелки. В базе данных точки с разным направлением ветра. Направление в градусах (0-359). Возможно ли как-то вращать изображение? Вижу есть опции size и offset, но rotate нет. Верно ли я понимаю, что для данного случая придется генерить 360 svg файлов или 360 пресетов?
Обновлено 26 октября 2017, 20:06
dimik
26 октября 2017, 20:45
Михаил С.,
Нет, не нужно, вы можете передать свою опцию поворота, для svg 
https://jsfiddle.net/2cew8wff/7/


Михаил С.
2 ноября 2017, 16:50
dimik,
странно, но почему-то hintContent и содержимое балуна не передаются. А может и передаются, но метки не кликабельны.
Это если пользоваться методом создания своего пресета с svg содержимым. 
На сервере готовится массив:
 $geoarray["features"][$i]["type"] = "Feature";
$geoarray["features"][$i]["id"] = intval($exparr[$i]["id"]);
$geoarray["features"][$i]["geometry"]["type"] = "Point";
$geoarray["features"][$i]["geometry"]["coordinates"][0] = floatval($exparr[$i]["latitude"]);
$geoarray["features"][$i]["geometry"]["coordinates"][1] = floatval($exparr[$i]["longitude"]);
$geoarray["features"][$i]["properties"]["hintContent"] = $datestring;
$geoarray["features"][$i]["properties"]["balloonContentHeader"] = $svgcircle . $datestring;
$geoarray["features"][$i]["properties"]["balloonContentBody"] = $exparr[$i]["address"] . "<br>" . $exparr[$i]["comment"];
$geoarray["features"][$i]["options"]["iconLayout"] = ($exparr[$i]["dir".$data["wstation"]]!=NULL)?'my#wind':'my#nowind';
$geoarray["features"][$i]["options"]["iconColor"] = $iconColor;
$geoarray["features"][$i]["options"]["iconAngle"] = $exparr[$i]["dir".$data["wstation"]];


Как сделать метку кликабельной?
Обновлено 2 ноября 2017, 16:50