创建并添加到地图后如何更改地图上的旋转点(Feature)
How to change the rotation point (Feature) on the map after it is created and added to map
如何在创建并添加到地图后更改旋转图标(图片)、点(Feature)?
在创建点时设置旋转图标我知道,但是以后如何更改旋转?
对于像图标这样的用途,哪个遵循旋转的方向?
如何在性能方面正确地做到这一点? (重新设置点所有参数???)
非常感谢...非常感谢
现场演示:
http://jsfiddle.net/91mLh1j7/
JS代码:
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
////////////////////
ol.style.Icon
扩展的 ol.style.Image
class 有一个 setRotation
方法可以用来设置图标的旋转。您可以通过添加以下内容在您的示例中尝试此操作:
Feature1.getStyle().getImage().setRotation(135 * 0.01745329251);
查看更新后的直播 fiddle:http://jsfiddle.net/91mLh1j7/1/
如何在创建并添加到地图后更改旋转图标(图片)、点(Feature)?
在创建点时设置旋转图标我知道,但是以后如何更改旋转? 对于像图标这样的用途,哪个遵循旋转的方向?
如何在性能方面正确地做到这一点? (重新设置点所有参数???)
非常感谢...非常感谢
现场演示: http://jsfiddle.net/91mLh1j7/
JS代码:
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
////////////////////
ol.style.Icon
扩展的 ol.style.Image
class 有一个 setRotation
方法可以用来设置图标的旋转。您可以通过添加以下内容在您的示例中尝试此操作:
Feature1.getStyle().getImage().setRotation(135 * 0.01745329251);
查看更新后的直播 fiddle:http://jsfiddle.net/91mLh1j7/1/