Flugblatt, das einer Weltkarte ein benutzerdefiniertes Hintergrundbild hinzufügt

Question

Ich versuche, eine Weltkarte auf meiner Website zusammen mit Hilfe der Broschüre js Bibliothek zu erstellen. Ich habe ein eigenes Bild von der Welt geschaffen meine bevorzugten Farben für Land-und Bergketten mit:

Mein Merkzettel Karte derzeit wie folgt aussehen:

Kann mir jemand in die richtige Richtung helfen, wie um diese Weltkartentextur in meine Prospektkarte zu bekommen? Es muss nicht genau oder genau sein, solange die Karte mit meiner benutzerdefinierten Textur gefüllt ist.

Answer 1

Eine mögliche Lösung könnte einfach sein, die Bildtextur auf der Karte mit Bildüberlagerungsfunktion anzuzeigen und mit dem Deckkraftattribut zu spielen.

Die Bildtextur muss den alfa-Kanal verwenden, um das Wasser auf der Karte abzugleichen.

Grüße.

Ein schneller Ansatz:

<div id="mapid" style="width: 600px; height: 400px;"></div> 

<script> 
    var mymap = L.map('mapid').setView([20.0, -60.0], 1.2); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    id: 'mapbox.streets' 
    }).addTo(mymap); 


    var imageUrl ='https://i.stack.imgur.com/khgzZ.png', 
    imageBounds = [[80.0, -350.0], [-40.0, 400.0]]; 
L.imageOverlay(imageUrl, imageBounds, {opacity: 0.2}).addTo(mymap); 

</script>