使用 Leaflet.js 将 svg 用作地图答案

【问题标题】：Use svg as map using leaflet.js使用 Leaflet.js 将 svg 用作地图
【发布时间】：2016-04-26 03:51:38
【问题描述】：

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

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

【问题讨论】：

【解决方案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>

【讨论】：

谢谢！！你是如何计算界限的？
我更新了小提琴。这取决于你，可以只做imageBounds = [[0, 0], [100, 100]];，然后将center: [50, 50], zoom: 1 传递给传单以保持简单。
请原谅我的无知（感谢您的出色回答），但是像上面的评论那样设置边界然后通过中心和缩放有什么作用？
似乎添加crs: L.CRS.Simple 可以让您以像素而不是纬度/经度来指定事物。
@Papan 只需使用此方法从 svg 获取 height/width 坐标 - getBBox()