Листовка, добавляющая пользовательское фоновое изображение в карту мира

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://stackru.com/images/08477fe5780a31e4d064befce0047e1545f8d976.png',
    imageBounds = [[80.0, -350.0], [-40.0, 400.0]];
L.imageOverlay(imageUrl, imageBounds, {opacity: 0.2}).addTo(mymap);

</script>