Question

我正在使用ol3通过调用以下函数在地图上添加标记

function addmarker(lat, long, flag) {

            iconFeature = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857')),
                name: 'NULL'
            });

            iconStyle = new ol.style.Style({

                fill: new ol.style.Fill({
                    color: '#008000'
                }),
                stroke: new ol.style.Stroke({
                    color: '#008000',
                    width: 3
                }),
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({
                        color: '#008000'
                    })
                })

            });

            iconFeature.setStyle(iconStyle);

            vectorSource[flag] = new ol.source.Vector({
                features: [iconFeature]
            });

            vectorLayer[flag] = new ol.layer.Vector({
                source: vectorSource[flag]
            });

            map.addLayer(vectorLayer[flag]);

        }

要更改标记位置，我将删除图层并再次添加新图层

 function changemarker(lat, long, flag) {

             vectorSource[flag].clear();

            map.removeLayer(vectorLayer[flag]);

            addmarker(lat, long, flag);

        }

我正面临性能问题，因为我每500毫秒更改一次调用changemarker方法的标记。可以在不删除图层的情况下修改图层，还是可以采用更好的方法。

请帮忙。

Answer 1

如果您在功能ol.Feature.setId(<your id>)上设置ID，则可以直接更改，如下所示： -

//Setting up your feature 
iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857')),
    name: 'NULL'
});

iconFeature.setId('feature1');

然后

var myFeature = vectorSource.getFeatureById('feature1');

myFeature.getGeometry().setCoordinates(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'));

这应该立即更新该功能而不进行任何重绘调用 - OL在更新功能时重新绘制图层。使用这种方法，我在屏幕上显示数百个具有复杂几何形状的特征，没有明显的速度损失。

Answer 2

如果图层中只有一个要素，则可以直接修改要素的几何图形：

function changemarker(lat, long, flag) {

  vectorSource[flag].getFeatures()[0].getGeometry().setCoordinates(ol.proj.transform([+long, +lat], 'EPSG:4326', 'EPSG:3857'));
}

修改OpenLayers 3中现有图层的值

2 个答案: