使用ol3更改图标的样式（Openlayers 3）

Question

我正在使用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); 
} 

我有没有更好的方法。请帮忙！！

Answer 1

样式是不可变的，所以“改变”它们的正确方法是替换它们。

但是，对于你的需求，你应该考虑使用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]); 
} 

这种方式，风格基于特征的“角度”属性始终计算。为了移动或旋转几何图形/图标，请使用类似于：

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); 
}