使用 Leaflet.js 使用 svg 作为地图 [英] Use svg as map using leaflet.js

问题描述

是否可以将SVG图像用作leaflet.js的基本映射?

Is it possible to use SVG image as the base map for leaflet.js ?

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

In my case I have huge svg file and I wish to allow my users to use all of leaflet's features such as zoom, markers, layers.

推荐答案

是的，您可以只使用 imageOverlay，像这样

Yes, you can just use imageOverlay, like this

// 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>

这篇关于使用 Leaflet.js 使用 svg 作为地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！