javascript - 有没有办法更新 openlayers 中的功能样式？

Question

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

类似的问题是这些标记的半径，在缩放 map 时应该会增加。我通过更新监听器中的半径解决了这个问题，当我更改缩放时该监听器会被唤醒。

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