ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
gh-pages
openlayers/vectortile/examples/blend-modes.html
Andreas Hocevar 1c53a46d7d Update vectortiles
2015-09-13 15:36:23 +09:00

589 lines
21 KiB
HTML
Raw Permalink Blame History

<!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">&nbsp;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: &#x27;rgba(255,0,0,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(255,0,0)&#x27;,
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: &#x27;rgba(0,255,0,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(0,255,0)&#x27;,
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: &#x27;rgba(0,0,255,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(0,0,255)&#x27;,
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: &#x27;map&#x27;,
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
* &#x27;source-over&#x27; 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 = &#x27;source-over&#x27;;
};
/**
* 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(&#x27;precompose&#x27;, setBlendModeFromSelect);
layer.on(&#x27;postcompose&#x27;, 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(&#x27;precompose&#x27;, setBlendModeFromSelect);
layer.un(&#x27;postcompose&#x27;, resetBlendModeFromSelect);
};
/**
* Handler for the click event of the &#x27;affect-XXX&#x27; checkboxes.
*
* @this {HTMLInputElement}
*/
var affectLayerClicked = function() {
var layer;
if (this.id == &#x27;affect-red&#x27;) {
layer = redLayer;
} else if (this.id == &#x27;affect-green&#x27;) {
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(&#x27;blend-mode&#x27;);
var affectRed = document.getElementById(&#x27;affect-red&#x27;);
var affectGreen = document.getElementById(&#x27;affect-green&#x27;);
var affectBlue = document.getElementById(&#x27;affect-blue&#x27;);
// Rerender map when blend mode changes
select.addEventListener(&#x27;change&#x27;, function() {
map.render();
});
// Unbind / bind listeners depending on the checked state when the checkboxes
// are clicked
affectRed.addEventListener(&#x27;click&#x27;, affectLayerClicked);
affectGreen.addEventListener(&#x27;click&#x27;, affectLayerClicked);
affectBlue.addEventListener(&#x27;click&#x27;, 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">&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;form class=&quot;form-horizontal&quot;&gt;
&lt;label&gt;
&lt;select id=&quot;blend-mode&quot; class=&quot;form-control&quot;&gt;
&lt;option value=&quot;source-over&quot;&gt;source-over (default)&lt;/option&gt;
&lt;option&gt;source-in&lt;/option&gt;
&lt;option&gt;source-out&lt;/option&gt;
&lt;option&gt;source-atop&lt;/option&gt;
&lt;option&gt;destination-over&lt;/option&gt;
&lt;option&gt;destination-in&lt;/option&gt;
&lt;option&gt;destination-out&lt;/option&gt;
&lt;option&gt;destination-atop&lt;/option&gt;
&lt;option&gt;lighter&lt;/option&gt;
&lt;option&gt;copy&lt;/option&gt;
&lt;option&gt;xor&lt;/option&gt;
&lt;option&gt;multiply&lt;/option&gt;
&lt;option&gt;screen&lt;/option&gt;
&lt;option&gt;overlay&lt;/option&gt;
&lt;option&gt;darken&lt;/option&gt;
&lt;option&gt;lighten&lt;/option&gt;
&lt;option&gt;color-dodge&lt;/option&gt;
&lt;option&gt;color-burn&lt;/option&gt;
&lt;option&gt;hard-light&lt;/option&gt;
&lt;option&gt;soft-light&lt;/option&gt;
&lt;option selected&gt;difference&lt;/option&gt;
&lt;option&gt;exclusion&lt;/option&gt;
&lt;option&gt;hue&lt;/option&gt;
&lt;option&gt;saturation&lt;/option&gt;
&lt;option&gt;color&lt;/option&gt;
&lt;option&gt;luminosity&lt;/option&gt;
&lt;/select&gt;
Canvas compositing / blending mode
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-red&quot; checked&gt;
Red circle affected
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-green&quot; checked&gt;
Green circle affected
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-blue&quot; checked&gt;
Blue circle affected
&lt;/label&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
</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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Blend modes example&lt;/title&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css"&gt;
&lt;script src="http://openlayers.org/en/v3.9.0/build/ol.js"&gt;&lt;/script&gt;
&lt;style&gt;
.map{
background-repeat: repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row-fluid&quot;&gt;
&lt;div class=&quot;span12&quot;&gt;
&lt;form class=&quot;form-horizontal&quot;&gt;
&lt;label&gt;
&lt;select id=&quot;blend-mode&quot; class=&quot;form-control&quot;&gt;
&lt;option value=&quot;source-over&quot;&gt;source-over (default)&lt;/option&gt;
&lt;option&gt;source-in&lt;/option&gt;
&lt;option&gt;source-out&lt;/option&gt;
&lt;option&gt;source-atop&lt;/option&gt;
&lt;option&gt;destination-over&lt;/option&gt;
&lt;option&gt;destination-in&lt;/option&gt;
&lt;option&gt;destination-out&lt;/option&gt;
&lt;option&gt;destination-atop&lt;/option&gt;
&lt;option&gt;lighter&lt;/option&gt;
&lt;option&gt;copy&lt;/option&gt;
&lt;option&gt;xor&lt;/option&gt;
&lt;option&gt;multiply&lt;/option&gt;
&lt;option&gt;screen&lt;/option&gt;
&lt;option&gt;overlay&lt;/option&gt;
&lt;option&gt;darken&lt;/option&gt;
&lt;option&gt;lighten&lt;/option&gt;
&lt;option&gt;color-dodge&lt;/option&gt;
&lt;option&gt;color-burn&lt;/option&gt;
&lt;option&gt;hard-light&lt;/option&gt;
&lt;option&gt;soft-light&lt;/option&gt;
&lt;option selected&gt;difference&lt;/option&gt;
&lt;option&gt;exclusion&lt;/option&gt;
&lt;option&gt;hue&lt;/option&gt;
&lt;option&gt;saturation&lt;/option&gt;
&lt;option&gt;color&lt;/option&gt;
&lt;option&gt;luminosity&lt;/option&gt;
&lt;/select&gt;
Canvas compositing / blending mode
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-red&quot; checked&gt;
Red circle affected
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-green&quot; checked&gt;
Green circle affected
&lt;/label&gt;
&lt;label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;affect-blue&quot; checked&gt;
Blue circle affected
&lt;/label&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
// 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: &#x27;rgba(255,0,0,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(255,0,0)&#x27;,
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: &#x27;rgba(0,255,0,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(0,255,0)&#x27;,
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: &#x27;rgba(0,0,255,0.8)&#x27;
}),
stroke: new ol.style.Stroke({
color: &#x27;rgb(0,0,255)&#x27;,
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: &#x27;map&#x27;,
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
* &#x27;source-over&#x27; 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 = &#x27;source-over&#x27;;
};
/**
* 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(&#x27;precompose&#x27;, setBlendModeFromSelect);
layer.on(&#x27;postcompose&#x27;, 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(&#x27;precompose&#x27;, setBlendModeFromSelect);
layer.un(&#x27;postcompose&#x27;, resetBlendModeFromSelect);
};
/**
* Handler for the click event of the &#x27;affect-XXX&#x27; checkboxes.
*
* @this {HTMLInputElement}
*/
var affectLayerClicked = function() {
var layer;
if (this.id == &#x27;affect-red&#x27;) {
layer = redLayer;
} else if (this.id == &#x27;affect-green&#x27;) {
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(&#x27;blend-mode&#x27;);
var affectRed = document.getElementById(&#x27;affect-red&#x27;);
var affectGreen = document.getElementById(&#x27;affect-green&#x27;);
var affectBlue = document.getElementById(&#x27;affect-blue&#x27;);
// Rerender map when blend mode changes
select.addEventListener(&#x27;change&#x27;, function() {
map.render();
});
// Unbind / bind listeners depending on the checked state when the checkboxes
// are clicked
affectRed.addEventListener(&#x27;click&#x27;, affectLayerClicked);
affectGreen.addEventListener(&#x27;click&#x27;, affectLayerClicked);
affectBlue.addEventListener(&#x27;click&#x27;, affectLayerClicked);
// Initially bind listeners
bindLayerListeners(redLayer);
bindLayerListeners(greenLayer);
bindLayerListeners(blueLayer);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</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>
Reference in New Issue View Git Blame Copy Permalink