Merge pull request #1100 from prusswan/fix-gppvtile-example

Fix gppvtile example
Viglino · Sep 4, 2024 · 2b89b0a · 2b89b0a
2 parents cc02acb + 39529a7
commit 2b89b0a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/examples/layer/map.layer.bdtopo.vtile.html b/examples/layer/map.layer.bdtopo.vtile.html
@@ -2,12 +2,12 @@
 <html>
 <head>
 <!--
-  Copyright (c) 2019 Jean-Marc VIGLINO, 
+  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
 -->
@@ -27,7 +27,7 @@
   <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.js"></script>
+  <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" />
@@ -38,7 +38,7 @@
   <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>
@@ -54,7 +54,7 @@
       right: 0;
     }
   </style>
-  
+
 </head>
 <body >
   <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
@@ -69,7 +69,7 @@ <h1>ol-ext: Geoportail vector tile</h1>
 
   <!-- DIV pour la carte -->
   <div id="map"></div>
-  
+
   <script>
 // The map
 var map = new ol.Map({
@@ -121,7 +121,7 @@ <h1>ol-ext: Geoportail vector tile</h1>
     return new ol.geom.Point(f.getGeometry().getFirstCoordinate())
   }
 }))
-var select = new ol.layer.Vector({ 
+var select = new ol.layer.Vector({
   source: new ol.source.Vector(),
   style: selStyle
 });
@@ -145,7 +145,7 @@ <h1>ol-ext: Geoportail vector tile</h1>
   hover.setActive(b);
 }
 
-var hover = new ol.interaction.Hover({ 
+var hover = new ol.interaction.Hover({
   cursor: "pointer",
   layers: [vlayer]
 });
@@ -169,7 +169,7 @@ <h1>ol-ext: Geoportail vector tile</h1>
   }
   tooltip.setInfo(info);
   //console.log(feature.getProperties());
-  // Select feature 
+  // Select feature
   if (showGeom) {
     var coords = [];
     if (feature instanceof ol.Feature) {
@@ -189,7 +189,7 @@ <h1>ol-ext: Geoportail vector tile</h1>
           coords = coords;
           break;
         }
-        case 'MultiLineString' : 
+        case 'MultiLineString' :
         case 'Polygon' : {
           coords = [coords];
           break;
@@ -208,6 +208,6 @@ <h1>ol-ext: Geoportail vector tile</h1>
 });
 
   </script>
-  
+
 </body>
 </html>
diff --git a/examples/layer/map.layer.gppvtile.html b/examples/layer/map.layer.gppvtile.html
@@ -2,12 +2,12 @@
 <html>
 <head>
 <!--
-  Copyright (c) 2019 Jean-Marc VIGLINO, 
+  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
@@ -28,7 +28,7 @@
   <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.js"></script>
+  <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" />
@@ -39,7 +39,7 @@
   <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>
@@ -50,7 +50,7 @@
 
   <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>
@@ -110,7 +110,7 @@ <h2>Choisir une couleur</h2>
     <option value="color" style="display: none;">user color</option>
     <option value="color">user color</option>
   </select>
-  
+
   <script src="./map.layer.gppvtile.js"></script>
 
 </body>

diff --git a/examples/layer/map.layer.gppvtile.js b/examples/layer/map.layer.gppvtile.js
@@ -225,7 +225,7 @@ function applyStyle() {
                   if (l.paint[c].stops) {
                     l.paint[c].stops.forEach(function (s) {
                       if (!(/#ffffff/i.test(s[1]) && /^saturate/.test(operation))) {
-                        s[1] = getChromaColor(chroma(s[1])[operation](opt)); 
+                        s[1] = getChromaColor(chroma(s[1])[operation](opt));
                       }
                       // console.log('STOP:',s)
                     })
@@ -245,20 +245,29 @@ function applyStyle() {
                 try {
                   if (l.paint[c].stops) {
                     l.paint[c].stops.forEach(function (s) {
-                      s[1] = getChromaColor(chroma.mix(s[1],color)); 
+                      s[1] = getChromaColor(chroma.mix(s[1],color));
                     })
                   } else {
-                    l.paint[c] = getChromaColor(chroma.mix(l.paint[c],color)); 
+                    l.paint[c] = getChromaColor(chroma.mix(l.paint[c],color));
                   }
                 } catch(e) {};
-                break; 
+                break;
               }
             }
           }
         });
       })
     }
   }
+
+  // trigger tile refresh by incrementing style id, see: https://github.com/openlayers/ol-mapbox-style/issues/959
+  try {
+    currentStyle["id"] = currentStyle["id"] + 1;
+  }
+  catch {
+    currentStyle["id"] = 0;
+  }
+
   olms.applyStyle(vlayer, currentStyle, "plan_ign");
 }
 
@@ -367,7 +376,7 @@ selStyle.push(new ol.style.Style({
     return new ol.geom.Point(f.getGeometry().getFirstCoordinate())
   }
 }))
-var select = new ol.layer.Vector({ 
+var select = new ol.layer.Vector({
   source: new ol.source.Vector(),
   style: selStyle
 });
@@ -383,7 +392,7 @@ map.on('click', function() {
 var tooltip  = new ol.Overlay.Tooltip({ className: 'default', positioning: 'bottom-center' });
 map.addOverlay(tooltip);
 
-var hover = new ol.interaction.Hover({ 
+var hover = new ol.interaction.Hover({
   cursor: "pointer",
   layers: [vlayer]
 });
@@ -407,7 +416,7 @@ hover.on("enter", function(e) {
   }
   tooltip.setInfo(info);
   //console.log(feature.getProperties());
-  // Select feature 
+  // Select feature
   if (showGeom) {
     var coords = [];
     if (feature instanceof ol.Feature) {
@@ -427,7 +436,7 @@ hover.on("enter", function(e) {
           coords = coords;
           break;
         }
-        case 'MultiLineString' : 
+        case 'MultiLineString' :
         case 'Polygon' : {
           coords = [coords];
           break;