Geek Answers Handbook

How can I serialize all functions at json level using openlayers 3

I want to allow the user to draw a polygon on the map using openlayers 3, and then when the user clicks β€œsave”, I want to put json for the polygon in a hidden field so that it can be sent back to the server and saved in the database.

I have code to draw a polygon (below), and then I wrote a simple test function that fires when a button is clicked. The call to getFeatures () fails. In firebug, the message shown on 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 database that I use

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

, ( openlayers Open Layers 3 draw ).

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();
+4
3

    var json     = geojson.write(features);


    var  json     = geojson.writeFeatures(features);

, , . , .

+2

FireBug . vectorsource.getFeatures() FireBug, vectorsource FireBug .

OL3, ol.source.Vector getFeatures, , . FireBug , ( var vectorsource).

0

More articles:


All Articles