OL3: So erhalten Sie vorhandene Stileigenschaften (z. B. Füllfarbe, Strichfarbe usw.) von Vektorlayer

Question

Ich habe eine Anwendung, basierend auf Openlayers 3, die eine GUI bietet, mit der Benutzer Vektorebenen zu einer Karte hinzufügen können. Wenn eine neue Ebene hinzugefügt wird, wird eine Stilfunktion aufgerufen, um einen Stil basierend auf dem Geometrietyp der in der Ebene gefundenen Features bereitzustellen. Für Stileigenschaften wie Füllfarbe und Strichfarbe verwende ich eine Funktion, die einen zufälligen Hexadezimalwert zurückgibt.

Sobald die Ebene der Map hinzugefügt und gerendert wurde, wie kann ich diese Hexadezimalwerte erhalten? Im Ebenenlistenfenster meiner Map möchte ich ein kleines Grafikfeld bereitstellen, das die Füllfarbe/Strichfarbe der Ebene widerspiegelt.

Hier sind einige Code-Ausschnitte zur Klärung:

den intial Stil für eine neue Ebene einstellen:

URL = window.URL || window.webkitURL; 
    var inputFile = $("#InputFile")[0].files[0]; 
    var path = window.URL.createObjectURL(inputFile); 



    var image = new ol.style.Circle({ 
     radius: 3, 
     fill: new ol.style.Fill({ 
      color: randomColor()/*'rgba(255, 0, 0, 0.8)'*/ 
     }), 
     stroke: new ol.style.Stroke({color: randomColor(), width: 1}) 
    }); 

    var styles = { 
     'Point': [new ol.style.Style({ 
     image: image 
     })], 
     'LineString': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'green',*/ 
      width: 1 
     }) 
     })], 
     'MultiLineString': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'green',*/ 
      width: 1 
     }) 
     })], 
     'MultiPoint': [new ol.style.Style({ 
     image: image 
     })], 
     'MultiPolygon': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'blue',*/ 
      lineDash: [4], 
      width: 3 
     }), 
     fill: new ol.style.Fill({ 
      color: randomColor() 
     }) 
     })], 
     'Polygon': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'blue',*/ 
      lineDash: [4], 
      width: 3 
     }), 
     fill: new ol.style.Fill({ 
      color: randomColor(),/*'rgba(0, 0, 255, 0.1)'*/ 
     }) 
     })], 
     'GeometryCollection': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'magenta',*/ 
      width: 2 
     }), 
     fill: new ol.style.Fill({ 
      color: randomColor()/*'magenta'*/ 
     }), 
     image: new ol.style.Circle({ 
      radius: 10, 
      fill: null, 
      stroke: new ol.style.Stroke({ 
      color: randomColor()/*'magenta'*/ 
      }) 
     }) 
     })], 
     'Circle': [new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: randomColor(),/*'red',*/ 
      width: 2 
     }), 
     fill: new ol.style.Fill({ 
      color: randomColor()/*'rgba(255,0,0,0.2)'*/ 
     }) 
     })] 
    }; 

    var styleFunction = function(feature, resolution) { 
     return styles[feature.getGeometry().getType()]; 
    }; 



    newLayer = new ol.layer.Vector({ 
     //create a layer 'name' property with the user input 
     name: this.refs.layerName.getValue(),/*$('#layerName').val(),*/ 
     basemap: false, 
     source: new ol.source.Vector({ 
      url: path, 
      format: new ol.format.GeoJSON() 
     }), 
     style: styleFunction 
    }); 

Jetzt, nachdem die Schicht auf die Karte hinzugefügt wird, wie kann ich vorhandenen Stil Eigenschaften zugreifen ?

map.getLayers().forEach(function(lyr){ 
     if (lyr.get('name') == layerName) { 
      var style = lyr.getStyle();   
          console.log(style); 
     } 
    }) 

lyr.getStyle() gibt die Style-Funktion, die ursprünglich verwendet wurde, um die Schicht zu stylen, aber ich bin nicht sicher, wie die tatsächlichen Eigenschaften in der Style-Funktion zugreifen.

Answer 1

Es sieht aus wie Sie nicht viel auf diese Weise erhalten werden, aber ...

Sie sind am Ende, Styling bietet so vielleicht das Sie mit einem anderen Ansatz überprüfen:

newLayer.getSource().once('addfeature', function(evt){ 
    var style = styles[evt.feature.getGeometry().getType()]; 
});