使用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

樣式是不可變的，因此“更改”樣式的正確方法是替換樣式。

但是，根據您的需要，您應該考慮使用樣式功能

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