Wie fügt man mit OpenLayers Attribute in ein WFS ein?

Question

So habe ich eine Web-App, die läuft und ist in der Lage, Punkte und Zeilen zu bestehenden Postgis-Tabellen hinzufügen, indem Sie Daten von Geoserver. Ich brauche das folgende eine bestimmte Bit der Funktionalität hinzugefügt:

Ich möchte Benutzern erlauben, auch Attributinformationen zu jedem Punkt auf der Kartenschnittstelle hinzufügen können. Wie bei jedem Punkt, den sie auf der Karte zeichnen, muss etwas vorhanden sein, das es dem Benutzer ermöglicht, auch einige Textdaten in die Spalte einzugeben.

Ich habe versucht, ein paar Fragen hier zu lesen, aber keine von ihnen bieten eine Lösung für eine Punktvektorschicht.

Wie geht das?

Das Bit ich zum Laden haben und die WFS-Punkt-Features zu veröffentlichen ist:

var vectorSource2 = new ol.source.Vector({ 
loader: function(extent, resolution, projection) { 
var url2 = 'http://localhost:8080/geoserver/wfs?service=WFS&' + 
'version=1.1.0&request=GetFeature&typename=BFTchambers:chamber2&' + 
'outputFormat=text/javascript&format_options=callback:loadFeatures2' + 
'&bbox=' + extent.join(','); 
$.ajax({url: url2, dataType: 'jsonp', jsonp: false}) 
.done(function(response) { 
    pointWFS = new ol.format.WFS(), 
    sourceVector2.addFeatures(pointWFS.readFeatures(response)) 
    }); 
}, 
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({ 
maxZoom: 20 
})), 
}); 

window.loadFeatures2 = function(response) { 
console.log("Point features were drawn"); 
vectorSource2.addFeatures(geojsonFormat.readFeatures(response)); 
}; 
var formatWFS2 = new ol.format.WFS(); 
var pointGML = new ol.format.GML({ 
featureNS: 'http://geoserver.org/bftchamber', 
featureType: 'chamber2', 
}); 

var pointWFS = function(p,f) { 
switch(p) { 
case 'insert': 
    node = formatWFS2.writeTransaction([f],null,null,pointGML); 
    break; 
case 'update': 
    node = formatWFS2.writeTransaction(null,[f],null,pointGML); 
    break; 
case 'delete': 
    node = formatWFS2.writeTransaction(null,null,[f],pointGML); 
    break; 
} 
s = new XMLSerializer(); 
str = s.serializeToString(node); 
$.ajax('http://localhost:8080/geoserver/wfs',{ 
    type: 'POST', 
    dataType: 'xml', 
    processData: false, 
    contentType: 'text/xml', 
    data: str 
    }).done(); 
    console.log(" point features were posted to server"); 
} 
case 'btnDrawPoint': 
    interaction = new ol.interaction.Draw({ 
     type: 'Point', 
     source: layerVector.getSource() 
    }); 
    map.addInteraction(interaction); 
    interaction.on('drawend', function(e) { 
     pointWFS('insert',e.feature); 
    }); 
    break; 

Answer 1

fügen Sie einfach das Attribut der Art und Weise @bartvde vermuten lässt.

Zum Beispiel mit dem eigenen Beispiel

interaction.on('drawend', function(e) { //pass an attribute to the feature var featureWithAttribute = e.feature.set('foo', 'bar'); pointWFS('insert',featureWithAttribute); });

So wird diese Änderung eine Funktion senden, um die Geometrie zu halten, sowie ein Attribut für Spaltennamen foo den Wert von bar halten.

Nun, wenn Sie möchten, dass Ihre Benutzer Text eingeben:

interaction.on('drawend', function(e) { 
    //pass an attribute to the feature 
    var myAttrValue = prompt("Enter Attribute", ""); 
    var myFeature= e.feature; 
    if (myAttrValue != null) { 
    myFeature.set('foo', myAttrValue); 
    } 

    pointWFS('insert',myFeature); 
}); 

Natürlich ist dies nur ein Beispiel ist der promt Standard js Funktion. Aber Sie können Ihre UI API verwenden, um ein ähnliches Verhalten zu erhalten