589 lines
21 KiB
HTML
589 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
|
|
|
<link rel="stylesheet" href="blend-modes.css">
|
|
<script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
|
|
<title>Blend modes example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="navbar" role="navigation">
|
|
<div class="container" id="navbar-inner-container">
|
|
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<form class="form-horizontal">
|
|
<label>
|
|
<select id="blend-mode" class="form-control">
|
|
<option value="source-over">source-over (default)</option>
|
|
<option>source-in</option>
|
|
<option>source-out</option>
|
|
<option>source-atop</option>
|
|
<option>destination-over</option>
|
|
<option>destination-in</option>
|
|
<option>destination-out</option>
|
|
<option>destination-atop</option>
|
|
<option>lighter</option>
|
|
<option>copy</option>
|
|
<option>xor</option>
|
|
<option>multiply</option>
|
|
<option>screen</option>
|
|
<option>overlay</option>
|
|
<option>darken</option>
|
|
<option>lighten</option>
|
|
<option>color-dodge</option>
|
|
<option>color-burn</option>
|
|
<option>hard-light</option>
|
|
<option>soft-light</option>
|
|
<option selected>difference</option>
|
|
<option>exclusion</option>
|
|
<option>hue</option>
|
|
<option>saturation</option>
|
|
<option>color</option>
|
|
<option>luminosity</option>
|
|
</select>
|
|
Canvas compositing / blending mode
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-red" checked>
|
|
Red circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-green" checked>
|
|
Green circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-blue" checked>
|
|
Blue circle affected
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<h4 id="title">Blend modes example</h4>
|
|
<p id="shortdesc">Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.</p>
|
|
<div id="docs"><p>This example shows how to change the canvas compositing / blending mode in post- and precompose event handlers. The Canvas 2D API provides the property <code>globalCompositeOperation</code> with which one can influence which composition operation will be used when drawing on the canvas. The various options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN documentation page</a>.</p>
|
|
<p>In this example three circles on the corners of an equilateral triangle are drawn with red, green or blue styles respectively. By setting the <code>globalCompositeOperation</code> you can change how these colors turn out when they are combined on the map.</p>
|
|
<p>You can select an operation in the select-field and you can also control which layers will be affected by the chosen operation through the layer checkboxes.</p>
|
|
</div>
|
|
<div id="tags">blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector</div>
|
|
<div id="api-links">Related API documentation: <ul class="inline"><li><a href="../apidoc/ol.Feature.html" title="API documentation for ol.Feature">ol.Feature</a></li>,<li><a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a></li>,<li><a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a></li>,<li><a href="../apidoc/ol.geom.Point.html" title="API documentation for ol.geom.Point">ol.geom.Point</a></li>,<li><a href="../apidoc/ol.layer.Vector.html" title="API documentation for ol.layer.Vector">ol.layer.Vector</a></li>,<li><a href="../apidoc/ol.source.Vector.html" title="API documentation for ol.source.Vector">ol.source.Vector</a></li>,<li><a href="../apidoc/ol.style.Circle.html" title="API documentation for ol.style.Circle">ol.style.Circle</a></li>,<li><a href="../apidoc/ol.style.Fill.html" title="API documentation for ol.style.Fill">ol.style.Fill</a></li>,<li><a href="../apidoc/ol.style.Stroke.html" title="API documentation for ol.style.Stroke">ol.style.Stroke</a></li>,<li><a href="../apidoc/ol.style.Style.html" title="API documentation for ol.style.Style">ol.style.Style</a></li></ul></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div id="source-controls">
|
|
<a id="copy-button"><i class="fa fa-clipboard"></i> Copy</a>
|
|
<a id="jsfiddle-button"><i class="fa fa-jsfiddle"></i> Edit</a>
|
|
</div>
|
|
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
|
|
<textarea class="hidden" name="js">// Create separate layers for red, green an blue circles.
|
|
//
|
|
// Every layer has one feature that is styled with a circle, together the
|
|
// features form the corners of an equilateral triangle and their styles overlap
|
|
var redLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [new ol.Feature(new ol.geom.Point([0, 0]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255,0,0,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(255,0,0)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
var greenLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
// 433.013 is roughly 250 * Math.sqrt(3)
|
|
features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(0,255,0,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(0,255,0)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
var blueLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [new ol.Feature(new ol.geom.Point([500, 0]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(0,0,255,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(0,0,255)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
|
|
// Create the map, the view is centered on the triangle. Zooming and panning is
|
|
// restricted to a sane area
|
|
var map = new ol.Map({
|
|
layers: [
|
|
redLayer,
|
|
greenLayer,
|
|
blueLayer
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [250, 220],
|
|
extent: [0, 0, 500, 500],
|
|
resolution: 4,
|
|
minResolution: 2,
|
|
maxResolution: 32
|
|
})
|
|
});
|
|
|
|
|
|
// Various helper methods and event handlers
|
|
/**
|
|
* This method sets the globalCompositeOperation to the value of the select
|
|
* field and it is bound to the precompose event of the layers.
|
|
*
|
|
* @param {ol.render.Event} evt The render event.
|
|
*/
|
|
var setBlendModeFromSelect = function(evt) {
|
|
evt.context.globalCompositeOperation = select.value;
|
|
};
|
|
|
|
|
|
/**
|
|
* This method resets the globalCompositeOperation to the default value of
|
|
* 'source-over' and it is bound to the postcompose event of the layers.
|
|
*
|
|
* @param {ol.render.Event} evt The render event.
|
|
*/
|
|
var resetBlendModeFromSelect = function(evt) {
|
|
evt.context.globalCompositeOperation = 'source-over';
|
|
};
|
|
|
|
|
|
/**
|
|
* Bind the pre- and postcompose handlers to the passed layer.
|
|
*
|
|
* @param {ol.layer.Vector} layer The layer to bind the handlers to.
|
|
*/
|
|
var bindLayerListeners = function(layer) {
|
|
layer.on('precompose', setBlendModeFromSelect);
|
|
layer.on('postcompose', resetBlendModeFromSelect);
|
|
};
|
|
|
|
|
|
/**
|
|
* Unind the pre- and postcompose handlers to the passed layers.
|
|
*
|
|
* @param {ol.layer.Vector} layer The layer to unbind the handlers from.
|
|
*/
|
|
var unbindLayerListeners = function(layer) {
|
|
layer.un('precompose', setBlendModeFromSelect);
|
|
layer.un('postcompose', resetBlendModeFromSelect);
|
|
};
|
|
|
|
|
|
/**
|
|
* Handler for the click event of the 'affect-XXX' checkboxes.
|
|
*
|
|
* @this {HTMLInputElement}
|
|
*/
|
|
var affectLayerClicked = function() {
|
|
var layer;
|
|
if (this.id == 'affect-red') {
|
|
layer = redLayer;
|
|
} else if (this.id == 'affect-green') {
|
|
layer = greenLayer;
|
|
} else {
|
|
layer = blueLayer;
|
|
}
|
|
if (this.checked) {
|
|
bindLayerListeners(layer);
|
|
} else {
|
|
unbindLayerListeners(layer);
|
|
}
|
|
map.render();
|
|
};
|
|
|
|
|
|
// Get the form elements and bind the listeners
|
|
var select = document.getElementById('blend-mode');
|
|
var affectRed = document.getElementById('affect-red');
|
|
var affectGreen = document.getElementById('affect-green');
|
|
var affectBlue = document.getElementById('affect-blue');
|
|
|
|
// Rerender map when blend mode changes
|
|
select.addEventListener('change', function() {
|
|
map.render();
|
|
});
|
|
|
|
// Unbind / bind listeners depending on the checked state when the checkboxes
|
|
// are clicked
|
|
affectRed.addEventListener('click', affectLayerClicked);
|
|
affectGreen.addEventListener('click', affectLayerClicked);
|
|
affectBlue.addEventListener('click', affectLayerClicked);
|
|
|
|
// Initially bind listeners
|
|
bindLayerListeners(redLayer);
|
|
bindLayerListeners(greenLayer);
|
|
bindLayerListeners(blueLayer);
|
|
</textarea>
|
|
<textarea class="hidden" name="css">.map{
|
|
background-repeat: repeat;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
|
|
}
|
|
</textarea>
|
|
<textarea class="hidden" name="html"><div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<form class="form-horizontal">
|
|
<label>
|
|
<select id="blend-mode" class="form-control">
|
|
<option value="source-over">source-over (default)</option>
|
|
<option>source-in</option>
|
|
<option>source-out</option>
|
|
<option>source-atop</option>
|
|
<option>destination-over</option>
|
|
<option>destination-in</option>
|
|
<option>destination-out</option>
|
|
<option>destination-atop</option>
|
|
<option>lighter</option>
|
|
<option>copy</option>
|
|
<option>xor</option>
|
|
<option>multiply</option>
|
|
<option>screen</option>
|
|
<option>overlay</option>
|
|
<option>darken</option>
|
|
<option>lighten</option>
|
|
<option>color-dodge</option>
|
|
<option>color-burn</option>
|
|
<option>hard-light</option>
|
|
<option>soft-light</option>
|
|
<option selected>difference</option>
|
|
<option>exclusion</option>
|
|
<option>hue</option>
|
|
<option>saturation</option>
|
|
<option>color</option>
|
|
<option>luminosity</option>
|
|
</select>
|
|
Canvas compositing / blending mode
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-red" checked>
|
|
Red circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-green" checked>
|
|
Green circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-blue" checked>
|
|
Blue circle affected
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</textarea>
|
|
<input type="hidden" name="wrap" value="l">
|
|
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,http://openlayers.org/en/v3.9.0/css/ol.css,http://openlayers.org/en/v3.9.0/build/ol.js">
|
|
</form>
|
|
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Blend modes example</title>
|
|
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
|
|
<script src="http://openlayers.org/en/v3.9.0/build/ol.js"></script>
|
|
|
|
<style>
|
|
.map{
|
|
background-repeat: repeat;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<form class="form-horizontal">
|
|
<label>
|
|
<select id="blend-mode" class="form-control">
|
|
<option value="source-over">source-over (default)</option>
|
|
<option>source-in</option>
|
|
<option>source-out</option>
|
|
<option>source-atop</option>
|
|
<option>destination-over</option>
|
|
<option>destination-in</option>
|
|
<option>destination-out</option>
|
|
<option>destination-atop</option>
|
|
<option>lighter</option>
|
|
<option>copy</option>
|
|
<option>xor</option>
|
|
<option>multiply</option>
|
|
<option>screen</option>
|
|
<option>overlay</option>
|
|
<option>darken</option>
|
|
<option>lighten</option>
|
|
<option>color-dodge</option>
|
|
<option>color-burn</option>
|
|
<option>hard-light</option>
|
|
<option>soft-light</option>
|
|
<option selected>difference</option>
|
|
<option>exclusion</option>
|
|
<option>hue</option>
|
|
<option>saturation</option>
|
|
<option>color</option>
|
|
<option>luminosity</option>
|
|
</select>
|
|
Canvas compositing / blending mode
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-red" checked>
|
|
Red circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-green" checked>
|
|
Green circle affected
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="affect-blue" checked>
|
|
Blue circle affected
|
|
</label>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
// Create separate layers for red, green an blue circles.
|
|
//
|
|
// Every layer has one feature that is styled with a circle, together the
|
|
// features form the corners of an equilateral triangle and their styles overlap
|
|
var redLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [new ol.Feature(new ol.geom.Point([0, 0]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(255,0,0,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(255,0,0)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
var greenLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
// 433.013 is roughly 250 * Math.sqrt(3)
|
|
features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(0,255,0,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(0,255,0)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
var blueLayer = new ol.layer.Vector({
|
|
source: new ol.source.Vector({
|
|
features: [new ol.Feature(new ol.geom.Point([500, 0]))]
|
|
}),
|
|
style: new ol.style.Style({
|
|
image: new ol.style.Circle({
|
|
fill: new ol.style.Fill({
|
|
color: 'rgba(0,0,255,0.8)'
|
|
}),
|
|
stroke: new ol.style.Stroke({
|
|
color: 'rgb(0,0,255)',
|
|
width: 15
|
|
}),
|
|
radius: 120
|
|
})
|
|
})
|
|
});
|
|
|
|
// Create the map, the view is centered on the triangle. Zooming and panning is
|
|
// restricted to a sane area
|
|
var map = new ol.Map({
|
|
layers: [
|
|
redLayer,
|
|
greenLayer,
|
|
blueLayer
|
|
],
|
|
target: 'map',
|
|
view: new ol.View({
|
|
center: [250, 220],
|
|
extent: [0, 0, 500, 500],
|
|
resolution: 4,
|
|
minResolution: 2,
|
|
maxResolution: 32
|
|
})
|
|
});
|
|
|
|
|
|
// Various helper methods and event handlers
|
|
/**
|
|
* This method sets the globalCompositeOperation to the value of the select
|
|
* field and it is bound to the precompose event of the layers.
|
|
*
|
|
* @param {ol.render.Event} evt The render event.
|
|
*/
|
|
var setBlendModeFromSelect = function(evt) {
|
|
evt.context.globalCompositeOperation = select.value;
|
|
};
|
|
|
|
|
|
/**
|
|
* This method resets the globalCompositeOperation to the default value of
|
|
* 'source-over' and it is bound to the postcompose event of the layers.
|
|
*
|
|
* @param {ol.render.Event} evt The render event.
|
|
*/
|
|
var resetBlendModeFromSelect = function(evt) {
|
|
evt.context.globalCompositeOperation = 'source-over';
|
|
};
|
|
|
|
|
|
/**
|
|
* Bind the pre- and postcompose handlers to the passed layer.
|
|
*
|
|
* @param {ol.layer.Vector} layer The layer to bind the handlers to.
|
|
*/
|
|
var bindLayerListeners = function(layer) {
|
|
layer.on('precompose', setBlendModeFromSelect);
|
|
layer.on('postcompose', resetBlendModeFromSelect);
|
|
};
|
|
|
|
|
|
/**
|
|
* Unind the pre- and postcompose handlers to the passed layers.
|
|
*
|
|
* @param {ol.layer.Vector} layer The layer to unbind the handlers from.
|
|
*/
|
|
var unbindLayerListeners = function(layer) {
|
|
layer.un('precompose', setBlendModeFromSelect);
|
|
layer.un('postcompose', resetBlendModeFromSelect);
|
|
};
|
|
|
|
|
|
/**
|
|
* Handler for the click event of the 'affect-XXX' checkboxes.
|
|
*
|
|
* @this {HTMLInputElement}
|
|
*/
|
|
var affectLayerClicked = function() {
|
|
var layer;
|
|
if (this.id == 'affect-red') {
|
|
layer = redLayer;
|
|
} else if (this.id == 'affect-green') {
|
|
layer = greenLayer;
|
|
} else {
|
|
layer = blueLayer;
|
|
}
|
|
if (this.checked) {
|
|
bindLayerListeners(layer);
|
|
} else {
|
|
unbindLayerListeners(layer);
|
|
}
|
|
map.render();
|
|
};
|
|
|
|
|
|
// Get the form elements and bind the listeners
|
|
var select = document.getElementById('blend-mode');
|
|
var affectRed = document.getElementById('affect-red');
|
|
var affectGreen = document.getElementById('affect-green');
|
|
var affectBlue = document.getElementById('affect-blue');
|
|
|
|
// Rerender map when blend mode changes
|
|
select.addEventListener('change', function() {
|
|
map.render();
|
|
});
|
|
|
|
// Unbind / bind listeners depending on the checked state when the checkboxes
|
|
// are clicked
|
|
affectRed.addEventListener('click', affectLayerClicked);
|
|
affectGreen.addEventListener('click', affectLayerClicked);
|
|
affectBlue.addEventListener('click', affectLayerClicked);
|
|
|
|
// Initially bind listeners
|
|
bindLayerListeners(redLayer);
|
|
bindLayerListeners(greenLayer);
|
|
bindLayerListeners(blueLayer);
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
|
<script src="./resources/common.js"></script>
|
|
<script src="./resources/prism/prism.min.js"></script>
|
|
<script src="loader.js?id=blend-modes"></script>
|
|
|
|
</body>
|
|
</html>
|