使用 svg 作为地图使用 leaflet.js

Question

是否可以使用 SVG 图像作为 leaflet.js 的底图？

在我的例子中，我有一个巨大的 svg 文件，我希望允许我的用户使用传单的所有功能，例如缩放、标记、图层。

Answer 1

是的，你可以像这样使用imageOverlay

// create the map
var map = L.map('map', {
  center: [40.75, -74.2],
  zoom: 13
});

var imageUrl = 'https://www.amcharts.com/lib/3/maps/svg/australiaHigh.svg',
  imageBounds = [
    [40.712216, -74.22655],
    [40.773941, -74.12544]
  ];

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

#map {
  height: 400px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="map"></div>

使用 svg 作为地图使用 leaflet.js

Use svg as map using leaflet.js

javascript

svg

leaflet