veelhoek opslaan in GeoJSON

Communities Nederland (Netherlands)
1

Hallo,

kan iemand mij helpen hoe ik mijn polygoon en lijn kan redden in GeoJSON? En hoe voer ik een naam, aantal tekeningen, en de omvang van het gebied uitgezet? En hoe sla ik de veelhoek, toen ik herladen de pagina?
(geprogrammeerd OpenLayers 3)

mijn tekening code javascript:


var iconsDraw = [], meassureSouce, meassureVector, checkMeassureInitialized = false, mouseMoveHandler, outputList, output,
styleCache = {}, draw;

var sketch; //geabonneerd functiesn @type {ol.Feature}
var sketchElement; //Element voor geabonneerd functie @type {Element}


var  drawStart= function(evt) { 
    // set sketch
    sketch = evt.feature;
    sketchElement = document.createElement('li');
    outputList = document.getElementById('measureOutput');

    if (outputList.childNodes) {
        outputList.insertBefore(sketchElement, outputList.firstChild);
    } else {
        outputList.appendChild(sketchElement);
    }
};

var drawEnd = function(evt) {
    // unset sketch
    sketch = null;
    sketchElement = null;
};

var drawStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 0, 0, 0.2)' 
                }),
                stroke: new ol.style.Stroke({
                    color: '#DC143C',//'#ffcc33',
                    width: 3
                }),
                image: new ol.style.Circle({
                    radius: 1, 
                    fill: new ol.style.Fill({
                        color: '#DC143C'//'#ffcc33'
                    })
                })
            });

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

var addInteraction = function(evt) {
    
    checkMeassureOff();
    
    var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
    draw = new ol.interaction.Draw({
        source: meassureSouce,
        type: /** @type {ol.geom.GeometryType} */ (type),
        style: drawStyle
    });

    iconsDraw.push(meassureVector);

    map.addInteraction(draw);
    
    draw.on('drawstart', drawStart);
    draw.on('drawend', drawEnd);
    $(map.getViewport()).on('mousemove', mouseMoveHandler);
    
    //de iconsDraw de checkbox gebonden
    var chMeassure = new ol.dom.Input(document.getElementById("visibleMeasure"));
    for(var k = 0; k<iconsDraw.length; k++){
        chMeassure.bindTo('checked', iconsDraw[k], 'visible');
    }
};

function checkMeassure(){
    mouseMoveHandler = function(evt) {
        if (sketch) {
            var output;
            var geom = (sketch.getGeometry());
            if (geom instanceof ol.geom.Polygon) {
                output = formatArea(/** @type {ol.geom.Polygon} */ (geom));
            } else if (geom instanceof ol.geom.LineString) {
                output = formatLength( /** @type {ol.geom.LineString} */ (geom));
            }
            sketchElement.innerHTML = output;
        }
    };

    if(!checkMeassureInitialized) {
        meassureSouce = new ol.source.Vector();

        meassureVector = new ol.layer.Vector({
            source: meassureSouce,
            style: drawStyle
            
        });
        map.addLayer(meassureVector);
    }
    checkMeassureInitialized = true;

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

    /**
    * format length output
    * @param {ol.geom.LineString} line
    * @return {string}
    */
   var formatLength = function(line) {
        var length = Math.round(line.getLength() * 100) / 100;
        var output;
        if (length > 100) {
            output = (Math.round(length / 1000 * 100) / 100) +' ' + 'km';
        } else {
            output = (Math.round(length * 100) / 100) +' ' + 'm';
        }
        return output+" "+formUrl;
    }; 
    

    /**
    * format length output
    * @param {ol.geom.Polygon} polygon
    * @return {string}
    */
    var formatArea = function(polygon) {
        var area = polygon.getArea();
        var output;
        if (area > 10000) {
            output = (Math.round(area / 1000000 * 100) / 100) +' ' + 'km<sup>2</sup>';
        } else {
            output = (Math.round(area * 100) / 100) +' ' + 'm<sup>2</sup>';
        }
        return output+" "+formUrl;
    };
    
    addInteraction();
    
};

function checkMeassureOff(){
    if(draw) {
        draw.un('drawstart', drawWerte);
        draw.un('drawend', drawEn);
        map.removeInteraction(draw);
    }
    $(map.getViewport()).off('mousemove', mouseMoveHandler);
};

HTML:


<form class="form-inline">
    <label>Geometry type &nbsp;</label>
         <select id="type">
                  <option value="length" >Length</option>
                  <option value="area" >Area</option>
           </select>
</form>
<div class="span12">
     <input id="measure" type="button" value="Measure on" onclick="checkMeassure()"/>
     <input id="measureOff" type="button" value="Measure off" onclick="checkMeassureOff()"/>
</div>

<div class="span12">
     <ol id="measureOutput" reversed></ol>
</div>
<div class="edit-form">
     <div class="span4 offset0">
           <div id="info" class="alert alert-success">
                  &nbsp;
          </div>
       </div>
</div>

Hoop dat je me kunt helpen!

Ik verontschuldig me voor het slechte Nederlands.

Dank je wel!