有没有办法在openlayers中更新功能样式？

Question

我有一些标记根据数据库中的一些数字着色。 我的脚本会定期执行查询以询问我的电话号码。 如果满足某些条件，我希望我的标记器将颜色更改，例如从绿色更改为黄色。

类似的问题是这些标记的半径在缩放地图时应增加。 我通过更新在更改缩放时唤醒的侦听器的半径来解决此问题。

var currZoom = map.getView().getZoom();
map.on('moveend', function(e) {
    var newZoom = map.getView().getZoom();
    if (currZoom != newZoom) {
        console.log('zoom end, new zoom: ' + newZoom);
        currZoom = newZoom;
        vectorSource.clear();
        var greenStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: Math.pow(33,newZoom/5)/15000,
                fill: new ol.style.Fill({color: 'rgba(0,255,0,0.5)'}),
                stroke: new ol.style.Stroke({
                    color: 'green', width: 1})
            })
         });
         var yellowStyle = new ol.style.Style({
             image: new ol.style.Circle({
                 radius: Math.pow(33,newZoom/5)/15000,
                 fill: new ol.style.Fill({color: 'rgba(255,255,0,0.5)'}),
                 stroke: new ol.style.Stroke({
                     color: 'yellow', width: 1})
              })
          });
         var redStyle = new ol.style.Style({
             image: new ol.style.Circle({
                 radius: Math.pow(33,newZoom/5)/15000,
                 fill: new ol.style.Fill({color: 'rgba(255,0,0,0.5)'}),
                 stroke: new ol.style.Stroke({
                     color: 'red', width: 1})
              })
          });

         for(var i=0;i<Features.length;i++){
             var oldcolor = Features[i]["g"]["e"]["a"]["a"];
             if(oldcolor=="green" || oldcolor=="yellow" || oldcolor=="red"){
                 if(oldcolor=="green"){
                     Features[i].setStyle(greenStyle);
                 }
                 else if(oldcolor=="yellow"){
                     Features[i].setStyle(yellowStyle);
                 }
                 else{
                     Features[i].setStyle(redStyle);
                  }
              }
          }
          vectorSource.addFeatures(Features);
     }
}); 

这可行。 当我缩放半径时，更改其值，圆形更改尺寸。

问题是在我提到的那些条件发生时调用此函数。

                    function stampaMappa(r){
                        vectorSource.clear();
                        /*for(var j=0;j<Features.length;j++){
                            Features.pop();
                        }*/
                        Features = [];

                        for(var i=0;i<r.length;i++){

                            var id = r[i]["Sensor_id"];
                            var people = r[i]["tot"];
                            var index_color = r[i]["color"];
                            var sniffer_name = r[i]["Sniffer_name"];
                            var lon = parseFloat(r[i]["Sensor_longitude"]);
                            var lat = parseFloat(r[i]["Sensor_latitude"]);

                            var d = new Date();
                            var h = d.getHours();
                            var m = d.getMinutes();
                            var hrs = h+":"+m;

                            var areaFeature = new ol.Feature({
                                geometry: new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326', 'EPSG:3857')),
                                  name: sniffer_name,
                                    tourists: people,
                                    hour: hrs
                            });
                            var iconFeature = new ol.Feature({
                                 geometry: new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326', 'EPSG:3857')),
                                  name: sniffer_name,
                                    tourists: people,
                                    hour: hrs
                            });

                            iconFeature.setStyle(iconStyle);
                            areaFeature.setStyle(colors[index_color])

                            Features.push(areaFeature);
                            Features.push(iconFeature);


                        }
                        if(first_time){
                            vectorSource = new ol.source.Vector({
                                features: Features //add an array of features
                            });

                            vectorLayer = new ol.layer.Vector({
                                name:"test",
                                source: vectorSource
                            });

                            map.addLayer(vectorLayer);
                            // Set the view for the map
                            map.setView(view);

                        }
                        else{
                            vectorSource.addFeatures(Features);
                        }
                    }

我希望这能奏效，但只会删除我的标记。 如果我放大或缩小，它们会再次出现（因为变焦侦听器起作用）。

Answer 1

您可以使用样式功能代替样式。 每当地图渲染时都会调用该函数（每次更改分辨率时都会发生）

    var greenStyle = function(feature, resolution) {
      return new ol.style.Style({
        image: new ol.style.Circle({
            radius: Math.pow(33,map.getView().getZoom()/5)/15000,
            fill: new ol.style.Fill({color: 'rgba(0,255,0,0.5)'}),
            stroke: new ol.style.Stroke({
                color: 'green', width: 1})
        })
      });
    }

一旦在函数外部定义基本样式并为每次调用设置半径，则内存使用效率更高

    var greenBase = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 1,
            fill: new ol.style.Fill({color: 'rgba(0,255,0,0.5)'}),
            stroke: new ol.style.Stroke({
                color: 'green', width: 1})
        })
      });

    var greenStyle = function(feature, resolution) {
      greenBase.getImage().setRadius(Math.pow(33,map.getView().getZoom()/5)/15000);
      return greenBase;
    }