mirror of
https://github.com/Viglino/ol-ext.git
synced 2025-12-08 19:26:29 +00:00
213 lines
6.6 KiB
HTML
213 lines
6.6 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/api-et-services-ogc/tuiles-vectorielles-tmswmts
|
|
-->
|
|
<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="https://openlayers.org/en/v6.3.1/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/v6.3.1/build/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" />
|
|
<style>
|
|
#map {
|
|
right: 0;
|
|
}
|
|
</style>
|
|
|
|
</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>
|
|
<label class="bulle"><input type="checkbox" onclick="showPopup($(this).prop('checked'))" /> Bulle au survol</label>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
// The map
|
|
var map = new ol.Map({
|
|
target: 'map',
|
|
view: new ol.View ({
|
|
zoom: 15,
|
|
center: [261204.43490751847, 6250258.191535994]
|
|
}),
|
|
// layers: [ new ol.layer.Geoportail('ORTHOIMAGERY.ORTHOPHOTOS')]
|
|
});
|
|
map.addControl(new ol.control.Permalink());
|
|
|
|
map.addControl(new ol.control.SearchBAN({ zoomOnSelect: 15 }));
|
|
|
|
// Vector layer
|
|
var vlayer = new ol.layer.VectorTile({
|
|
title: "Plan IGN vecteur",
|
|
renderMode: 'hybrid',
|
|
source: new ol.source.VectorTile({
|
|
tilePixelRatio: 1,
|
|
tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }),
|
|
format: new ol.format.MVT(),
|
|
projection: new ol.proj.Projection({code:"EPSG:3857"}),
|
|
url : 'https://wxs.ign.fr/topographie/geoportail/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf',
|
|
//url : 'https://data.geopf.fr/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf',
|
|
//"https://wxs.ign.fr/latuile/geoportail/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf",
|
|
attributions: '<a href="https://geoservices.ign.fr/blog/2018/07/08/nouveautes_vecteur.html">© IGN-Géoportail</a>',
|
|
}),
|
|
declutter: true
|
|
});
|
|
map.addLayer(vlayer);
|
|
|
|
ol.ext.Ajax.get({
|
|
url: 'https://wxs.ign.fr/static/vectorTiles/styles/BDTOPO/classique.json',
|
|
success: function(style) {
|
|
olms.applyStyle(vlayer, style, 'bdtopo').then(function () {});
|
|
}
|
|
});
|
|
|
|
|
|
// Selection
|
|
var selStyle = ol.style.Style.defaultStyle(true)
|
|
selStyle.push(new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
radius: 3,
|
|
fill: new ol.style.Fill({ color: '#f00' })
|
|
}),
|
|
geometry: function(f) {
|
|
return new ol.geom.Point(f.getGeometry().getFirstCoordinate())
|
|
}
|
|
}))
|
|
var select = new ol.layer.Vector({
|
|
source: new ol.source.Vector(),
|
|
style: selStyle
|
|
});
|
|
map.addLayer(select);
|
|
|
|
// Log properties
|
|
map.on('click', function(e) {
|
|
var f = map.getFeaturesAtPixel(e.pixel)[0]
|
|
if (f) {
|
|
console.clear();
|
|
console.table(f.getProperties())
|
|
}
|
|
})
|
|
|
|
// Show tooltip on hover
|
|
var tooltip = new ol.Overlay.Tooltip({ className: 'default', positioning: 'bottom-center' });
|
|
map.addOverlay(tooltip);
|
|
|
|
function showPopup(b) {
|
|
tooltip.setInfo('');
|
|
hover.setActive(b);
|
|
}
|
|
|
|
var hover = new ol.interaction.Hover({
|
|
cursor: "pointer",
|
|
layers: [vlayer]
|
|
});
|
|
hover.setActive(false);
|
|
map.addInteraction(hover);
|
|
function showPopup(b) {
|
|
tooltip.setInfo('');
|
|
hover.setActive(b);
|
|
}
|
|
hover.on("enter", function(e) {
|
|
var showGeom = $('#showSel').prop('checked');
|
|
// hover.setCursor("pointer");
|
|
var feature = e.feature;
|
|
if (select.getSource().getFeatures().length) select.getSource().clear();
|
|
var info = '';
|
|
if (feature && feature.get('layer')!=='fond_opaque') {
|
|
info = '<h2>'+feature.get('layer').replace(/_/g,' ')+'</h2>';
|
|
['symbo', 'nature', 'rond_point', 'sens_circu', 'texte', 'nom_desabrege', 'numero', 'hauteur'].forEach(function(a) {
|
|
if (feature.get(a)) info += '<br/>'+a.replace(/_/g,' ')+': '+feature.get(a);
|
|
})
|
|
}
|
|
tooltip.setInfo(info);
|
|
//console.log(feature.getProperties());
|
|
// Select feature
|
|
if (showGeom) {
|
|
var coords = [];
|
|
if (feature instanceof ol.Feature) {
|
|
select.getSource().addFeature(feature);
|
|
} else {
|
|
var c = feature.getFlatCoordinates();
|
|
for (var i=0; i<c.length; i+=2) {
|
|
coords.push ([c[i],c[i+1]]);
|
|
}
|
|
// console.log(feature.getType())
|
|
switch (feature.getType()) {
|
|
case 'Point': {
|
|
coords = coords.pop();
|
|
break;
|
|
}
|
|
case 'LineString' : {
|
|
coords = coords;
|
|
break;
|
|
}
|
|
case 'MultiLineString' :
|
|
case 'Polygon' : {
|
|
coords = [coords];
|
|
break;
|
|
}
|
|
}
|
|
var geom = new ol.geom[feature.getType()](coords)
|
|
var f2 = new ol.Feature(geom);
|
|
f2.setProperties(feature.getProperties())
|
|
select.getSource().addFeature(f2);
|
|
}
|
|
}
|
|
});
|
|
hover.on("leave", function(e) {
|
|
tooltip.setInfo('');
|
|
select.getSource().clear();
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |