18 - 画像オーバーレイ

学習内容: 地図上に画像やSVGをオーバーレイとして表示します。

ポイント:

// 画像オーバーレイを作成
const imageUrl = 'path/to/image.png';
const imageBounds = [
    [35.70, 139.74],  // 南西の角
    [35.72, 139.78]   // 北東の角
];

const imageOverlay = L.imageOverlay(imageUrl, imageBounds, {
    opacity: 0.7,
    interactive: true
}).addTo(map);

// 透明度を変更
imageOverlay.setOpacity(0.5);

// SVGオーバーレイ
const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.innerHTML = '<circle cx="50" cy="50" r="40" fill="red"/>';
L.svgOverlay(svgElement, bounds).addTo(map);