[英]Changing Style of the icon using ol3 (Openlayers 3)
我正在使用getFeatureById()
添加标记并更改其位置。 有没有类似的方法来更新样式和图标以设置功能,而无需使用openlayers-3再次创建它?
目前,我正在以这种方式进行操作:
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]);
}
现在,如果角度发生任何变化,则调用函数并再次设置新样式,如下所示。
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);
}
我有更好的方法。 请帮忙!!
样式是不可变的,因此“更改”样式的正确方法是替换样式。
但是,根据您的需要,您应该考虑使用样式功能
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]);
}
这样,始终根据特征的“角度”属性来计算样式。 为了移动或旋转几何图形/图标,请使用类似以下内容的东西:
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.