Created
July 2, 2020 21:48
-
-
Save ThomasG77/dbe3643ffd070acdfbbc48206bffc54c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Freehand Drawing</title> | |
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> | |
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script> | |
<style> | |
.map { | |
width: 100%; | |
height:400px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map" class="map"></div> | |
<form class="form-inline"> | |
<label>Geometry type </label> | |
<select id="type"> | |
<option value="LineString">LineString</option> | |
<option value="Polygon">Polygon</option> | |
<option value="Circle">Circle</option> | |
<option value="None">None</option> | |
</select> | |
</form> | |
<button type="button" id="export">Export</button> | |
<script src="index.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'ol/ol.css'; | |
import Map from 'ol/Map'; | |
import View from 'ol/View'; | |
import Draw from 'ol/interaction/Draw'; | |
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; | |
import {OSM, Vector as VectorSource} from 'ol/source'; | |
import GeoJSON from 'ol/format/GeoJSON'; | |
import {fromCircle} from 'ol/geom/Polygon'; | |
import Circle from 'ol/geom/Circle'; | |
import { saveAs } from 'file-saver'; | |
var raster = new TileLayer({ | |
source: new OSM() | |
}); | |
var source = new VectorSource({wrapX: false}); | |
var vector = new VectorLayer({ | |
source: source | |
}); | |
var map = new Map({ | |
layers: [raster, vector], | |
target: 'map', | |
view: new View({ | |
center: [-11000000, 4600000], | |
zoom: 4 | |
}) | |
}); | |
var typeSelect = document.getElementById('type'); | |
var exportGeoJSON = document.getElementById('export'); | |
exportGeoJSON.addEventListener('click', function(evt) { | |
console.log('clicked'); | |
var geojsonString = (new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857'})).writeFeatures(source.getFeatures().map(feature => { | |
var feat = feature.clone(); | |
if (feat.getGeometry() instanceof Circle) { | |
feat.setGeometry(fromCircle(feat.getGeometry())); | |
} | |
return feat; | |
})); | |
var blob = new Blob([geojsonString], {type: "application/ vnd.geo+json;charset=utf-8"}); | |
saveAs(blob, "export.geojson"); | |
//console.log(geojsonString); | |
}) | |
var draw; // global so we can remove it later | |
function addInteraction() { | |
var value = typeSelect.value; | |
if (value !== 'None') { | |
draw = new Draw({ | |
source: source, | |
type: typeSelect.value, | |
freehand: true | |
}); | |
map.addInteraction(draw); | |
} | |
} | |
/** | |
* Handle change event. | |
*/ | |
typeSelect.onchange = function() { | |
map.removeInteraction(draw); | |
addInteraction(); | |
}; | |
addInteraction(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "draw-freehand", | |
"dependencies": { | |
"file-saver": "^2.0.2", | |
"ol": "6.3.1" | |
}, | |
"devDependencies": { | |
"parcel": "1.11.0" | |
}, | |
"scripts": { | |
"start": "parcel index.html", | |
"build": "parcel build --experimental-scope-hoisting --public-url . index.html" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment