CODEWITHSUNDEEP
javascriptserializationopenlayers-3
Tim T
Tim T

Reputation: 361

How can I serialize all features on a layer to json using openlayers 3

I want to allow a user to draw a polygon on a map using openlayers 3 and then when the user presses "save" I want to put the json for the polygon into a hidden field so that it can be sent back to the server and saved in a database.

I have the code to draw the polygon working (below), and then I have written a simple test function that fires when a button is pressed. The getFeatures() call fails. In firebug the message shown in the console is "TypeError: vectorsource.getFeatures is not a function". This is the click function:

function map1_generateJSON()
{
    var geojson  = new ol.parser.GeoJSON;
    var features = vectorsource.getFeatures();
    var json     = geojson.write(features);
    alert(json);
}

The openlayers base I am using is

<script type="text/javascript" src="http://ol3js.org/en/master/build/ol.js"></script>

This is the code that displays the map and allows the user to draw a polygon (it's mostly copied from one of the standard openlayers examples at Open Layers 3 draw features example). 

var vectorsource    = new ol.source.Vector();
var vector = new ol.layer.Vector({
  source: vectorsource,
  style: new ol.style.Style({
    rules: [
      new ol.style.Rule({
        filter: 'renderIntent(\"selected\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14
          }),
          new ol.style.Fill({
            color: '#ffffff',
            opacity: 0.5
          }),
          new ol.style.Stroke({
            color: 'white',
            width: 5
          }),
          new ol.style.Stroke({
            color: '#0099ff',
            width: 3
          })
        ]
      }),
      new ol.style.Rule({
        filter: 'renderIntent(\"temporary\")',
        symbolizers: [
          new ol.style.Shape({
            fill: new ol.style.Fill({
              color: '#0099ff',
              opacity: 1
            }),
            stroke: new ol.style.Stroke({
              color: 'white',
              opacity: 0.75
            }),
            size: 14,
            zIndex: 1
          })
        ]
      })
    ],
    symbolizers: [
      new ol.style.Shape({
        fill: new ol.style.Fill({
        color: 'black',
        opacity: 1
        }),
        size: 14
      }),
      new ol.style.Fill({
        color: 'white',
        opacity: 0.2
      }),
      new ol.style.Stroke({
    color: 'black',
            width: 2
      })
    ]
  })
});

var map1_olmap = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.MapQuest({layer: 'osm'})}), vector],
    renderer: ol.RendererHint.CANVAS,
    target: map1,
    view: new ol.View2D({
        center: ol.proj.transform([-113.5, 53.533333], 'EPSG:4326', 'EPSG:3857'),
        zoom: 13
     })
});

var map1_draw;
function map1_addMapInteraction()
{
    map1_draw = new ol.interaction.Draw({
        layer: vector,
        type: 'Polygon'
    });
    map1_olmap.addInteraction(map1_draw);
}
map1_addMapInteraction();

Upvotes: 6

Views: 6956

Answers (3)

Johan
Johan

Reputation: 71

Regarding this line

    var json     = geojson.write(features);

you need to 

    var  json     = geojson.writeFeatures(features);

I am trying to do the same thing but the result is an object not a string. I need a string so I can store it to my database.

Upvotes: 3

Christophe Roussy
Christophe Roussy

Reputation: 16999

I have the same issue, it will be accessible in the next release as it is used in some of the latest examples, also see the following links:

Upvotes: 0

dube
dube

Reputation: 5019

Trying to access it in FireBug was a good idea. If you cannot access the vectorsource.getFeatures() in FireBug, try accessing vectorsource in the FireBug console and then inspect it.

According to the OL3 source, the prototype of ol.source.Vector does have a method getFeatures, so you maybe have some error on your page which prevents the execution of your assignment or so. FireBug will tell you what it is (and what is in the var vectorsource).

Upvotes: 0

Related Questions