How is it possible to change the rotation icon (picture), points (Feature) after creating and adding to the map?
Set the rotation icons on create a point I know, but how to change the rotation later? For uses such as icons, which follows the direction of rotation?
How to do this correctly with respect to performance? (set point again all parameters???)
thanks... very much
Live demonstration: http://jsfiddle.net/91mLh1j7/
JS Code:
var map = new ol.Map({
target: 'mapID',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({
layer: 'osm'
})
})],
view: new ol.View({
center: ol.proj.transform([14, 50], 'EPSG:4326', 'EPSG:3857'),
zoom: 11
})
});
var Features = [];
// define style for features
var iconStyle = {
src: "http://google-maps-icons.googlecode.com/files/library-publ.png",
anchorOrigin: "bottom-left", // v KML je počítáno od levého spodního rohu
anchor: [0.5, 0],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
scale: 0.9,
opacity: 0.75,
rotation: 45 * 0.01745329251, // in rad / 360° = 6.28318531 rad = 2PI rad
rotateWithView: "true"
};
var point1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([14.01, 50.01], 'EPSG:4326',
'EPSG:3857')),
name: 'Point One'
});
point1.setStyle(new ol.style.Style({
image: new ol.style.Icon(iconStyle)
}));
var point2 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([13.99, 49.99], 'EPSG:4326',
'EPSG:3857')),
name: 'Point Two'
});
point2.setStyle(new ol.style.Style({
image: new ol.style.Icon(iconStyle)
}));
// add point1, point2 to Features
Features.push(point1);
Features.push(point2);
var vectorSource = new ol.source.Vector({
features: Features // add an array of features
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource // add source for vectorLayer
});
map.addLayer(vectorLayer) // add vectorLayer to map
////////////////////
// how to change the rotation of one point (feature) ? after cration point and add it on map
////////////////////
The ol.style.Image
class, which the ol.style.Icon
extends, has a setRotation
method you can use to set the rotation of the icon. You can try this in your example by adding:
Feature1.getStyle().getImage().setRotation(135 * 0.01745329251);
See live on the updated fiddle: http://jsfiddle.net/91mLh1j7/1/