將自定義背景圖像添加到世界地圖的小冊子

Question

我試圖在傳單js庫的幫助下在我的網站上創建世界地圖。

我的單張地圖目前正在尋找這樣的：： 我一直在使用我的首選顏色土地和山脈創造了世界的自定義圖像

誰能幫助我在正確的方向如何在我的傳單地圖中獲取這個世界地圖紋理？它不一定是準確的或確切的，只要地圖充滿了我的自定義紋理。

Answer 1

一個可能的解決方案可能只是簡單地在地圖上顯示具有圖像重疊功能和使用不透明屬性進行播放的圖像紋理。

圖像紋理必須使用阿爾法通道來匹配地圖上的水。

問候。

一種快速的方法：

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