Skip to content

Commit

Permalink
[UPD] Swipe WebGL layer (clear first) #1051 #1052
Browse files Browse the repository at this point in the history
  • Loading branch information
Viglino committed Apr 18, 2024
1 parent 3c2d09b commit d561be9
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 9 deletions.
18 changes: 14 additions & 4 deletions dist/ol-ext.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion dist/ol-ext.min.js

Large diffs are not rendered by default.

97 changes: 97 additions & 0 deletions examples/control/map.control.swipe-cog.html
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 14 additions & 4 deletions src/control/Swipe.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down

0 comments on commit d561be9

Please sign in to comment.