mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-02-01 17:46:22 +00:00
[ADD] texture filter
This commit is contained in:
Jean-Marc Viglino
parent
0bfd771d9b
commit
8c0b5e2aac
@ -50,7 +50,7 @@
|
||||
<br />
|
||||
You can customize effetcs, colors and intensity (value) of the filters.
|
||||
<br />
|
||||
Predefined filters are avaliable (grayscale, sepia, invert).
|
||||
Predefined filters are avaliable as shortcut (grayscale, sepia, invert).
|
||||
</div>
|
||||
|
||||
<!-- Map div -->
|
||||
|
||||
111
examples/map.filter.texture.html
Normal file
111
examples/map.filter.texture.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<!----------------------------------------------------------
|
||||
|
||||
Copyright (c) 2016 Jean-Marc VIGLINO,
|
||||
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
||||
|
||||
------------------------------------------------------------>
|
||||
<html>
|
||||
<head>
|
||||
<title>OL3-ext: Texture filter </title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<meta name="description" content="Crop and mask filter on an ol map or layer." />
|
||||
<meta name="keywords" content="ol3, filter, crop, mask" />
|
||||
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<!-- jQuery -->
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<!-- FontAwesome -->
|
||||
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css" />
|
||||
|
||||
<!-- OL3 -->
|
||||
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" />
|
||||
<script type="text/javascript" src="http://openlayers.org/en/master/build/ol.js"></script>
|
||||
|
||||
<!-- filters -->
|
||||
<script type="text/javascript" src="../filter/filter.js"></script>
|
||||
<script type="text/javascript" src="../filter/texturefilter.js"></script>
|
||||
<script type="text/javascript" src="../filter/texturefilterimage.js"></script>
|
||||
|
||||
<style>
|
||||
input[type="range"]
|
||||
{ vertical-align: middle;
|
||||
}
|
||||
input[type="number"]
|
||||
{ width:4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body >
|
||||
<a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
||||
|
||||
<a href="../index.html">
|
||||
<h1>OL3-ext: Texture filter</h1>
|
||||
</a>
|
||||
<div class="info">
|
||||
<i>ol.filter.Texture</i> add a texture effect on the map.
|
||||
</div>
|
||||
|
||||
<!-- Map div -->
|
||||
<div id="map" style="width:600px; height:400px;"></div>
|
||||
|
||||
<div class="options" >
|
||||
<ul><li>
|
||||
Texture:
|
||||
<select id="texture" onchange="setFilter()">
|
||||
<option value="stone">stone</option>
|
||||
<option value="rust">rust</option>
|
||||
<option value="metal">metal</option>
|
||||
<option value="wood">wood</option>
|
||||
<option value="cardboard">cardboard</option>
|
||||
<option value="notebook">notebook</option>
|
||||
<option value="http://opengameart.org/sites/default/files/parchment-gold.png.preview.jpg">parchemin</option>
|
||||
<option value="http://opengameart.org/sites/default/files/WhiteIrregular_T.jpg">paving</option>
|
||||
</select>
|
||||
</li><li>
|
||||
<input id="active" type="checkbox" checked="checked" /><label for="active"> active</label>
|
||||
</li><li>
|
||||
<input id="rotate" type="checkbox" checked="checked" /><label for="rotate"> rotate with view</label>
|
||||
</li><li>
|
||||
Opacity: <input id="opacity" type="range" min="0" max="1" step="0.1" value="0.7" />
|
||||
</li></ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("input").on('change', setFilter);
|
||||
|
||||
var osm = new ol.layer.Tile({ source: new ol.source.OSM() });
|
||||
// The map
|
||||
var map = new ol.Map
|
||||
({ target: 'map',
|
||||
view: new ol.View
|
||||
({ zoom: 8,
|
||||
center: [247044, 6549736.]
|
||||
}),
|
||||
layers:
|
||||
[ new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) }),
|
||||
osm
|
||||
]
|
||||
});
|
||||
|
||||
// Custom filter
|
||||
var filter = new ol.filter.Texture();
|
||||
map.addFilter(filter);
|
||||
|
||||
function setFilter()
|
||||
{ filter.setActive($("#active").prop('checked'));
|
||||
filter.setFilter(
|
||||
{ src: $("#texture").val(),
|
||||
rotateWithView: $("#rotate").prop('checked'),
|
||||
opacity: Number($("#opacity").val())
|
||||
});
|
||||
}
|
||||
setFilter();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
140
filter/texturefilter.js
Normal file
140
filter/texturefilter.js
Normal file
@ -0,0 +1,140 @@
|
||||
/* Copyright (c) 2016 Jean-Marc VIGLINO,
|
||||
released under the CeCILL-B license (French BSD license)
|
||||
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
|
||||
*/
|
||||
/** Add texture effects on maps or layers
|
||||
* @requires ol.filter
|
||||
* @extends {ol.filter.Base}
|
||||
* @param {ol.filter.cropOptions}
|
||||
* - feature {ol.Feature} feature to mask with
|
||||
* - fill {ol.style.Fill} style to fill with
|
||||
* - inner {bool} mask inner, default false
|
||||
*/
|
||||
ol.filter.Texture = function(options)
|
||||
{ ol.filter.Base.call(this, options);
|
||||
|
||||
this.setFilter(options);
|
||||
}
|
||||
ol.inherits(ol.filter.Texture, ol.filter.Base);
|
||||
|
||||
/** Set texture
|
||||
* @option {ol.filter.TextureOptions}
|
||||
* - img {Image | undefined} Image object for the texture
|
||||
* - src {string} Image source URI
|
||||
* - rotateWithView {bool} Whether to rotate the texttue with the view. Default is true.
|
||||
* - crossOrigin {null | string | undefined} The crossOrigin attribute for loaded images.
|
||||
* todo: scale, ...
|
||||
*/
|
||||
ol.filter.Texture.prototype.setFilter = function(options)
|
||||
{ var img;
|
||||
options = options || {};
|
||||
if (options.img) img = option.img;
|
||||
else
|
||||
{ img = new Image();
|
||||
img.src = ol.filter.Texture[options.src] || options.src;
|
||||
img.crossOrigin = options.crossOrigin || null;
|
||||
}
|
||||
|
||||
this.set('rotateWithView', options.rotateWithView !== false);
|
||||
this.set('opacity', typeof(options.opacity)=='number' ? options.opacity : 1);
|
||||
|
||||
this.set('ready', false);
|
||||
var self = this;
|
||||
function setPattern(img)
|
||||
{ self.pattern = {};
|
||||
self.pattern.canvas = document.createElement('canvas');
|
||||
self.pattern.canvas.width = img.width;
|
||||
self.pattern.canvas.height = img.height;
|
||||
self.pattern.ctx = self.pattern.canvas.getContext("2d");
|
||||
self.pattern.ctx.fillStyle = self.pattern.ctx.createPattern(img, 'repeat');
|
||||
// Force refresh
|
||||
self.set('ready', true);
|
||||
};
|
||||
|
||||
if (img.width)
|
||||
{ setPattern(img);
|
||||
}
|
||||
else
|
||||
{ img.onload = function()
|
||||
{ setPattern(img);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Get translated pattern
|
||||
* @param {number} x offset
|
||||
* @param {number} y offset
|
||||
*/
|
||||
ol.filter.Texture.prototype.getPattern = function (offsetX, offsetY)
|
||||
{ var c = this.pattern.canvas;
|
||||
var ctx = this.pattern.ctx;
|
||||
ctx.save();
|
||||
ctx.translate(-offsetX, offsetY);
|
||||
ctx.beginPath();
|
||||
ctx.rect(offsetX, -offsetY, c.width, c.height);
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return ctx.createPattern(c, 'repeat');
|
||||
}
|
||||
|
||||
/** Draw pattern over the map on postcompose
|
||||
*/
|
||||
ol.filter.Texture.prototype.postcompose = function(e)
|
||||
{ // not ready
|
||||
if (!this.pattern) return;
|
||||
|
||||
// Set back color hue
|
||||
var ctx = e.context;
|
||||
var canvas = ctx.canvas;
|
||||
|
||||
var m = 1.5 * Math.max(canvas.width, canvas.height);
|
||||
var mt = e.frameState.pixelToCoordinateMatrix;
|
||||
var res = e.frameState.viewState.resolution;
|
||||
var w = canvas.width/2,
|
||||
h = canvas.height/2;
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.globalCompositeOperation = "multiply";
|
||||
//ctx.globalCompositeOperation = "overlay";
|
||||
//ctx.globalCompositeOperation = "color";
|
||||
ctx.globalAlpha = this.get('opacity');
|
||||
|
||||
if (this.get('rotateWithView'))
|
||||
{ // Translate pattern
|
||||
ctx.fillStyle = this.getPattern ((w*mt[0] + h*mt[1] + mt[12])/res, (w*mt[4] + h*mt[5] + mt[13])/res);
|
||||
|
||||
// Rotate on canvas center and fill
|
||||
ctx.translate(w, h);
|
||||
ctx.rotate(e.frameState.viewState.rotation);
|
||||
ctx.beginPath();
|
||||
ctx.rect(-w-m, -h-m, 2*m, 2*m);
|
||||
ctx.fill();
|
||||
}
|
||||
else
|
||||
{ var dx = -(w*mt[0] + h*mt[1] + mt[12])/res;
|
||||
var dy = (w*mt[4] + h*mt[5] + mt[13])/res;
|
||||
var cos = Math.cos(e.frameState.viewState.rotation);
|
||||
var sin = Math.sin(e.frameState.viewState.rotation);
|
||||
var offsetX = dx*cos - dy*sin;
|
||||
var offsetY = dx*sin + dy*cos;
|
||||
|
||||
ctx.translate(offsetX, offsetY);
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = this.pattern.ctx.fillStyle
|
||||
ctx.rect(-offsetX -m , -offsetY -m, 2*m, 2*m);
|
||||
ctx.fill();
|
||||
}
|
||||
/* old version without centered rotation
|
||||
var offsetX = -(e.frameState.extent[0]/res) % this.pattern.canvas.width;
|
||||
var offsetY = (e.frameState.extent[1]/res) % this.pattern.canvas.height;
|
||||
ctx.rotate(e.frameState.viewState.rotation);
|
||||
ctx.translate(offsetX, offsetY);
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = this.pattern.ctx.fillStyle
|
||||
ctx.rect(-offsetX -m , -offsetY -m, 2*m, 2*m);
|
||||
ctx.fill();
|
||||
*/
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
16
filter/texturefilterimage.js
Normal file
16
filter/texturefilterimage.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user