Leaflet将自定义背景图像添加到worldmap

Question

我正在尝试在我的网站上创建一个世界地图以及传单js库的帮助。 我使用我喜欢的陆地和山脉颜色创建了世界的自定义图像：

我的传单地图目前看起来像这样：

任何人都可以帮我找到正确的方向，如何在我的传单地图中获得这个世界地图纹理？只要地图填充了我的自定义纹理，它就不必是准确的或准确的。

Answer 1

一个可能的解决方案可能只是在地图上使用imageoverlay函数显示图像纹理并使用不透明度属性进行播放。

图像纹理必须使用alfa通道来匹配地图上的水。

问候。

快速方法：

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