mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
222 lines
8.8 KiB
HTML
222 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: Geoportail Loader</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/IGN_logo_2012.svg/218px-IGN_logo_2012.svg.png" />
|
|
|
|
<meta name="description" content="Geoportail WFS" />
|
|
<meta name="keywords" content="ol, openlayers, layer, source, geoportail, WFS" />
|
|
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- 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>
|
|
<script src="/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
<script type="text/javascript" src="../../dist/extra/FontAwesomeDef.js"></script>
|
|
|
|
<!-- JSTS -->
|
|
<script type="text/javascript" src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
|
|
|
|
<!-- filesaver-js -->
|
|
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="./geoportail.loader.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<!--
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
-->
|
|
<i class="wait fa fa-spinner fa-pulse"></i>
|
|
|
|
<div id="info" class="dialog" onclick="$('#info').addClass('hidden');">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/IGN_logo_2012.svg" />
|
|
<p>
|
|
Outil de chargement de données IGN à travers les flux Géoportail.
|
|
<ol>
|
|
<li>Choisissez la couche</li>
|
|
<li>Sélectionner la zone à charger</li>
|
|
<li>Charger les données</li>
|
|
<li>Enregistrer...</li>
|
|
</ol>
|
|
Cliquez sur le carroyage pour sélectionner un carreau à charger.
|
|
<kbd>Ctrl</kbd>+clic+drag pour sélectionner une zone à charger.
|
|
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+clic+drag pour désélectionner une zone à charger.
|
|
Glisser-déposer un fichier (GeoJSON, KML, etc.) à ajouter à la zone de chargement...
|
|
</p>
|
|
<p>
|
|
Les bases de données de l'IGN sont diffusées selon les termes de la
|
|
<a href="https://geoservices.ign.fr/documentation/diffusion/telechargement-donnees-libres.html" target="_new">
|
|
licence ouverte Etalab 2.0
|
|
</a>
|
|
</p>
|
|
<div>
|
|
<span>
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Logo-licence-ouverte2.svg" />
|
|
<span>
|
|
Licence Ouverte
|
|
<hr/>Open Licence
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map"></div>
|
|
<div class="options">
|
|
<div>
|
|
<label>Couche :</label>
|
|
<select id="typename" onchange="setWFS(this.value)">
|
|
<option class='standard' value="BDTOPO_V3:troncon_de_route">route</option>
|
|
<option class='standard' value="BDTOPO_V3:batiment">batiments</option>
|
|
<option class='standard' value="CADASTRALPARCELS.PARCELLAIRE_EXPRESS:parcelle">parcelle</option>
|
|
<option class='hydro' value="BDTOPO_V3:cours_d_eau">cours d'eau</option>
|
|
</select>
|
|
<button onclick="showDialog('tiles')"><i class="fa fa-hand-o-up"></i></button>
|
|
<button onclick="loadTiles()"><i class="fa fa-upload"></i> charger</button>
|
|
<button onclick="save()"><i class="fa fa-download"></i> enregistrer</button>
|
|
<i class="fa fa-info-circle" onclick="showDialog('info')"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tiles" class="dialog hidden">
|
|
<h2>Dalles de chargement</h2>
|
|
<i class="fa fa-close" onclick="$('#tiles').addClass('hidden');"></i>
|
|
<p>
|
|
<button onclick="reset()">
|
|
<i class="fa fa-refresh"></i> Réinitialiser la zone
|
|
</button>
|
|
<i>Retour à zéro : les données seront perdues, la zone de chargement réinitialisée.</i>
|
|
</p>
|
|
<!--p>
|
|
<button onclick="selScreen()">
|
|
<i class="fa fa-clone"></i> Zone visible
|
|
</button>
|
|
<i>Sélectionner la zone visible pour un chargement.</i>
|
|
</p-->
|
|
<p>
|
|
<button onclick="communeDialog.show()">
|
|
<i class="fa fa-upload"></i> Charger une commune
|
|
</button>
|
|
<i>Charger une commune avec son numéro INSEE comme zone de chargement ou glissez-déposez un fichier sur la carte.</i>
|
|
</p>
|
|
<p>
|
|
<button onclick="circularZone($(this).next().val())">
|
|
<i class="fa fa-circle-o"></i> Zone circulaire...
|
|
</button>
|
|
<input type="number" step="" value="3" min="0" style="width:5em;" /> km
|
|
<i>Créer une zone de chargement circulaire centrée sur la carte.</i>
|
|
</p>
|
|
<p>
|
|
<button onclick="buffer()">
|
|
<i class="fa fa-eercast"></i> Buffer
|
|
</button> <input id="buffer" type="number" min=0 value=0 style="width: 5em;" />
|
|
<i>Ajouter un buffer à la zone de chargement</i>
|
|
</p>
|
|
<p>
|
|
<button onclick="tileCommune();">
|
|
<i class="fa fa-clone"></i> Dans la zone de chargement
|
|
</button>
|
|
<i>Charger les dalles intersectant la zone de chargement</i>
|
|
</p>
|
|
<p>
|
|
<label>
|
|
<input type="checkbox" onchange="doShannon(this.checked)" />
|
|
Calculer l'indice de Shannon
|
|
</label>
|
|
<select id="shannonAttr">
|
|
<option value="usage">usage</option>
|
|
<option value="hauteur">hauteur</option>
|
|
</select>
|
|
<i>
|
|
L'indice de Shannon permet de mesurer la diversité des bâtiments
|
|
<sup>
|
|
<a href="https://www.linkedin.com/posts/enhui-fang-b91b66225_postgis-qgis-rechercheurbaine-activity-7357783926964117504-TCxp" target="_new" title="en savoir plus">1</a>
|
|
<a href="https://fr.wikipedia.org/wiki/Indice_de_Shannon" target="_new" title="sur Wikipedia">2</a>
|
|
</sup>
|
|
</i>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="save" class="dialog hidden">
|
|
<h2>Enregistrer</h2>
|
|
<form>
|
|
<ul>
|
|
<li>
|
|
Format: <select>
|
|
<option value="geojson">GeoJSON</option>
|
|
<option value="kml">KML</option>
|
|
<option value="esrijson">EsriJSON</option>
|
|
</select>
|
|
</li><li>
|
|
<label><input type="checkbox" class="select" /><span> seulement la sélection</span></label>
|
|
</li><li>
|
|
<label><input type="checkbox" class="clip" /><span> intersecte la zone de chargement</span></label>
|
|
</li><li>
|
|
<label><input type="checkbox" class="null" checked="checked" /><span> supprimer les attributs null</span></label>
|
|
</li><li style="text-align: right;">
|
|
<button type="button" onclick="showOptions()"><i class="fa fa-list"></i> options...</button>
|
|
</li>
|
|
</ul>
|
|
<div class="buttons">
|
|
<button type="submit"><i class="fa fa-map-o"></i> enregistrer</button>
|
|
<button class="commune" type="button" onclick="saveCommune();"><i class="fa fa-download"></i> commune</button>
|
|
<button type="reset" onclick="$('#save').addClass('hidden')">annuler</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="options" class="dialog hidden">
|
|
<h2>Options</h2>
|
|
<i class="fa fa-close" onclick="$('#options').addClass('hidden');"></i>
|
|
<label><input type="checkbox" class="filter" /> Filtrage géométrique: </label><input class="geom" type="number" value=0 step=".5" min="0" /> m<br/>
|
|
<label><input type="checkbox" class="limit" /> Limiter les attributs:</label>
|
|
<div class="buttons">
|
|
<button class="valid">OK</button>
|
|
<button onclick="$('#options').addClass('hidden')">Annuler</button>
|
|
</div>
|
|
<ul class='disabled'></ul>
|
|
<div class="buttons">
|
|
<button class="valid">OK</button>
|
|
<button onclick="$('#options').addClass('hidden')">Annuler</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="alert" class="dialog hidden">
|
|
<div>
|
|
<h2>Options</h2>
|
|
<i class="fa fa-close" onclick="$('#alert').addClass('hidden');"></i>
|
|
<div class='content'></div>
|
|
<div class="buttons">
|
|
<button onclick="$('#alert').addClass('hidden')">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info">
|
|
xxx objets
|
|
</div>
|
|
|
|
<script type="text/javascript" src="./geoportail.loader.js"></script>
|
|
<script type="text/javascript" src="./geoportail.loader.shannon.js"></script>
|
|
|
|
</body>
|
|
</html> |