mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
179 lines
4.8 KiB
HTML
179 lines
4.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
|
|
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- filesaver-js -->
|
|
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
|
|
|
<!-- Geoimport -->
|
|
<script src="https://cdn.jsdelivr.net/npm/geoimport@latest/dist/index.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
|
|
<style>
|
|
.title {
|
|
display: block;
|
|
margin: -0.5em -0.5em 0;
|
|
}
|
|
#map {
|
|
position: absolute;
|
|
top: 5em;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
}
|
|
dialog:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0,0,0,0.3);
|
|
z-index: -1;
|
|
}
|
|
dialog {
|
|
background: none;
|
|
border: 0;
|
|
}
|
|
dialog form {
|
|
background-color: #fff;
|
|
padding: 1em;
|
|
box-shadow: 0 0 5px #000;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a class="title" href="../../index.html">
|
|
<h1>Geoimport</h1>
|
|
</a>
|
|
|
|
<input type="file" />
|
|
<label>📥 </label>
|
|
<select>
|
|
<option value="">export</option>
|
|
<option value="KML">KML</option>
|
|
<option value="geojson">GeoJSON</option>
|
|
<option value="ESRI Shapefile">ESRI Shapefile</option>
|
|
<option value="GPKG">Geopackage</option>
|
|
<option value="FlatGeobuf">FlatGeobuf</option>
|
|
</select>
|
|
|
|
<div id="map"></div>
|
|
|
|
<dialog class="loading">
|
|
<form>
|
|
loading...
|
|
</form>
|
|
</dialog>
|
|
<dialog class="saving">
|
|
<form>
|
|
saving...
|
|
</form>
|
|
</dialog>
|
|
<dialog class="error">
|
|
<form>
|
|
<h2>
|
|
Can not load this file
|
|
</h2>
|
|
<p></p>
|
|
<p>press [ESC] to close</p>
|
|
</form>
|
|
</dialog>
|
|
<dialog class="loaded">
|
|
<form>
|
|
<h2>
|
|
Chargement
|
|
</h2>
|
|
<p></p>
|
|
<button type="button">center</button>
|
|
<p>press [ESC] to close</p>
|
|
</form>
|
|
</dialog>
|
|
<script>
|
|
// @see https://github.com/riatelab/geoimport
|
|
|
|
// The map
|
|
var map = new ol.Map({
|
|
target: 'map',
|
|
view: new ol.View({
|
|
zoom: 3,
|
|
center: [270148, 6247782]
|
|
}),
|
|
layers: [ new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS' }) ]
|
|
});
|
|
|
|
|
|
geoimport.init({
|
|
path: 'https://cdn.jsdelivr.net/npm/geoimport@latest/dist/static/',
|
|
useWorker: false,
|
|
});
|
|
|
|
document.querySelector('dialog.loaded button').addEventListener('click', function() {
|
|
map.getView().fit(layer.getSource().getExtent())
|
|
document.querySelector('dialog.loaded').close()
|
|
})
|
|
|
|
var layer;
|
|
var inputf = document.querySelector('input[type="file"]')
|
|
inputf.addEventListener('change', e => {
|
|
console.log((inputf.files[0].size / (1024)).toLocaleString(undefined, { maximumFractionDigits: 2 }) + ' Ko');
|
|
document.querySelector('.loading').showModal();
|
|
geoimport.toGeoJSON(inputf.files[0]).then(json => {
|
|
// console.log('loading', json)
|
|
console.log('loading')
|
|
layer = new ol.layer.VectorImage({
|
|
source: new ol.source.Vector({
|
|
features: new ol.format.GeoJSON().readFeatures(json, { dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection() }),
|
|
})
|
|
})
|
|
map.addLayer(layer)
|
|
var dlg = document.querySelector('.loaded')
|
|
dlg.querySelector('p').innerHTML = layer.getSource().getFeatures().length + ' features loaded'
|
|
dlg.showModal();
|
|
document.querySelector('.loading').close();
|
|
}).catch(function(e) {
|
|
document.querySelector('.loading').close();
|
|
console.log('Lecture impossible', e);
|
|
var dlg = document.querySelector('.error')
|
|
dlg.querySelector('p').innerHTML = e[0].message || ''
|
|
dlg.showModal();
|
|
})
|
|
})
|
|
|
|
document.querySelector('select').addEventListener('change', (e) => {
|
|
var format = e.target.value;
|
|
e.target.value = '';
|
|
if (layer && format) {
|
|
var json = new ol.format.GeoJSON().writeFeaturesObject(layer.getSource().getFeatures(), { dataProjection: 'EPSG:4326', featureProjection: map.getView().getProjection() })
|
|
if (format ==='geojson') {
|
|
var blob = new Blob([JSON.stringify(json)], {type: "text/plain;charset=utf-8"});
|
|
saveAs(blob, 'export.geojson')
|
|
} else {
|
|
document.querySelector('.saving').showModal();
|
|
geoimport.fromGeoJSON(json, 'export', format).then(f => {
|
|
if (f.name) {
|
|
saveAs(f, f.name);
|
|
} else {
|
|
var blob = new Blob([f], {type: "text/plain;charset=utf-8"});
|
|
saveAs(blob, 'export.' + format.toLowerCase())
|
|
}
|
|
document.querySelector('.saving').close();
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |