Démonstration : visualiseur de couche à tuiles vectorielles sous Openlayers 6

Ajouter des couches vectorielles par URL de couche .pbf (pas de style)

url de couche tuilée vectorielle (.pbf)

Ajouter

ex :

• https://vectortiles.ign.fr/tilemapservice/1.0.0/DU/{z}/{x}/{y}.pbf
• https://wxs.ign.fr/parcellaire/geoportail/tms/1.0.0/PCI/{z}/{x}/{y}.pbf
• https://wxs.ign.fr/essentiels/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf
• https://basemaps.arcgis.com/v1/arcgis/rest/services/World_Basemap/VectorTileServer/tile/{z}/{y}/{x}.pbf

Ajouter des couches vectorielles par URL de style .json

url du style de la couche (.json)

Ajouter

ex :

• ./dist/styles/du.json (chargée par défaut avec le style dédié)
• ./dist/styles/du,prescription.json (prescriptions placé dans une autre source)

Ajouter des couches vectorielles par style json

Ajoutez directement le contenu du fichier de style afin de pouvoir le modifier et de tester l'affichage des couches sur la carte.

Style Mapbox json de la couche { "version": 8, "name": "DU", "metadata": {}, "center": [ 4.989364864736102, 43.64186859283136 ], "zoom": 8, "bearing": 0, "pitch": 0, "sources": { "du": { "type": "vector", "tiles": [ "https://vectortiles.ign.fr/tilemapservice/1.0.0/DU/{z}/{x}/{y}.pbf" ], "minzoom": 3, "maxzoom": 18 } }, "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}", "layers": [ { "id": "Plan local d'urbanisme - PLU-highscale - fill", "type": "fill", "source": "du", "source-layer": "document", "maxzoom": 12, "filter": [ "==", "du_type", "PLU" ], "paint": { "fill-color": "#ff9955", "fill-outline-color": "#ff9955" } }, { "id": "Plan d'occupation des sols - POS-highscale - fill", "type": "fill", "source": "du", "source-layer": "document", "maxzoom": 12, "filter": [ "==", "du_type", "POS" ], "paint": { "fill-color": "#ffccaa", "fill-outline-color": "#ffccaa" } }, { "id": "Carte communale - CC-highscale - fill", "type": "fill", "source": "du", "source-layer": "document", "maxzoom": 12, "filter": [ "==", "du_type", "CC" ], "paint": { "fill-color": "#00d455", "fill-outline-color": "#00d455" } }, { "id": "Plan de sauvegarde et de mise en valeur - PSMV-highscale - fill", "type": "fill", "source": "du", "source-layer": "document", "maxzoom": 12, "filter": [ "==", "du_type", "PSMV" ], "paint": { "fill-color": "#0c00ff", "fill-outline-color": "#0c00ff" } }, { "id": "Plan local d'urbanisme intercommunal - PLUI - fill", "type": "fill", "source": "du", "source-layer": "document", "maxzoom": 12, "filter": [ "==", "du_type", "PLUi" ], "paint": { "fill-color": "#ff9955", "fill-outline-color": "#595757" } }, { "id": "Document d'Urbanisme - symbol", "type": "symbol", "source": "du", "source-layer": "document", "maxzoom": 12, "layout": { "text-field": "{libelle}", "text-font": [ "Arial" ], "text-size": 14 }, "paint": { "text-opacity": 1, "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 2 } }, { "id": "Zone urbaine - lowscale - fill", "type": "fill", "source": "du", "source-layer": "zone_urba", "minzoom": 11, "paint": { "fill-color": "red", "fill-opacity": 0.5, "fill-outline-color": "blue" } }, { "id": "Zone urbaine - lowscale - symbol", "type": "symbol", "source": "du", "source-layer": "zone_urba", "minzoom": 11, "layout": { "text-field": "{libelle}", "text-font": [ "Arial" ], "text-size": 14 }, "paint": { "text-opacity": 1, "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 2 } }, { "id": "prescription surf", "type": "fill", "source": "du", "source-layer": "prescription_surf", "minzoom": 11, "paint": { "fill-color": "red", "fill-opacity": 0.5, "fill-outline-color": "blue" } }, { "id": "prescription lin", "type": "line", "source": "du", "source-layer": "prescription_lin", "minzoom": 11, "paint": { "line-color": "red" } }, { "id": "prescription pct", "type": "circle", "source": "du", "source-layer": "prescription_pct", "minzoom": 11, "paint": { "circle-color": "red", "circle-radius": 1.75 } }, { "id": "info surf", "type": "fill", "source": "du", "source-layer": "info_surf", "minzoom": 11, "paint": { "fill-color": "red", "fill-opacity": 0.5, "fill-outline-color": "blue" } }, { "id": "info lin", "type": "line", "source": "du", "source-layer": "info_lin", "minzoom": 11, "paint": { "line-color": "red" } }, { "id": "info pct", "type": "circle", "source": "du", "source-layer": "info_pct", "minzoom": 11, "paint": { "circle-color": "red", "circle-radius": 1.75 } }, { "id": "habillage surf", "type": "fill", "source": "du", "source-layer": "habillage_surf", "minzoom": 11, "paint": { "fill-color": "green", "fill-opacity": 0.5, "fill-outline-color": "blue" } }, { "id": "habillage surf - symbol", "type": "symbol", "source": "du", "source-layer": "habillage_surf", "minzoom": 11, "layout": { "text-field": "{libelle}", "text-font": [ "Arial" ], "text-size": 14 }, "paint": { "text-opacity": 1, "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 2 } }, { "id": "habillage lin", "type": "line", "source": "du", "source-layer": "habillage_lin", "minzoom": 11, "paint": { "line-color": "blue" } }, { "id": "habillage pct", "type": "circle", "source": "du", "source-layer": "habillage_pct", "minzoom": 11, "paint": { "circle-color": "blue", "circle-radius": 1.75 } }, { "id": "habillage txt", "type": "symbol", "source": "du", "source-layer": "habillage_txt", "minzoom": 11, "layout": { "text-field": "{libelle}", "text-font": [ "Arial" ], "text-size": 14 }, "paint": { "text-opacity": 1, "text-color": "#000000", "text-halo-color": "#ffffff", "text-halo-width": 2 } } ], "id": "c4268e48-fac9-4478-8120-201224fbd4d8" }

Ajouter