Il passaggio successivo alla creazione o alla modifica di elementi vettoriali è il salvataggio dei dati. Normalmente questo avviene inviando i dati ad un servizio esposto da un’applicazione lato server, che provvederà a salvarli in qualche forma. Il metodo più comunemente utilizzato per l’invio dei dati consiste nella loro serializzazione, lato client, in un formato standard come il GeoJSON o il GML e l’invio come payload di una chiamata HTTP POST.

Serializzazione e salvataggio

OpenLayers, tramite i suoi formati ol.format.GeoJSON e ol.format.GML2 e ol.format.GML3 ci fornisce tutto il necessario per trasformare un array di ol.Features nella loro relativa rappresentazione testuale, pronta per essere inviata al server.

var formato = new ol.format.GeoJSON();
var features = poligoni.getSource().getFeatures());
var poligoniGeoJSON = formato.writeFeatures(features);

Uno volta ottenuto il dato serializzato starà a noi gestirne l’invio, ad esempio tramite XMLHTTPRequest con l’ausilio di jQuery:

$.post({
    url: https://myserver.it,
    data: poligoniGeoJSON
});

Niente vieta tuttavia di salvare i dati anche sul proprio computer. Nel seguente esempio è possibile disegnare una serie di elementi lineari e di salvarli localmente in formato GeoJSON. Potete verificarne il risultato con un qualsiasi software GIS (ad esempio QGIS).

1
2
3
4
5
var data = "data:text/json;charset=utf-8," + poligoniGeoJSON;
var downloadLink = $("#link");
downloadLink.prop("href",data);
downloadLink.prop("download","poligoni.geojson");
downloadLink[0].click();
  • Costruisco una stringa di rappresentazione di un Content-Type testuale (il nostro GeoJSON).
  • Assegno la stringa ad un elemento anchor (<a>) nascosto ma presente nel DOM della pagina.
  • Assegno anche la proprietà download per definire il nome con cui salvare i dati.
  • Simulo un click sul link nascosto.

A questo punto si aprirà la classica finestra di salvataggio che ci chiederà di salvare il file “poligoni.geojson”.

WFS-T

Solo un rapido accenno al protocollo standard WFS-T. Questo tipo di servizio, offerto da diversi server cartografici (ad esempio Geoserver e QGIS Server), permette di eseguire operazioni di aggiunta, modifica e rimozione degli elementi vettoriali di uno strato esposto come layer WFS. OpenLayers, tramite ol.format.WFS, fornisce due metodi dedicati alle transazioni WFS-T:

  • ol.format.WFS.writeTransaction(inserts, updates, deletes, options): viene avviata una transazione con il server, nella quale possono essere trasmesse le features inserite, modificate e/o rimosse. Tra le opzioni di base richieste ci sono il CRS e il nome del layer (sul server):
    • srsName: codice ESPG
    • featureType: id del layer wfs
  • ol.format.WFS.readTransactionResponse: normalizza la gestione della risposta XML ottenuta dal server al termine della transazione

Immaginando di avere un WFS esposto da QGIS Server, e un layer “aree_amministrative” (EPSG:3857) su cui sono abilitate le modifiche tramite WFS-T, potremmo usare il seguente codice per eseguire la transazione:

var options = {
    srsName: "EPSG:3857", 
    featureType: "aree_amministrative"
};

var xs = new XMLSerializer();
var formatWFS = new ol.format.WFS();

var save = function (action, features) {
    var message;
    switch (action) {
        case 'insert':
            message = formatWFS.writeTransaction(features, null, null, options);
            break;
        case 'update':
            message = formatWFS.writeTransaction(null, features, null, options);
            break;
        case 'delete':
            message = formatWFS.writeTransaction(null, null, features, options);
            break;
    }
    
    var payload = xs.serializeToString(message);
    $.ajax('http://localhost/cgi-bin/qgis_mapserv.fcgi?map=/home/utente/progetti/wfst.qgs', {
        service: 'WFS',
        type: 'POST',
        dataType: 'xml',
        processData: false,
        contentType: 'text/xml',
        data: payload
    }).done(function(response) {
        console.log(formatWFS.readTransactionResponse(response));
    });
};

Nella funzione di esempio save vengono distinte le azioni, e per ognuna di esse viene generato il messaggio XML necessario ad eseguire la transazione sul server.