mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-18 17:11:52 +00:00
151 lines
5.2 KiB
HTML
151 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<!--
|
||
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
|
||
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
||
-->
|
||
<title>ol-ext: Geoportail layer</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
||
<meta name="description" content="Geoportail layer for ol" />
|
||
<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />
|
||
|
||
<!-- 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/css/ol.css" />
|
||
<script type="text/javascript" src="https://openlayers.org/en/latest/build/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>
|
||
|
||
<!-- filesaver-js -->
|
||
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="../style.css" />
|
||
<style>
|
||
button {
|
||
margin: .5em;
|
||
}
|
||
.result {
|
||
max-width: 100%;
|
||
width: 30em;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
display: block;
|
||
margin: 0;
|
||
}
|
||
pre {
|
||
margin: 0;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
overflow: auto;
|
||
}
|
||
.result ul {
|
||
background-color: #fff;
|
||
border: 1px solid #369;
|
||
display: table;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.result li {
|
||
padding: 0 1em;
|
||
}
|
||
.result li:hover {
|
||
background-color: rgb(51, 102, 153, .3);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body >
|
||
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
||
|
||
<a href="../../index.html">
|
||
<h1>ol-ext: BW layer</h1>
|
||
</a>
|
||
<div class="info">
|
||
</div>
|
||
|
||
<!-- DIV pour la carte -->
|
||
<div id="map" style="width: 600px; height: 400px;"></div>
|
||
|
||
<script>
|
||
// The map
|
||
var map = new ol.Map ({
|
||
target: 'map',
|
||
view: new ol.View ({
|
||
zoom: 15,
|
||
center: [261204.43490751847, 6250258.191535994]
|
||
})
|
||
});
|
||
map.addControl(new ol.control.LayerSwitcher());
|
||
map.addControl(new ol.control.Permalink({ visible: false }));
|
||
|
||
// Use raster source
|
||
var gp = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
|
||
var raster = new ol.source.Raster({
|
||
sources: [ gp.getSource() ],
|
||
operation: function(pixels, data) {
|
||
var pixel = pixels[0];
|
||
// Luma https://en.wikipedia.org/wiki/Grayscale
|
||
// var lightness = parseInt(pixel[0]*.299 + pixel[1]*.587 + pixel[2]*.114);
|
||
// Linear Luminance https://en.wikipedia.org/wiki/Grayscale
|
||
// var lightness = 0.2126 * pixel[0] + 0.715 * pixel[1] + 0.0722 * pixel[2];
|
||
var lightness = parseInt(3*pixel[0] + 4*pixel[1] + pixel[2] >>> 3);
|
||
return [lightness, lightness, lightness, pixel[3]];
|
||
}
|
||
})
|
||
map.addLayer(new ol.layer.Image({
|
||
title: gp.get('title')+' - Raster',
|
||
visible: false,
|
||
minResolution: gp.getMinResolution(),
|
||
maxResolution: gp.getMaxResolution(),
|
||
extent: gp.getExtent(),
|
||
source: raster
|
||
}));
|
||
gp.setVisible(false);
|
||
map.addLayer(gp);
|
||
|
||
// Modify tiles on the flow
|
||
var gpbw = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
|
||
// var gpbw = new ol.layer.Geoportail('CADASTRALPARCELS.PARCELLAIRE_EXPRESS');
|
||
gpbw.set('title', gpbw.get('title') + ' - Tile')
|
||
gpbw.getSource().setTileLoadFunction(ol.ext.imageLoader.grayscale());
|
||
map.addLayer(gpbw);
|
||
|
||
ol.layer.Geoportail.register("ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX", {"key":"orthohisto","server":"https://wxs.ign.fr/geoportail/wmts","layer":"ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX","title":"Orthophotographie d’urgence Alex","format":"image/jpeg","style":"normal","queryable":false,"tilematrix":"PM","minZoom":6,"maxZoom":20,"bbox":[7.079166,43.80946,7.6419926,44.19026],"desc":"Orthophotographie réalisée suite au passage de la tempête Alex dans les Alpes Maritimes","originators":{"IGN":{"href":"http://www.ign.fr","attribution":"Institut national de l'information géographique et forestière","logo":"https://wxs.ign.fr/static/logos/IGN/IGN.gif","minZoom":6,"maxZoom":20,"constraint":[{"minZoom":6,"maxZoom":20,"bbox":[7.079166,43.80946,7.6419926,44.19026]}]}}});
|
||
var layer = new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX' });
|
||
layer.getSource().setTileLoadFunction(ol.ext.imageLoader.transparent([250,250,250],[255,255,255]));
|
||
/** /
|
||
var w = 250;
|
||
layer.getSource().setTileLoadFunction(ol.ext.imageLoader.pixelTransform(function(pixels, i, size){
|
||
var p = i/4;
|
||
var y = Math.floor(p/size[0]);
|
||
var x = p - y*size[0];
|
||
var nbor = [
|
||
[x,y],
|
||
[Math.min(x+1, size[0]-1), y],
|
||
[Math.max(x-1, 0), y],
|
||
[x, Math.min(y+1, size[1]-1)],
|
||
[x, Math.max(y-1, 0)]
|
||
]
|
||
var t = 0;
|
||
for (var k=0; k<nbor.length; k++) {
|
||
p = (nbor[k][0] + nbor[k][1]*size[0])*4;
|
||
if (pixels[p]<w || pixels[p+1]<w || pixels[p+2]<w) t++;
|
||
}
|
||
if (t>=4) return;
|
||
pixels[i+3] = 0;
|
||
}));
|
||
/**/
|
||
map.addLayer(layer);
|
||
|
||
</script>
|
||
</body>
|
||
</html> |