有沒有辦法在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;
    }