mirror of
https://github.com/Viglino/ol-ext.git
synced 2025-12-08 19:26:29 +00:00
117 lines
5.1 KiB
HTML
117 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2019 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
|
|
https://vectortiles.ign.fr/demonstrateur/
|
|
http://calac-4.ign.fr/pyramide_ecran/demonstrateur.html
|
|
|
|
Documentation:
|
|
https://geoservices.ign.fr/documentation/services_betas/vecteur-tuile.html
|
|
https://geoservices.ign.fr/documentation/geoservices/vecteur-tuile.html
|
|
-->
|
|
<title>ol-ext: Geoportail vector tile</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<link rel="icon" type="image/png" href="https://openlayers.org/assets/theme/img/logo70.png" />
|
|
|
|
<meta name="description" content="Geoportail vector tile" />
|
|
<meta name="keywords" content="openlayers, ol, geoportail, layer, source, vector, tile, style" />
|
|
|
|
<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">
|
|
|
|
<!-- chroma.js -->
|
|
<script type="text/javascript" src="https://gka.github.io/chroma.js/libs/chroma.min.cjs"></script>
|
|
<!-- Spectrum -->
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.2/spectrum.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.css" />
|
|
<!-- filesaver-js -->
|
|
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="../ol/v6.3.1/ol.css" />
|
|
<script type="text/javascript" src="../ol/v6.3.1//ol.js"></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="../olms.js"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<link rel="stylesheet" href="./map.layer.gppvtile.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: Geoportail vector tile</h1>
|
|
</a>
|
|
<p class="info">
|
|
Testing <a href="https://geoservices.ign.fr/documentation/geoservices/vecteur-tuile.html">Geoportail vector tiles</a>.
|
|
</p>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map"></div>
|
|
<label style="display: block; clear: both;"><input id="showSel" type="checkbox" /> show objets geometry</label>
|
|
|
|
<div class="options">
|
|
<label>Style de base :</label><select id="styles" onchange="setBaseStyle(this.value)"></select>
|
|
<button onclick="reset()"><i class="fa fa-refresh"></i> réinitialiser</button>
|
|
<div id="police">
|
|
<label>Police : </label>
|
|
<select onchange="setFont(this.value)">
|
|
<option value="Source Sans Pro" style="font-family: Source Sans Pro">Source Sans Pro</option>
|
|
<option value="Arial, Helvetica, sans-serif" style="font-family: Arial, Helvetica, sans-serif">Arial</option>
|
|
<option value="Arial Black,Gadget,sans-serif" style="font-family: Arial Black,Gadget,sans-serif">Arial Black</option>
|
|
<option value="Open Sans Regular,Arial Unicode MS Regular" style="font-family: Open Sans Regular,Arial Unicode MS Regular">Open Sans Regular</option>
|
|
<option value="Tahoma,Geneva,sans-serif" style="font-family: Tahoma,Geneva,sans-serif">Tahoma</option>
|
|
<option value="Comic Sans MS,cursive,sans-serif" style="font-family: Comic Sans MS,cursive,sans-serif">Comic Sans MS</option>
|
|
</select>
|
|
</div>
|
|
<ul></ul>
|
|
<label class="bulle"><input type="checkbox" onclick="showPopup($(this).prop('checked'))" /> Bulle au survol</label>
|
|
<button id="save"><i class="fa fa-download"></i> Charger les styles</button>
|
|
<i style="display: block; clear:both; text-align: right;">(déposez un fichier de style sur la carte pour l'afficher)</i>
|
|
</div>
|
|
|
|
<div id="color">
|
|
<div>
|
|
<h2>Choisir une couleur</h2>
|
|
<input />
|
|
</div>
|
|
</div>
|
|
|
|
<select id="operations">
|
|
<option value="">normal</option>
|
|
<option value="gray">gray</option>
|
|
<option value="saturate">saturate</option>
|
|
<option value="saturate2">saturate2</option>
|
|
<option value="desaturate">desaturate</option>
|
|
<option value="desaturate2">desaturate2</option>
|
|
<option value="darken">darken</option>
|
|
<option value="darken2">darken2</option>
|
|
<option value="brighten">brighten</option>
|
|
<option value="brighten2">brighten2</option>
|
|
<option value="red">red</option>
|
|
<option value="green">green</option>
|
|
<option value="blue">blue</option>
|
|
<option value="color" style="display: none;">user color</option>
|
|
<option value="color">user color</option>
|
|
</select>
|
|
|
|
<script src="./map.layer.gppvtile.js"></script>
|
|
|
|
</body>
|
|
</html> |