Hello,
can someone help me how I can save the drawn polygons and lines in GeoJSON? And how do I save the polygon and lines, when I reloaded this page? (programmed with openlayers 3)
HTML:
<div class="edit-form">
<h2>Messung</h2>
<form class="form-inline">
<label>Geometry type </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>
<div class="edit-form">
<div class="span4 offset0">
<div id="info" class="alert alert-success">
</div>
</div>
</div>
Javascript:
var iconsDraw = [], meassureSouce, meassureVector, checkMeassureInitialized = false, mouseMoveHandler, outputList, output,
styleCache = {}, draw;
var sketch; //currently subscribed function@type {ol.Feature}
var sketchElement; //Element für derzeit gezeichnete Funktion @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;
};
//style für das zeichnen
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);
//the iconsDraw be bound to the checkbox
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', drawstart);
draw.un('drawend', drawEns);
map.removeInteraction(draw);
}
$(map.getViewport()).off('mousemove', mouseMoveHandler);
};
I hope you can help me!
I apologize for the bad english.
I thank you in advance!