Читать книгу Leaflet - Astrid Günther - Страница 33

L.tileLayer.wms über L.tileLayer.wms

Das Schöne an WMS-Layern ist, dass Sie diese übereinanderlegen können. Das nachfolgende Beispiel enthält Programmcode, der im Ergebnis gleichzeitig drei WMS-Layer übereinander anzeigt.

<!DOCTYPE HTML> <html> <head> <title>Eine OSM-Karte mit Leaflet</title> <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script src="../leaflet/leaflet.js"></script> </head> <body> <div style="height: 700px;" id="mapid"></div> <script> var mymap = L.map('mapid').setView([50.27264, 7.26469], 7); *L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", *{ *transparent: true, *layers:'dwd:bluemarble', *}).addTo(mymap); *L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", *{ *format: 'image/png', *transparent: true, *layers:'dwd:Warngebiete_Kreise' *}).addTo(mymap); *L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", *{ *format: 'image/png', *transparent: true, *layers:'dwd:Warnungen_Gemeinden_vereinigt' *}).addTo(mymap); </script> </body> </html>

Dieses Beispiel ist meiner Meinung nach selbsterklärend. Wichtig ist, dass Sie die Option transparent mit true übergeben. Andernfalls sehen Sie nur einen Layer – nämlich den obersten. Bereiche, die nicht mit Daten gefüllt sind, werden weiß gezeichnet. Außerdem müssen Sie die Option format mit 'image/png' belegen. Leaflet lädt ansonsten automatisch das Format 'image/jpeg' und dieses Format unterstützt keine Transparenz.

Abbildung: Mehrere Layer, die über einen WMS-Service geladen wurden.

Abbildung: Mehrere Layer, die über einen WMS-Service geladen wurde.

Подняться наверх