1

I am interested in openlayers 3, and I want to build a site.

Already I can load features from variable in Geojson environment and I can draw features. But I could not write a code for saving drawn features.

How can I save features - what was drawn by a user - to variable (separately coordinates from properties) in the easiest way? ( I was looking for getFeatures() function, but It did not work for me. was I right, or should I search an other option?)

If I know it I will do it with database.

5

Regarding your code sample, there is really simple bug. I believe it's so obvious there is no need for further explanation; correct code would be:

function getfeatures(){
    var writer = new ol.format.GeoJSON();
    var geojsonStr = writer.writeFeatures(vectorSource.getFeatures());

    document.getElementById("demo").innerHTML = geojsonStr;
}  
  • Yes it is. I think i do not have to mention that i am a beginner. :D :D sorry for that. – Csaba Feb 10 '16 at 19:03
1

It seems you're looking for something like:

var writer = new ol.format.GeoJSON();
var geojsonStr = writer.writeFeatures(yourVectorSource.getFeatures());

which converts your array of features to geoJson.

Take a look in documentation for ol.format subclasses: http://openlayers.org/en/v3.13.1/apidoc/ol.format, there are lot of supported formats, and also lot of options and methods (write single feature or array of features; write to string or object) to play around with.

After serializing features, you can save result to local variable or localstorage; or use AJAX call or WFS service (look at ol.format.WFS and writeTransaction in that case) to send result to server.

  • It still not works, I can get those features, what already has been stored, but I can not get the new one features(what the user draw). – Csaba Feb 10 '16 at 15:12
  • Obvious explanation would be, that those new features were not stored in same source with old ones. Could you expose that part of code, where you create drawing interactions? – user1702401 Feb 10 '16 at 15:28
  • function addInteraction(){ var value = typeSelect.value; if (value !== 'None') { draw = new ol.interaction.Draw({ source: vectorSource, type: (value) }); map.addInteraction(draw); vectorSource.addFeatures(draw); /* i tried to find a solution but it is not working too.*/ } else{ map.addInteraction(select); map.addInteraction(modify); } } the whole code is added as a second answer. – Csaba Feb 10 '16 at 17:23
1
<html>

GeoJSON #mouse_p{ position: absolute; top: 10px; left: 10px; z-index: 100; } #map{ position: relative; top: 30px; left: 30px; width: 800px; height: 300px; } #mouse_s{ position: absolute; top: 10px; right: 10px; z-index: 100; } #demo{ position: absolute; bottom: 0px; right: 0px; } #type{ position: fixed; bottom: 0px; left: 0px; }

<div id="mouse_s"></div></div>

<div id="demo"></div>
<button onclick="getfeatures()">click me</button>
<select id="type">
    <option value="None">Modify</option>
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
</select>
<script>
  var style = {
    'Polygon': new ol.style.Style({
              stroke: new ol.style.Stroke({
                      color: 'yellow', width: 1
                      }),
              fill: new ol.style.Fill({
                      color: 'rgba(255, 255, 0, 1)'
                      })
              }),

    'LineString': new ol.style.Style({
              stroke: new ol.style.Stroke({
                      color: 'red', width: 1
                      }),

              }),
        };

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

  var geojsonObject = {

    'type': 'FeatureCollection',
    'crs': {
        'type': 'name'
        },
        'features':[]
                };
    var features = (new ol.format.GeoJSON()).readFeatures(geojsonObject);
    var vectorSource = new ol.source.Vector({
        features: features,
        format: new ol.format.GeoJSON()
    });


    var vectorLayer = new ol.layer.Vector({
        title: "Vector",
        source: vectorSource,
        style: styleFunction

    });

    var osm = new ol.layer.Tile({
        source: new ol.source.OSM({layer: 'sat'})
        });

    var map = new ol.Map({
        layers: [osm, vectorLayer],
        target: 'map',
        view: new ol.View({center: [2131312,6027113],zoom: 18})
            });
    var mousePosition = new ol.control.MousePosition({
        target: 'mouse_p'
            });

    var scaleLine = new ol.control.ScaleLine({
    target: 'mouse_s'});
    map.addControl(scaleLine);
    map.addControl(mousePosition);

    var draw;
    var typeSelect = document.getElementById('type');


    var select = new ol.interaction.Select();
    var modify = new ol.interaction.Modify({
    features: select.getFeatures()
    });

    function addInteraction(){
        var value = typeSelect.value;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
            source: vectorSource,
            type: (value)       
            });
            map.addInteraction(draw);
            vectorSource.addFeatures(draw);
            }
        else{
            map.addInteraction(select);
            map.addInteraction(modify);
            }

        }



    typeSelect.onchange = function() {
        map.removeInteraction(draw);
        map.removeInteraction(select);
        map.removeInteraction(modify);
        addInteraction();
    };


    addInteraction();


    var writer = new ol.format.GeoJSON();
    var geojsonStr = writer.writeFeatures(vectorSource.getFeatures());

    function getfeatures(){
    document.getElementById("demo").innerHTML = geojsonStr;
    }   
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.