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