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

[StaishiKa]

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

[Denis Rykov]

Точечный слой, настройте стиль и всё.

[StaishiKa]

Правильно ли я поняла, что каждая картинка - это отдельный векторный слой со стилями?
Пример:

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

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		externalGraphic: "./img/picture.png",
		graphicHeight: 20,
		graphicYOffset: -19
	})
});

Но как каждую из них сделать кликабельной? Картинки беруться из БД, у каждой есть id, вот его то к ссылке и нужно прикрутить.

[Denis Rykov]

Нет, слой один, а свойство externalGraphic стиля строится на основании значения атрибутивного поля объекта, например:

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

externalGraphic : "${url}"

С кликабельностью тоже ничего сложного, можно использовать контрол SelectFeature.

[StaishiKa]

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

[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 ]

     }

}

[StaishiKa]

Буду пробовать, спасибо, Denis