-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Test ol v8.2.0 sur le vecteur tuilé avec un éditeur de style
- Loading branch information
1 parent
910430c
commit c0eb82a
Showing
6 changed files
with
563 additions
and
49 deletions.
There are no files selected for viewing
254 changes: 205 additions & 49 deletions
254
samples-src/pages/openlayers/Layers/pages-ol-layermapbox-bundle-default.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,214 @@ | ||
| {{#extend "ol-sample-bundle-layout"}} | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | ||
| <meta charset="UTF-8"> | ||
|
|
||
| {{#content "head"}} | ||
| <title>Sample openlayers</title> | ||
| {{/content}} | ||
| <link rel="stylesheet" href="{{ resources }}/vendor/ol/v8.2.0/ol.css" /> | ||
| <link rel="stylesheet" href="{{ baseurl }}/dist/openlayers/modules/Editor{{ mode }}.css" /> | ||
|
|
||
| <script src="{{ resources }}/vendor/ol/v8.2.0/ol.js"></script> | ||
| <script src="{{ resources }}/vendor/ol/v8.2.0/olms.js"></script> | ||
| <script src="{{ baseurl }}/dist/openlayers/modules/Editor{{ mode }}.js"></script> | ||
|
|
||
| {{#content "style"}} | ||
| <style> | ||
| div#map { | ||
| width: 100%; | ||
| #container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: nowrap; | ||
| align-items: flex-start | ||
| } | ||
| #editor { | ||
| display: flex; | ||
| flex-direction: column; | ||
| overflow-y: scroll; | ||
| width: 500px; | ||
| height: 500px; | ||
| } | ||
| #map { | ||
| height: 500px; | ||
| width: 500px; | ||
| } | ||
| </style> | ||
| {{/content}} | ||
|
|
||
| {{#content "body"}} | ||
| <h2>Ajout d'une couche MapBox</h2> | ||
| <!-- map --> | ||
| <div id="map"> | ||
| </head> | ||
| <body> | ||
| <h2>Ajout d'une couche MapBox</h2> | ||
| <!-- map --> | ||
| <div id="container"> | ||
| <div id="map"></div> | ||
| <div id="editor"> | ||
| <button id="apply">Appliquer un style</button> | ||
| </div> | ||
| {{/content}} | ||
|
|
||
| {{#content "js"}} | ||
| <script type="text/javascript"> | ||
| var map; | ||
| window.onload = function() { | ||
| // on cache l'image de chargement du Géoportail. | ||
| document.getElementById('map').style.backgroundImage = 'none'; | ||
|
|
||
| map = new ol.Map({ | ||
| target : "map", | ||
| view : new ol.View({ | ||
| center : [288074.8449901076, 6247982.515792289], | ||
| zoom : 6 | ||
| }), | ||
| layers : [ | ||
| new ol.layer.GeoportalWMTS({ | ||
| layer : "ORTHOIMAGERY.ORTHOPHOTOS" | ||
| </div> | ||
| <script type="text/javascript"> | ||
| var map; | ||
|
|
||
| // plan ign custom | ||
| var layer; | ||
| var style; | ||
| var editor; | ||
|
|
||
| // gestion de la patience | ||
| function waiting (active) { | ||
| var back = document.getElementById('editor'); | ||
| if (active) { | ||
| back.style.backgroundImage = 'url({{ resources }}/geoportail-waiting.gif)'; | ||
| back.style.backgroundPosition = "center center"; | ||
| back.style.backgroundRepeat = "no-repeat"; | ||
| } else { | ||
| back.style.backgroundImage = 'none'; | ||
| } | ||
| } | ||
|
|
||
| // mise à jour des filtres | ||
| function updateFilterMapBoxLayer (layer, source, options) { | ||
| console.error(layer, source, options); | ||
|
|
||
| var layers = style.layers; | ||
| for (var i = 0; i < layers.length; i++) { | ||
| if (layers[i].id === options.data.id) { | ||
| var layout = layers[i].layout; | ||
| if (layout) { | ||
| layout.visibility = (options.active) ? "visible" : "none"; | ||
| } else { | ||
| layers[i].layout = { | ||
| visibility : (options.active) ? "visible" : "none" | ||
| }; | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| return olms.applyStyle(layer, style, source); | ||
| } | ||
|
|
||
| // edition des filtres | ||
| function displayEditor() { | ||
| waiting(true); | ||
|
|
||
| // Editeur de filtres | ||
| if (!editor) { | ||
| editor = new ol.style.Editor({ | ||
| target : document.getElementById("editor"), | ||
| style : style, | ||
| tools : { | ||
| themes : false, | ||
| layers : true, | ||
| filter : false, | ||
| style : false, | ||
| legend : true, | ||
| title : true, | ||
| group : false, | ||
| sort : false, | ||
| type : true, | ||
| pin : false | ||
| }, | ||
| events : { | ||
| "editor:layer:onclickvisibility" : function (e) { | ||
| // on recupere des informations | ||
| var data = e.target.data.obj; | ||
| var target = e.target.srcElement; | ||
|
|
||
| updateFilterMapBoxLayer(layer, "plan_ign", { | ||
| data:data, | ||
| active:target.checked | ||
| }) | ||
| .then(function () { | ||
| // some stuff... | ||
| }) | ||
| .catch(function (error) { | ||
| console.error("[ERROR]", error); | ||
| }); | ||
| }, | ||
| "editor:legend:onchangevalue" : function (e) { | ||
| // opacité, epaisseur et couleur | ||
| console.log(e); | ||
| }, | ||
| "editor:style:scale:onchangemax" : function (e) {console.log(e);}, | ||
| "editor:style:scale:onchangemin" : function (e) {console.log(e);} | ||
| } | ||
| }); | ||
| editor.createElement() | ||
| .then(function () { | ||
| waiting(false); | ||
| }); | ||
| } else { | ||
| waiting(false); | ||
| } | ||
| } | ||
|
|
||
| function hideButton() { | ||
| var button = document.getElementById("apply"); | ||
| button.style.display = "none"; | ||
| } | ||
|
|
||
| window.onload = function() { | ||
| layer = new ol.layer.VectorTile({ | ||
| id : "plan_ign", | ||
| source : new ol.source.VectorTile({ | ||
| format : new ol.format.MVT(), | ||
| urls : ["https://wxs.ign.fr/essentiels/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf"] | ||
| }), | ||
| new ol.layer.GeoportalMapBox({ | ||
| layer : "PLAN.IGN", | ||
| style : "gris" | ||
| }, { | ||
| opacity : 0.5, | ||
| declutter : true | ||
| visible : true, | ||
| declutter : true | ||
| }); | ||
|
|
||
| map = new ol.Map({ | ||
| target : "map", | ||
| view : new ol.View({ | ||
| center : [288074.8449901076, 6247982.515792289], | ||
| zoom : 6 | ||
| }), | ||
| layers : [ | ||
| layer | ||
| ] | ||
| }); | ||
|
|
||
| document.getElementById("apply").addEventListener("click", (e) => { | ||
| waiting(true); | ||
|
|
||
| var url = "https://wxs.ign.fr/static/vectorTiles/styles/PLAN.IGN/essentiels/standard.json"; | ||
|
|
||
| fetch(url, { | ||
| credentials : "same-origin" | ||
| }) | ||
| .then(function (response) { | ||
| if (response.ok) { | ||
| response.json() | ||
| .then(function (glStyle) { | ||
| style = glStyle; | ||
| }) | ||
| .then(function() { | ||
| olms.applyStyle(layer, style, "plan_ign") | ||
| .then(()=>{ | ||
| waiting(false); | ||
| }) | ||
| .then(()=>{ | ||
| displayEditor(); | ||
| }) | ||
| .then(()=>{ | ||
| hideButton(); | ||
| }) | ||
| .catch((e)=>{ | ||
| console.error(e); | ||
| }); | ||
| }) | ||
|
|
||
| .catch(function(e) { | ||
| console.error(e); | ||
| waiting(false); | ||
| }) | ||
| } | ||
| }) | ||
| .catch(function(e) { | ||
| console.error(e); | ||
| waiting(false); | ||
| }) | ||
| ] | ||
| }); | ||
|
|
||
| var layerSwitcher = new ol.control.LayerSwitcher({}); | ||
| map.addControl(layerSwitcher); | ||
| var attribution = new ol.control.GeoportalAttribution({}); | ||
| map.addControl(attribution); | ||
| }; | ||
| </script> | ||
| {{/content}} | ||
|
|
||
| {{/extend}} | ||
| }); | ||
|
|
||
| }; | ||
| </script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
|
|
Oops, something went wrong.