[UPD] Swipe WebGL layer (clear first) #1051 #1052

Viglino · Apr 18, 2024 · d561be9 · d561be9
1 parent 3c2d09b
commit d561be9
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 9 deletions.
diff --git a/dist/ol-ext.js b/dist/ol-ext.js
@@ -17847,8 +17847,11 @@ ol.control.Swipe = class olcontrolSwipe extends ol.control.Control {
     if (ctx instanceof WebGLRenderingContext) {
       if (e.type === 'prerender') {
         // Clear
-        ctx.clearColor(0, 0, 0, 0);
-        ctx.clear(ctx.COLOR_BUFFER_BIT);
+        if (this._time != e.frameState.time) {
+          ctx.clearColor(0, 0, 0, 0);
+          ctx.clear(ctx.COLOR_BUFFER_BIT);
+          this._time = e.frameState.time
+        }
         // Clip
         ctx.enable(ctx.SCISSOR_TEST);
         var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
@@ -17867,6 +17870,8 @@ ol.control.Swipe = class olcontrolSwipe extends ol.control.Control {
           bottomLeft[1] += fullHeight - height;
         }
         ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
+        ctx.clearColor(0, 0, 0, 0);
+        ctx.clear(ctx.COLOR_BUFFER_BIT);
       }
     } else {
       var size = e.frameState.size;
@@ -17895,8 +17900,11 @@ ol.control.Swipe = class olcontrolSwipe extends ol.control.Control {
     if (ctx instanceof WebGLRenderingContext) {
       if (e.type === 'prerender') {
         // Clear
-        ctx.clearColor(0, 0, 0, 0);
-        ctx.clear(ctx.COLOR_BUFFER_BIT);
+        if (this._time != e.frameState.time) {
+          ctx.clearColor(0, 0, 0, 0);
+          ctx.clear(ctx.COLOR_BUFFER_BIT);
+          this._time = e.frameState.time
+        }
         // Clip
         ctx.enable(ctx.SCISSOR_TEST);
         var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
@@ -17915,6 +17923,8 @@ ol.control.Swipe = class olcontrolSwipe extends ol.control.Control {
           height = Math.round(fullHeight * (1 - this.get('position')));
         }
         ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
+        ctx.clearColor(0, 0, 0, 0);
+        ctx.clear(ctx.COLOR_BUFFER_BIT);
       }
     } else {
       var size = e.frameState.size;

diff --git a/dist/ol-ext.min.js b/dist/ol-ext.min.js
diff --git a/examples/control/map.control.swipe-cog.html b/examples/control/map.control.swipe-cog.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <!--
+  Copyright (c) 2015-2019 Jean-Marc VIGLINO, 
+  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
+-->
+  <title>ol-ext: Swipe control</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+  <meta name="description" content="ol.control.Permalink add a premalink control to the map." />
+  <meta name="keywords" content="ol3, control, swipe, compare" />
+
+  <link rel="stylesheet" href="../style.css" />
+
+  <!-- jQuery -->
+  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
+
+  <!-- Openlayers -->
+  <link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
+  <script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></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>
+
+</head>
+
+<body>
+  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
+
+  <a href="../../index.html">
+    <h1>ol-ext: Swipe control</h1>
+  </a>
+  <div class="info">
+    <i>ol.control.Swipe</i> is a control that add a split screen to compare two map overlays.
+    <br />
+    Layers can be added to left (top) or right (bottom) side of the map.
+    Layers that are not added are displayed on both sides.
+  </div>
+
+  <!-- Map div -->
+  <div id="map" style="width:600px; height:400px;"></div>
+
+  <div class="options">
+    <ul>
+      <li>
+        <input id="ori" type="checkbox" onchange="ctrl.set('orientation',$(this).prop('checked')?'horizontal':'vertical')" /><label
+          for="ori"> horizontal swipe</label>
+      </li>
+      <li>
+        <button type="button" onclick="ctrl.set('position', 0.5);">Reset position</button>
+      </li>
+    </ul>
+  </div>
+
+  <script type="text/javascript">
+
+    var source1 = new ol.source.GeoTIFF({
+      sources: [
+        { url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif' }
+      ]
+    })
+    var cogLeft = new ol.layer.WebGLTile({
+      title: 'left',
+      source: source1
+    });
+    var cogRight = new ol.layer.WebGLTile({
+      title: 'right',
+      source: new ol.source.GeoTIFF({
+        sources: [
+          { url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif' }
+        ]
+      })
+    });
+    // The map
+    var map = new ol.Map({
+      target: 'map',
+      view: source1.getView(),
+      layers:[cogLeft,cogRight]
+    });
+
+    var ctrl = new ol.control.Swipe();
+    map.addControl(ctrl);
+    ctrl.addLayer(cogRight, true);
+    ctrl.addLayer(cogLeft, false);
+
+    map.addControl(new ol.control.LayerSwitcher)
+  </script>
+
+</body>
+
+</html>
diff --git a/src/control/Swipe.js b/src/control/Swipe.js
@@ -305,8 +305,11 @@ var ol_control_Swipe = class olcontrolSwipe extends ol_control_Control {
     if (ctx instanceof WebGLRenderingContext) {
       if (e.type === 'prerender') {
         // Clear
-        ctx.clearColor(0, 0, 0, 0);
-        ctx.clear(ctx.COLOR_BUFFER_BIT);
+        if (this._time != e.frameState.time) {
+          ctx.clearColor(0, 0, 0, 0);
+          ctx.clear(ctx.COLOR_BUFFER_BIT);
+          this._time = e.frameState.time
+        }
 
         // Clip
         ctx.enable(ctx.SCISSOR_TEST);
@@ -330,6 +333,8 @@ var ol_control_Swipe = class olcontrolSwipe extends ol_control_Control {
           bottomLeft[1] += fullHeight - height;
         }
         ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
+        ctx.clearColor(0, 0, 0, 0);
+        ctx.clear(ctx.COLOR_BUFFER_BIT);
       }
     } else {
       var size = e.frameState.size;
@@ -358,8 +363,11 @@ var ol_control_Swipe = class olcontrolSwipe extends ol_control_Control {
     if (ctx instanceof WebGLRenderingContext) {
       if (e.type === 'prerender') {
         // Clear
-        ctx.clearColor(0, 0, 0, 0);
-        ctx.clear(ctx.COLOR_BUFFER_BIT);
+        if (this._time != e.frameState.time) {
+          ctx.clearColor(0, 0, 0, 0);
+          ctx.clear(ctx.COLOR_BUFFER_BIT);
+          this._time = e.frameState.time
+        }
 
         // Clip
         ctx.enable(ctx.SCISSOR_TEST);
@@ -383,6 +391,8 @@ var ol_control_Swipe = class olcontrolSwipe extends ol_control_Control {
           height = Math.round(fullHeight * (1 - this.get('position')));
         }
         ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
+        ctx.clearColor(0, 0, 0, 0);
+        ctx.clear(ctx.COLOR_BUFFER_BIT);
       }
     } else {
       var size = e.frameState.size;