Question

我是传单编程的新手，我有一个.svg文件，我希望在开放的街道地图上实现超级强大的点击。

我尝试通过Image-overlay选项将其作为开放街道地图上的叠加层，但svg无法点击。

基本上我想获取传单中单击的svg路径或元素（你曾经调用过的）的ID。点击后地图会变焦。

var imageUrl = 'test2.svg', 
                imageBounds = [(image bounds)]; 
L.imageOverlay(imageUrl, imageBounds).addTo(map);

Answer 1

加载SVG文件

您可以通过imageOverlay加载文件，但不会在单个路径/群组/形状上获取活动，您只能使用叠加层上的活动。

要获取SVG组件的事件，您必须将其嵌入到DOM节点中，方法是将其嵌入或加载并创建所需的节点。像这样¹：

var url = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg';
var req = new XMLHttpRequest();
req.onload = function(resp) {
    var xml = this.responseXML;
    var importedNode = document.importNode(xml.documentElement, true);
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
    g.appendChild(importedNode);
    g.setAttribute('class', 'svglayer');

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.appendChild(g);
    svg.addEventListener('click', function(e) {
        console.log(e.target.id)
    })

    document.body.appendChild(svg);
};
req.open("GET", url, true);
req.send();

此代码段将加载SVG文件，将其附加到DOM et并设置一个click事件，该事件将记录目标元素的ID。

将SVG嵌入地图

有了这些知识，您可以将SVG节点附加到地图窗格而不是document.body。这是一个直接修改overlay窗格的简单示例：

map.getPane('overlayPane').appendChild(svg);

需要注意的一点是，Leaflet通过将CSS property pointer-events设置为none来禁用单击各个路径元素。您必须更改此选项以在路径节点上获取事件，因此添加了CSS属性：

.leaflet-pane > svg .svglayer path {
    pointer-events: auto ;
}

和演示

var map = L.map(document.getElementById('map'),{
    renderer: L.canvas()
}).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var url = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg';
var req = new XMLHttpRequest();
req.onload = function(resp) {
    var xml = this.responseXML;
    var importedNode = document.importNode(xml.documentElement, true);
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
    g.appendChild(importedNode);
    g.setAttribute('class', 'svglayer');

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.appendChild(g);
    svg.addEventListener('click', function(e) {
        console.log(e.target.id, e.target.tagName)
    })

    map.getPane('overlayPane').appendChild(svg);
};
req.open("GET", url, true);
req.send();

html, body {padding:0; margin:0; height: 100%}
#map {height: 180px}


.leaflet-pane > svg .svglayer path {
    pointer-events: auto ;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

<div id='map'>

</div>

¹图片来自Ghostscript作者（GPL Ghostscript SVN：tiger.eps）[GPL（http://www.gnu.org/licenses/gpl.html)]，来自Wikimedia Commons

Answer 2

您需要在图片叠加层上明确指定interactive选项：

如果true，图片叠加层会在点击或悬停时发出鼠标事件。

var map = L.map("map").setView([48.85, 2.35], 12);

var imageBounds = [
  [48.8, 2.3],
  [48.9, 2.4]
];

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/9/9c/Map_of_country_subdivisions_%28states%29.svg';

var imageOverlay = L.imageOverlay(imageUrl, imageBounds, {
  interactive: true,
  attribution: '<a href="https://commons.wikimedia.org/wiki/File:Map_of_country_subdivisions_(states).svg">CC-BY-SA 4.0 Wikimedia contributor</a>'
}).addTo(map);

imageOverlay.on('click', function(event) {
  alert('clicked on SVG image');
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>

<div id="map" style="height: 200px"></div>

如何使svg路径可以在传单中单击并通过单击获取路径ID

2 个答案: