将自定义背景图像添加到世界地图的小册子

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>