[英]Changing Style of the icon using ol3 (Openlayers 3)
I am adding markers and changing its position using the getFeatureById()
. 我正在使用
getFeatureById()
添加标记并更改其位置。 Is there a similar way to update the Style and icon to set the feature without creating it again using openlayers-3 ? 有没有类似的方法来更新样式和图标以设置功能,而无需使用openlayers-3再次创建它?
Currently I am doing it this way: 目前,我正在以这种方式进行操作:
function addArrowMarker(lat, long, angle, pointerimgsrc, arrowFlag) {
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857')),
name: 'NULL'
});
iconFeature.setId('arrowMarkerFeature');
iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: pointerimgsrc,
rotateWithView: true,
rotation: angle * Math.PI / 180,
anchor: [.5, .5],
anchorXUnits: 'fraction', anchorYUnits: 'fraction',
opacity: 1
})
});
iconFeature.setStyle(iconStyle);
vectorArrowSource[arrowFlag] = new ol.source.Vector({
features: [iconFeature]
});
vectorArrowLayer[arrowFlag] = new ol.layer.Vector({
source: vectorArrowSource[arrowFlag]
});
map.addLayer(vectorArrowLayer[arrowFlag]);
}
Now if there is any change in the angle, then I call the function and set a new style again as shown below. 现在,如果角度发生任何变化,则调用函数并再次设置新样式,如下所示。
function changeArrowMarker(lat, long, angle, pointerimgsrc,arrowFlag) {
var myFeature = vectorArrowSource[arrowFlag].getFeatureById('arrowMarkerFeature');
myFeature.getGeometry().setCoordinates(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857'));
iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: pointerimgsrc,
rotateWithView: true,
rotation: angle * Math.PI / 180,
anchor: [.5, .5],
anchorXUnits: 'fraction', anchorYUnits: 'fraction',
opacity: 1
})
});
myFeature.setStyle(iconStyle);
}
I there any better approach that . 我有更好的方法。 Please help!!
请帮忙!!
Styles are immutable, so the proper way to "change" them, is to replace them. 样式是不可变的,因此“更改”样式的正确方法是替换样式。
However, for your needs, you should consider using a Style Function 但是,根据您的需要,您应该考虑使用样式功能
function addArrowMarker(lat, long, angle, pointerimgsrc, arrowFlag) {
iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857')),
name: 'NULL',
angle: angle
});
iconFeature.setId('arrowMarkerFeature');
iconStyleFunction = function(resolution){
return [new ol.style.Style({
image: new ol.style.Icon({
src: pointerimgsrc,
rotateWithView: true,
rotation: this.get('angle') * Math.PI / 180,
anchor: [.5, .5],
anchorXUnits: 'fraction', anchorYUnits: 'fraction',
opacity: 1
})
})];
};
iconFeature.setStyle(iconStyleFunction);
vectorArrowSource[arrowFlag] = new ol.source.Vector({
features: [iconFeature]
});
vectorArrowLayer[arrowFlag] = new ol.layer.Vector({
source: vectorArrowSource[arrowFlag]
});
map.addLayer(vectorArrowLayer[arrowFlag]);
}
This way, the style is always calculated based on the "angle" attribute of the feature. 这样,始终根据特征的“角度”属性来计算样式。 In order to move or rotate the geometry/icon, use something like:
为了移动或旋转几何图形/图标,请使用类似以下内容的东西:
function changeArrowMarker(lat, long, angle, arrowFlag) {
var myFeature = vectorArrowSource[arrowFlag].getFeatureById('arrowMarkerFeature');
myFeature.getGeometry().setCoordinates(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857'));
myFeature.set('angle', angle);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.