OpenLayers 3 применения динамического стиля с функцией разрешения

Question

Я добавляю динамический стиль для векторных функций на моей карте, как это ...

var source = webLayer.getSource(); 
               var features = source.getFeatures(); 


               var templateStyle = new ol.style.Style({ 
                fill: new ol.style.Fill({ color: convertHex(Layer.LayerStyle.FillColor, '0.5') }), 
                stroke: new ol.style.Stroke({ color: convertHex(Layer.LayerStyle.LineColor, '0.5') }), 
                text: new ol.style.Text({ 
                 font: '24px Verdana', 
                 text: webLayer.U.label, 
                 offsetY: 20, 
                 fill: new ol.style.Fill({ 
                  color: [255, 255, 255, 0.8] 
                 }) 
                }) 
               }); 


               var select = new ol.interaction.Select({ 
                style: templateStyle 
               }); 

               map.addInteraction(select);             webLayer.setVisible(Visibility); 
               features[0].setStyle(templateStyle); 

Я хотел бы также включить функцию разрешения для текста, так это только показывает на определенном разрешении, таких как ...

style: function (feature, resolution) { 
          var text = resolution * 100000 < 10 ? response.FieldList[key].SomeText: ''; 

          if (text != "") { 
           styleCache[text] = [new ol.style.Style({ 
            stroke: new ol.style.Stroke({ 
             color: '#319FD3', 
             width: 1 
            }), 
            text: new ol.style.Text({ 
             font: '12px Calibri,sans-serif', 
             text: text, 
             fill: new ol.style.Fill({ 
              color: '#000' 
             }), 
             stroke: new ol.style.Stroke({ 
              color: '#fff', 
              width: 3 
             }) 
            }), 
            fill: new ol.style.Fill({ 
             color: convertHex(response.FieldList[key].Shade, '0.5') 
            }) 
           })]; 
          } 

, но не смогли выяснить, как осуществить это с созданием стиля, как это ...

var templateStyle = new ol.style.Style({ 
                fill: new ol.style.Fill({ color: convertHex(Layer.LayerStyle.FillColor, '0.5') }), 
                stroke: new ol.style.Stroke({ color: convertHex(Layer.LayerStyle.LineColor, '0.5') }), 
                text: new ol.style.Text({ 
                 font: '24px Verdana', 
                 text: webLayer.U.label, 
                 offsetY: 20, 
                 fill: new ol.style.Fill({ 
                  color: [255, 255, 255, 0.8] 
                 }) 
                }) 
               }); 

Answer 1

В конце концов я понял, что могу выполнять ту же функцию стилизации, которую я использовал для создания векторных функций, изначально ... Мне приходилось вводить контроллер, используемый для создания карты, и идти за атрибутами таким образом.

var source = webLayer.getSource(); 
               var features = source.getFeatures(); 

               var styleCache = {}; 
               var feature = features[0]; 
               var view = map.getView(); 
               var shade = webLayer.U.shade; 
               if (shade == "") 
               { 
                shade = Layer.LayerStyle.FillColor; 
               } 
               var templateStyle = function (feature, resolution) { 
                var text = view.getResolution() * 100000 < 10 ? webLayer.U.label : ''; 

                if (text != "") { 
                 styleCache[text] = [new ol.style.Style({ 
                  stroke: new ol.style.Stroke({ 
                   color: '#319FD3', 
                   width: 1 
                  }), 
                  text: new ol.style.Text({ 
                   font: '12px Calibri,sans-serif', 
                   text: text, 
                   fill: new ol.style.Fill({ 
                    color: '#000' 
                   }), 
                   stroke: new ol.style.Stroke({ 
                    color: '#fff', 
                    width: 3 
                   }) 
                  }), 
                  fill: new ol.style.Fill({ 
                   color: rcisWebMapUtilities.convertHex(shade, '0.5') 
                  }) 
                 })]; 
                } 
                else if (text == "") { 
                 styleCache[text] = [new ol.style.Style({ 
                  fill: new ol.style.Fill({ 
                   color: convertHex(shade, '0.5') 
                  }) 
                 }) 
                 ] 
                } return styleCache[text]; 
               } 


               var select = new ol.interaction.Select({ 
                style: templateStyle 
               }); 

               features[0].setStyle(templateStyle); 
               webLayer.setVisible(Visibility);