Страница 1 из 1

Можно ли поместить картинки на карте OpenLayers

Добавлено: 02 авг 2012, 10:02
StaishiKa
Добрый день. Подскажите пожалуйста, есть ли возможность поместить на openlayers карту картинки(соответственно, у каждой должны быть координаты) и как это сделать? Ещё желательно бы сделать, чтобы они были кликабельны...

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 02 авг 2012, 11:36
Denis Rykov
Точечный слой, настройте стиль и всё.

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 03 авг 2012, 04:07
StaishiKa
Правильно ли я поняла, что каждая картинка - это отдельный векторный слой со стилями?
Пример:

Код: Выделить всё

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		externalGraphic: "./img/picture.png",
		graphicHeight: 20,
		graphicYOffset: -19
	})
});
Но как каждую из них сделать кликабельной? Картинки беруться из БД, у каждой есть id, вот его то к ссылке и нужно прикрутить.

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 03 авг 2012, 06:42
Denis Rykov
Нет, слой один, а свойство externalGraphic стиля строится на основании значения атрибутивного поля объекта, например:

Код: Выделить всё

externalGraphic : "${url}"
С кликабельностью тоже ничего сложного, можно использовать контрол SelectFeature.

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 03 авг 2012, 07:55
StaishiKa
Denis, если у вас есть желание и возможность, не могли бы вы прописать одну картинку в моём примере? https://github.com/StaishiKa/openlayers

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 03 авг 2012, 08:52
Denis Rykov

Код: Выделить всё

OpenLayers.Util.extend(
OpenLayers.Feature.Vector.style.default,
{
label: "${title}",
externalGraphic: "${img}",
graphicHeight: 22,
graphicWidth: 22,
graphicOpacity: 1,
fontSize: '11',
fontFamily: 'arial',
pointRadius: 10,
labelYOffset: -15
}
);

А объект в свою очередь должен содержать свойства img, ну или если хотите вычислять ссылку на клиенте через id, то внутри объекта context прописываете нужную функцию, а в externalGraphic ссылаетесь на неё. Здесь пример.

Код: Выделить всё


{
"type": "Feature",
"id": -4,
"properties": {
"id": 1,
"title": "laptops",
"url": "someurl",
"img": "./images/laptop.png"
},
"geometry": {
"type": "Point",
"coordinates": [ 487.09189163455665, -808.12972952532346 ]
}
}

Re: Можно ли поместить картинки на карте OpenLayers

Добавлено: 03 авг 2012, 10:14
StaishiKa
Буду пробовать, спасибо, Denis