使用ol3 (Openlayers 3)改变图标的样式

Changing Style of the icon using ol3 (Openlayers 3)

本文关键字：改变 图标 样式 ol3 Openlayers 使用      更新时间：2023-09-26

我正在添加标记并使用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]);
}

这样，样式总是基于特征的"angle"属性计算。为了移动或旋转几何图形/图标，使用如下命令:

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);
}
相关文章：