월드 맵에 맞춤 배경 이미지를 추가하는 전단지

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>