Mehr

Stylen Sie einen Layer basierend auf einem Attribut von GeoServer in OpenLayers 3

Stylen Sie einen Layer basierend auf einem Attribut von GeoServer in OpenLayers 3


Ich möchte das Attribut von field_1 in GeoServer nehmen, um es in OpenLayers 3 anzuzeigen

Dies ist das Skript:

var style_titik =( if (feature.get('field_6') === '4') {var b2 = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: 'rgba(20,150,200,0.6)' }), Stroke: new ol.style.Stroke({ color: 'rgba(20,130,150,0.8)', width: 1 }) }) }) }); else { var b1 = new ol.style.Style({ image: new ol.style.Circle({ radius: 30, fill: new ol.style.Fill({ color: 'rgba(255,1,2,0.6) ' }), Strich: new ol.style.Stroke({ color: 'rgba(220,1,1,0.8)', width: 1}) }) })};

Was ist mit diesem Problem?


Sie können dies mit einer Stilfunktion tun (siehe auch das OL3-Beispiel zu Erdbebenhaufen für ein detaillierteres Beispiel einer Stilfunktion - oder suchen Sie auf dieser Site!). In Ihrem Fall würde ein Teilcode wie folgt aussehen:

var myStyleFunction = Funktion (Feature, Auflösung) { var field_1 = feature.get ('field_1'); if (field_1 == "PENYEDIA AKOMODASI") { return b1; } else if (field_1 == "JASA PENYEDIA AKOMODASI"){ return b2; } }; var lokasipenting = new ol.layer.Vector({ source: lokasi_penting, style: myStyleFunction });

Beachten Sie, dass Sie die Stile b1 und b2 definieren müssen und dies der beste Ort ist, um den Namen als Teil des Textattributs festzulegen. Am einfachsten erstellen Sie dazu eine Textvariable (z.var myText = new ol.style.textusw.) und fügen Sie das dann in b1 und b2 ein, um Duplikate zu vermeiden. Alternativ könnten Sie eine einzelne Rückgabe haben (was wahrscheinlich besser ist) und Variablen verwenden, um die Äquivalente von b1 und b2 gemäß den Beispielen in den Links zu erstellen.

BEARBEITEN (Update basierend auf Kommentar)
Bei jeder Kartenaktualisierung durchläuft OL die Features in den vom Geoserver empfangenen Daten und ruft die Style-Funktion auf. Es übergibt diese beiden Werte automatisch für jedes Feature und deshalb sehen Sie in der Layer-Definition keinen Verweis darauf. Das 'Feature' ist ein Punkt, eine Linienfolge oder ein Polygon (oder deren mehrfache Entsprechungen) aus den Daten des Layers und die Auflösung ist die Auflösung der Karte (damit Sie auch zoombasiertes Styling haben).


Funktion getStyle (Feature, Auflösung) { var style; if (feature.get('field_6') === '4') style = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill( { color: 'rgba(20,150,200,0.6)' }), Stroke: new ol.style.Stroke({ color: 'rgba(20,130,150,0.8)', width: 1 }) }) }) else style = new ol. style.Style({ image: new ol.style.Circle({ radius: 30, fill: new ol.style.Fill({ color: 'rgba(255,1,2,0.6)'}), Stroke: new ol .style.Stroke({ color: 'rgba(220,1,1,0.8)', width: 1}) }) }) return [style]; } myLayer = ol.layer.Vector({ store:… , style: getStyle });

Schau das Video: GeoServer. OpenLayers. Apache