mirror of
https://github.com/Viglino/ol-ext.git
synced 2025-12-08 19:26:29 +00:00
131 lines
4.2 KiB
HTML
131 lines
4.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://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
|
||
<script src="/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">
|
||
Filter to turn white pixels transparent
|
||
</div>
|
||
|
||
<!-- DIV pour la carte -->
|
||
<div id="map" style="width: 100%; height: 600px;"></div>
|
||
|
||
<script>
|
||
// The map
|
||
var map = new ol.Map ({
|
||
target: 'map',
|
||
view: new ol.View ({
|
||
zoom: 10,
|
||
center: [819375, 5465467]
|
||
})
|
||
});
|
||
map.addControl(new ol.control.LayerSwitcher({ extent: true }));
|
||
map.addControl(new ol.control.Permalink({ visible: false }));
|
||
|
||
// WMTS layer
|
||
var gp = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
|
||
map.addLayer(gp);
|
||
|
||
// Use raster source
|
||
var raster = new ol.source.Raster({
|
||
sources: [ gp.getSource() ],
|
||
operation: function(pixels, data) {
|
||
var pixel = pixels[0];
|
||
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 op',
|
||
visible: false,
|
||
minResolution: gp.getMinResolution(),
|
||
maxResolution: gp.getMaxResolution(),
|
||
extent: gp.getExtent(),
|
||
source: raster
|
||
}));
|
||
gp.setVisible(false);
|
||
|
||
// Modify tiles on the flow using a tileload function
|
||
var gpbw = new ol.layer.Geoportail('GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2');
|
||
gpbw.set('title', gpbw.get('title') + ' - Grayscale')
|
||
gpbw.getSource().setTileLoadFunction(ol.ext.imageLoader.grayscale());
|
||
map.addLayer(gpbw);
|
||
|
||
// new layer JPG + turns white pixels transparent
|
||
ol.layer.Geoportail.register("ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX", {"layer":"ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX","theme":"ortho","desc":"Orthophotographie réalisée suite au passage de la tempête Alex dans les Alpes Maritimes","server":"https://data.geopf.fr/wmts","bbox":[7.07917,43.8095,7.64199,44.1903],"format":"image/jpeg","minZoom":6,"maxZoom":20,"originators":{"Geoservices":{"attribution":"Géoservices","href":"https://geoservices.ign.fr/"}},"queryable":false,"style":"normal","tilematrix":"PM","title":"Orthophotographie d’urgence Alex"});
|
||
var layer = new ol.layer.Geoportail({
|
||
title: 'JPEG layer + transparent',
|
||
layer: 'ORTHOIMAGERY.ORTHOPHOTOS.URGENCE.ALEX'
|
||
});
|
||
layer.getSource().setTileLoadFunction(ol.ext.imageLoader.transparent([[250,250,250],[255,255,255]]));
|
||
map.addLayer(layer);
|
||
|
||
</script>
|
||
</body>
|
||
</html> |