Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Last active April 6, 2024 18:12
Show Gist options
  • Save ThomasG77/3047b6072f0411d11d23cfed1fdb2c5c to your computer and use it in GitHub Desktop.
Save ThomasG77/3047b6072f0411d11d23cfed1fdb2c5c to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Tuiles vecteur OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!-- Openlayers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.1.0/ol.css" />
<script src="https://cdn.jsdelivr.net/npm/ol@v9.1.0/dist/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<script src="https://unpkg.com/ol-mapbox-style@12.2.0/dist/olms.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
</style>
</head>
<body >
<!-- DIV pour la carte -->
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
view: new ol.View ({
zoom: 5,
center: ol.proj.fromLonLat([3.389162, 46.852644])
}),
interactions: ol.interaction.defaults.defaults()
});
const url_style = "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json";
fetch(url_style).then(res => res.json()).then(style => {
// Patching or not below line is ignored on OpenLayers side. Always considered xyz
// style.sources.plan_ign.scheme = 'xyz';
const attribution = 'Données cartographiques : © IGN'
style.sources.plan_ign.attribution = attribution;
const url_pbf = style.sources.plan_ign.tiles[0];
var vlayer = new ol.layer.VectorTile({
title: "Plan IGN vecteur",
renderMode: 'hybrid',
declutter: true
});
olms.applyStyle(vlayer, style, 'plan_ign').then(function (e) {
vlayer.setSource(
new ol.source.VectorTile({
tilePixelRatio: 1,
tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }),
format: new ol.format.MVT(),
url : url_pbf,
attributions: attribution,
})
)
});
map.addLayer(vlayer);
})
</script>
</body>
</html>
@mrsolarius
Copy link

Le JSON de style n'est plus disponible, peut-être le remplacer par celui-ci : https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment