OpenStreetMap (OSM) und OpenTopoMap -------------------------------------------------------------------------------- Alternativ zu Google Earth kann die Darstellung mit Kartenmaterial von Open Street Map (OSM) im Webbrowser erfolgen. https://de.wikipedia.org/wiki/OpenStreetMap Die in diesem Kapitel vorgestellte Lösung erlaubt die Darstellung mit diesem Kartenmaterial: - OpenStreetMap (OSM) https://www.openstreetmap.org/ - OpenTopoMap https://opentopomap.org/ Vorgängig ist eine HTML-Datei mit der Dateiendung *.html im Texteditor zu erstellen. Beim Speichern der HTML-Datei darauf achten, dass die Zeichenkodierung UTF-8 verwendet wird. Mit oder ohne BOM (Byte Order Mark) ist wahrscheinlich egal. https://de.wikipedia.org/wiki/Hypertext_Markup_Language https://de.wikipedia.org/wiki/UTF-8 https://de.wikipedia.org/wiki/Byte_Order_Mark Diese HTML-Datei ist im Texteditor mit folgenden Inhalt zu befüllen. Leerzeichen am Zeilenanfang beachten! <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/css/ol.css" type="text/css"
integrity="sha512-Bw0A1Xfoa5A65m3mbHUvn0A7Iw2z2EnWeljpgbrnp9MYs47fS8M6w6M6I6vsmlBBC51qOHFYof/uNxX6OCiX6A=="
crossorigin="anonymous">
</link>
<link rel="stylesheet"
href="https://unpkg.com/ol-layerswitcher@3.8.3/dist/ol-layerswitcher.css" type="text/css"
integrity="sha512-MypO2PZIhqWcFU289e9V8MGICWwko1p/a7ETtcSjMD8iAkqgfMD+hFDcHpY6ERV1xsYL5nbo0EuwbNLg4ecpIw=="
crossorigin="anonymous">
</link>
<style>
body {
margin: 0;
padding: 0
}
.map {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
z-index: 2
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.10.0/build/ol.js"
integrity="sha512-GNGRl8Lxb3q2eVSIlAO1JOmJk0wSeKGRhHSrsw+LTo7wA/0ab0yUP8mEkZVkl2zNtIhXXFif6aN3gsifsrWAjQ=="
crossorigin="anonymous">
</script>
<script src="https://unpkg.com/ol-layerswitcher@3.8.3/dist/ol-layerswitcher.js"
integrity="sha512-+cZhYSrGlO4JafMR5fEFkF+6pXr9fwMaicniLZRH76RtnJXc/+WkFpZu/9Av0rg2xDVr84M15XMA6tet1VaMrg=="
crossorigin="anonymous">
</script>
<title>Radio coverage map</title>
</head>
<body>
<h2>Loading map...</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const center = [7.50, 47.00];
const imageExtent = [6.0, 46.0, 8.0, 48.0];
const transformCenter = ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857'); // Transform coordinates from WGS 84 to Web Mercator (projection of view)
const sourceImageExtent = ol.proj.transformExtent(imageExtent, 'EPSG:4326', 'EPSG:4326'); // Transform image corners coordinates from WGS 84 to WGS 84 (projection of source)
const viewImageExtent = ol.proj.transformExtent(imageExtent, 'EPSG:4326', 'EPSG:3857'); // Transform image corners coordinates from WGS 84 to Web Mercator (projection of view)
const otmLayer = new ol.layer.Tile({
title: 'Open Topo Map', // LayerSwitcher
type: 'base', // LayerSwitcher
visible: true,
source: new ol.source.OSM({
crossOrigin: 'anonymous',
url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
attributions: 'Powered by OpenLayers and ol-layerswitcher | Base map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
})
});
const osmLayer = new ol.layer.Tile({
title: 'Open Street Map', // LayerSwitcher
type: 'base', // LayerSwitcher
visible: false,
source: new ol.source.OSM({
crossOrigin: 'anonymous',
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attributions: 'Powered by OpenLayers and ol-layerswitcher | Base map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
})
});
const coverageMapLayer = new ol.layer.Image({
title: 'Radio coverage map', // LayerSwitcher
zIndex: 3,
opacity: 0.4,
extent: viewImageExtent,
source: new ol.source.ImageStatic({
//crossOrigin: 'anonymous',
imageExtent: sourceImageExtent,
projection: 'EPSG:4326', // WGS 84
url: 'file:///tmp/coveragemap.png',
attributions: ' | Data source: Radio coverage map calculated by Signal-Server'
})
});
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
title: 'Base map',
layers: [otmLayer, osmLayer],
}),
new ol.layer.Group({
title: 'Data',
layers: [coverageMapLayer]
}),
],
view: new ol.View({
projection: 'EPSG:3857', // Web Mercator
center: transformCenter,
zoom: 11
})
});
const scaleLine = new ol.control.ScaleLine({
bar: false
});
const layerSwitcher = new ol.control.LayerSwitcher({
groupSelectStyle: 'none'
});
map.addControl(scaleLine);
map.addControl(layerSwitcher);
</script>
</body>
</html> Wird diese HTML-Datei in einem Webbrowser geöffnet, so wird die Netzabdeckungskarte auf der OpenStreetMap-Karte oder OpenTopoMap-Karte dargestellt. Dazu werden vom Webbrowser gemäss den Anweisungen in der HTML-Datei zwei JavaScripts aus dem Internet heruntergeladen und für die Darstellung dieser HTML-Datei eingesetzt: - OpenLayers https://de.wikipedia.org/wiki/OpenLayers https://openlayers.org/ - ol-layerswitcher https://medium.com/gis-tips/openlayers-3-adding-a-layer-switcher-9b63ae9e5253 https://github.com/walkermatt/ol-layerswitcher Die Netzabdeckungskarte wird vom JavaScript OpenLayers aus der in der HTML-Datei in der Zeile: url: 'file:///tmp/coveragemap.png', angegebene Grafikdatei (*.png) geladen. Im abgebildeten Beispiel ist dies die Grafikdatei unter: /tmp/coveragemap.png welche lokal auf dem Linux-Rechner abgelegt wurde (SSD oder Festplatte). Die Grafikdatei Coveragemap.png sollte die mit Signal-Server berechnete Netzabdeckungskarte enthalten. Diese url-Zeile kann in der HTML-Datei den eigenen Wünschen entsprechend angepasst werden. Beim Einsatz des Webbrowsers Firefox sind die Hinweise unter: https://kb.mozillazine.org/Links_to_local_pages_do_not_work zu beachten. Weiter muss in der HTML-Datei die Zeile: const imageExtent = [6.0, 46.0, 8.0, 48.0]; angepasst werden. Diese Zeile muss die korrekten Angaben der Positionen der beiden äusseren Bildecken der von Signal-Server erstellten Grafik mit der Netzabdeckungskarte enthalten. Siehe dazu die Angaben zur Erstellung der *.kmz-Datei für Google Earth. Die Darstellung der Netzabdeckungskarte erfolgt im Webbrowser mit der Kartenprojektion: EPSG:3857 => WGS 84 Web Mercator https://de.wikipedia.org/wiki/Kartennetzentwurf https://en.wikipedia.org/wiki/Web_Mercator_projection Bei grossflächigen Netzabdeckungskarten kann die Darstellung mit der Kartenprojektion "WGS 84 Web Mercator" fehlschlagen. In dem Fall muss die HTML-Datei umkonfiguriert werden, damit der Webbrowser beim nächsten Versuch die Kartenprojektion: EPSG:4326 (WGS 84) https://en.wikipedia.org/wiki/World_Geodetic_System https://de.wikipedia.org/wiki/World_Geodetic_System_1984 https://de.wikipedia.org/wiki/World_Geodetic_System verwendet. Die am Zeilenanfang mit dem Minuszeichen (-) gekennzeichneten Zeilen müssen durch die mit dem Pluszeichen (+) gekennzeichneten Zeilen ersetzt werden. Auch hier wieder: Leerzeichen am Zeilenanfang beachten! 46c46 - const transformCenter = ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857'); // Transform coordinates from WGS 84 to Web Mercator (projection of view) --- + const transformCenter = ol.proj.transform(center, 'EPSG:4326', 'EPSG:4326'); // Transform coordinates from WGS 84 to WGS 84 (projection of view) 48c48 - const viewImageExtent = ol.proj.transformExtent(imageExtent, 'EPSG:4326', 'EPSG:3857'); // Transform image corners coordinates from WGS 84 to Web Mercator (projection of view) --- + const viewImageExtent = ol.proj.transformExtent(imageExtent, 'EPSG:4326', 'EPSG:4326'); // Transform image corners coordinates from WGS 84 to WGS 84 (projection of view) 99c99 view: new ol.View({ - projection: 'EPSG:3857', // Web Mercator --- view: new ol.View({ + projection: 'EPSG:4326', // WGS 84 Den Unterschied zwischen der Kartenprojektion EPSG:3857 und EPGS:4326 ist sehr gut anhand der Darstellung von Grönland ersichtlich, wenn am Bildschirm ganz Europa sichtbar ist. Zur Fehlersuche sollte im Webbrowser Firefox die Taste <F12> betätigt werden. Danach die HTML-Datei neu laden. Interessante Angaben für die Fehlersuche enthält das Register "Konsole" und "Netzwerkanalyse" im Werkzeugkasten: Werkzeuge für Webentwickler
Mehr anzeigen
Poltergeist
Du bist eine/r von 80
Mobile Magistrat
Du bist eine/r von 5
5 Jahre Swisscom Community
Du bist eine/r von 20465
Newcomer
Du bist eine/r von 158928
Welcome
Du bist eine/r von 268593
