リーフレットとJavascriptを使って地図に画像を追加する方法

Question

Javascriptを使用して「リーフレットマップ」に画像を追加する方法を探しています。

私がしたいことは、イメージを読み込み、サイズと位置を調整し、リーフレットマップに添付することです。

Answer 1

imageOverlayを使用して画像を追加する方法を示す基本的なデモです。

あなたはSO我々はあなたがあなたの「試み」を修正するのに役立つでここにSO imageBounds

// center of the map 
 
var center = [-33.8650, 151.2094]; 
 

 
// Create the map 
 
var map = L.map('map').setView(center, 5); 
 

 
// Set up the OSM layer 
 
L.tileLayer(
 
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>', 
 
    maxZoom: 18 
 
    }).addTo(map); 
 

 
// add a marker in the given location 
 
L.marker(center).addTo(map); 
 
L.marker([-35.8650, 154.2094]).addTo(map); 
 

 
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg', 
 
imageBounds = [center, [-35.8650, 154.2094]]; 
 

 
L.imageOverlay(imageUrl, imageBounds).addTo(map);

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"> 
 

 
<div id="map"></div>