mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
336 lines
9.3 KiB
HTML
336 lines
9.3 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);
|
|
}
|
|
.ol-layers .alti {
|
|
display: none;
|
|
}
|
|
</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: x-bil layer</h1>
|
|
</a>
|
|
<div class="info">
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map" style="width: 600px; height: 400px;"></div>
|
|
<input type="range" min=0 max=3 step=".1" value=0 onchange="elev.getSource().setTileLoadFunction(levelMap(parseFloat(this.value)))"/>
|
|
<span id="level"></span>
|
|
|
|
<script>
|
|
var plan = new ol.layer.Geoportail({
|
|
layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
|
|
className: 'plan',
|
|
});
|
|
plan.addFilter(new ol.filter.CSS({ filter: 'grayscale(1)' }));
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
view: new ol.View ({
|
|
zoom: 15,
|
|
center: [261204.43490751847, 6250258.191535994]
|
|
}),
|
|
layers: [ plan ]
|
|
});
|
|
map.addControl(new ol.control.LayerSwitcher());
|
|
map.addControl(new ol.control.Permalink({ visible: false }));
|
|
|
|
var elev = new ol.layer.Tile ({
|
|
"title": "MNT SRTM3",
|
|
"extent": [
|
|
-20037554.725947514,
|
|
-7558498.603143567,
|
|
20037554.725947514,
|
|
8625918.87376409
|
|
],
|
|
"queryable": false,
|
|
"abstract": "MNT SRTM3 construit par la NASA et le NGA.",
|
|
"minResolution": 0,
|
|
"maxResolution": 197231.79878968254,
|
|
"source": new ol.source.TileWMS({
|
|
"url": "https://wxs.ign.fr/altimetrie/geoportail/r/wms?",
|
|
"projection": "EPSG:3857",
|
|
"attributions": [],
|
|
"crossOrigin": "anonymous",
|
|
"params": {
|
|
"LAYERS": "ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3",
|
|
//"FORMAT": "image/png",
|
|
"FORMAT": "image/x-bil;bits=32",
|
|
"VERSION": "1.3.0"
|
|
}
|
|
})
|
|
});
|
|
var elev0 = new ol.layer.Tile ({
|
|
"title": "Modèle numérique de surface",
|
|
"extent": [
|
|
-578959.605490584,
|
|
5203133.393641367,
|
|
921974.2487313666,
|
|
6643289.75487211
|
|
],
|
|
"queryable": false,
|
|
"abstract": "Modèle numérique de surface (MNS)",
|
|
"minResolution": 0,
|
|
"maxResolution": 197231.79878968254,
|
|
"source": new ol.source.TileWMS({
|
|
"url": "https://wxs.ign.fr/altimetrie/geoportail/r/wms?",
|
|
"projection": "EPSG:3857",
|
|
"attributions": [],
|
|
"crossOrigin": "anonymous",
|
|
"params": {
|
|
"LAYERS": "ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES.MNS",
|
|
"FORMAT": "image/x-bil;bits=32",//"image/png",
|
|
"VERSION": "1.3.0"
|
|
}
|
|
})
|
|
});
|
|
var elev = new ol.layer.Tile ({
|
|
"title": "Modèle Numérique de Terrain issu du RGEALTI",
|
|
"extent": [
|
|
-7007874.496280316,
|
|
-1460624.494037931,
|
|
5043253.3127169,
|
|
6639937.650114076
|
|
],
|
|
opacity: .65,
|
|
"abstract": "Modèle Numérique de Terrain issu du RGEALTI",
|
|
"minResolution": 0.09449404761899723,
|
|
"maxResolution": 197231.79878968254,
|
|
"source": new ol.source.TileWMS({
|
|
"url": "https://wxs.ign.fr/altimetrie/geoportail/r/wms?",
|
|
"projection": "EPSG:3857",
|
|
"attributions": [],
|
|
"crossOrigin": "anonymous",
|
|
"params": {
|
|
"LAYERS": "ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES",
|
|
"FORMAT": "image/x-bil;bits=32",//"image/png",
|
|
"VERSION": "1.3.0"
|
|
}
|
|
})
|
|
});
|
|
var elev = new ol.layer.Tile ({
|
|
"title": "MNT BDAlti V1",
|
|
className: 'alti',
|
|
"extent": [
|
|
-7124447.410769509,
|
|
-2632018.6375864255,
|
|
18701674.453269962,
|
|
6800125.454397307
|
|
],
|
|
"opacity": 1,
|
|
"abstract": "BDAlti V1 au pas de 25m",
|
|
"minResolution": 0,
|
|
"maxResolution": 197231.79878968254,
|
|
"source": new ol.source.TileWMS({
|
|
"url": "https://wxs.ign.fr/altimetrie/geoportail/r/wms?",
|
|
"projection": "EPSG:3857",
|
|
"attributions": [],
|
|
"crossOrigin": "anonymous",
|
|
"params": {
|
|
"LAYERS": "ELEVATION.ELEVATIONGRIDCOVERAGE",
|
|
"FORMAT": "image/x-bil;bits=32",//"image/png",
|
|
"VERSION": "1.3.0"
|
|
}
|
|
})
|
|
});
|
|
|
|
function levelMap(h0) {
|
|
$('#level').text(h0);
|
|
h0 = Math.max( h0 + .01, .01);
|
|
return function (tile, src) {
|
|
// Load image data
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'blob';
|
|
xhr.addEventListener('loadend', function (evt) {
|
|
var data = this.response;
|
|
if (data !== undefined) {
|
|
const reader = new FileReader();
|
|
// Get as array
|
|
reader.addEventListener('loadend', (e) => {
|
|
var blob = new Float32Array(e.target.result);
|
|
var size = Math.sqrt(blob.length);
|
|
var canvas = document.createElement('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
canvas.width = canvas.height = size;
|
|
var imgData = ctx.getImageData(0, 0, size, size);
|
|
var pixels = imgData.data;
|
|
for (var i=0; i<blob.length; i++) {
|
|
var h = blob[i];
|
|
if (h < h0 && h>-99999) {
|
|
pixels[4*i] = 135;
|
|
pixels[4*i+1] = 203;
|
|
pixels[4*i+2] = 249;
|
|
pixels[4*i+3] = 255 * (h0-h) / h0;
|
|
} else {
|
|
pixels[4*i+3] = 0;
|
|
}
|
|
}
|
|
ctx.putImageData(imgData, 0, 0);
|
|
tile.setImage(canvas);
|
|
});
|
|
// Start reading the blob
|
|
reader.readAsArrayBuffer(data);
|
|
// tile.getImage().src = URL.createObjectURL(data);
|
|
} else {
|
|
tile.setState(3);
|
|
}
|
|
});
|
|
xhr.addEventListener('error', function () {
|
|
tile.setState(3);
|
|
});
|
|
xhr.open('GET', src);
|
|
xhr.send();
|
|
};
|
|
}
|
|
//elev.getSource().setTileLoadFunction(levelMap(0))
|
|
elev.getSource().setTileLoadFunction(alti)
|
|
map.addLayer(elev);
|
|
|
|
var maxh = 0;
|
|
function alti(tile, src) {
|
|
// Load image data
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'blob';
|
|
xhr.addEventListener('loadend', function (evt) {
|
|
var data = this.response;
|
|
if (data !== undefined) {
|
|
const reader = new FileReader();
|
|
// Get as array
|
|
reader.addEventListener('loadend', (e) => {
|
|
var blob = new Float32Array(e.target.result);
|
|
var size = Math.sqrt(blob.length);
|
|
var canvas = document.createElement('canvas');
|
|
var ctx = canvas.getContext('2d');
|
|
canvas.width = canvas.height = size;
|
|
var imgData = ctx.getImageData(0, 0, size, size);
|
|
var pixels = imgData.data;
|
|
for (var i=0; i<blob.length; i++) {
|
|
var p = getPixel(blob[i]);
|
|
if (maxh<blob[i]) maxh = blob[i];
|
|
pixels[4*i] = p[0];
|
|
pixels[4*i+1] = p[1];
|
|
pixels[4*i+2] = p[2];
|
|
pixels[4*i+3] = p[3];
|
|
}
|
|
ctx.putImageData(imgData, 0, 0);
|
|
tile.setImage(canvas);
|
|
});
|
|
// Start reading the blob
|
|
reader.readAsArrayBuffer(data);
|
|
// tile.getImage().src = URL.createObjectURL(data);
|
|
} else {
|
|
tile.setState(3);
|
|
}
|
|
});
|
|
xhr.addEventListener('error', function () {
|
|
tile.setState(3);
|
|
});
|
|
xhr.open('GET', src);
|
|
xhr.send();
|
|
};
|
|
|
|
/* Convert height to pixel
|
|
Encode elevation data in raster tiles
|
|
@see https://docs.mapbox.com/help/troubleshooting/access-elevation-data/
|
|
Deep watter trench min > -12000 m https://en.wikipedia.org/wiki/Mariana_Trench
|
|
2 digits (0.01 m)
|
|
*/
|
|
function getPixel(height) {
|
|
var h = Math.round(height*100 + 1200000);
|
|
var pixel = [
|
|
h >> 16,
|
|
(h % 65536) >> 8,
|
|
h % 256,
|
|
255
|
|
];
|
|
return pixel;
|
|
}
|
|
/* Convert pixel to height */
|
|
function getHeight(pixel) {
|
|
// return -10000 + (pixel[0] * 65536 + pixel[1] * 256 + pixel[2]) * 0.01;
|
|
return -12000 + ((pixel[0] << 16) + (pixel[1] << 8) + pixel[2]) * 0.01;
|
|
}
|
|
|
|
var popup = new ol.Overlay.Tooltip();
|
|
map.addOverlay(popup)
|
|
map.on('pointermove', function(e) {
|
|
map.forEachLayerAtPixel(
|
|
e.pixel,
|
|
function(layer, p) {
|
|
if (layer===elev) {
|
|
var h = getHeight(p);
|
|
popup.setInfo(h>-5000 ? getHeight(p).toFixed(2)+' m' : '');
|
|
}
|
|
}),{
|
|
layerFilter: function(l) {
|
|
return l===elev;
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |