ワールドマップにカスタム背景画像を追加するリーフレット

Question

リーフレットjsライブラリの助けを借りて自分のウェブサイト上にワールドマップを作成しようとしています。 私は土地や山の範囲のための私の好みの色を使用して、世界のカスタムイメージを作成しました：

マイリーフレットマップは、現在、次のように探しています：

誰がどのようにように、右方向に私を助けることができます私のリーフレットマップの中にこのワールドマップテクスチャを得るには？地図が私のカスタムテクスチャで満たされている限り、正確である必要はありません。

Answer 1

可能な解決策は、imageoverlay関数を使用してマップ上に画像テクスチャを表示し、不透明属性で再生することです。

イメージテクスチャはマップ上の水と一致させるためにアルファチャンネルを使用する必要があります。

よろしくお願いいたします。

速いアプローチ：

<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>