リーフレットでsvgパスをクリックしてパスIDを取得するには

Question

リーフレットプログラミングには新しく、.svgファイルがあります。オープンストリートマップ上でスーパーでクリックできるようにしたいと思います。

オープンストリートマップでImage-overlayオプションでオーバーレイとして作成しようとしましたが、svgはクリックできません。

基本的には、クリックしたsvgパスまたは要素のIDをリーフレットに表示したいとします。クリックすると地図がズームしています。あなたが明示的に自分のイメージオーバーレイのinteractiveオプションを指定する必要があります

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

Answer 1

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

Answer 2

SVGファイルをロード

あなたはimageOverlayを通して、あなたのファイルを読み込むことができますが、個々のパス/グループ/シェイプ上のイベント、あなたが取得することはありませんオーバーレイ上のイベントに限定されます。

SVGのコンポーネントでイベントを取得するには、SVGのコンポーネントをインライン展開するか、またはロードして必要なノードを作成することによって、そのノードに埋め込む必要があります。このような何か：

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らとセットアップにターゲット要素のIDを記録しますclickイベントを、それを追加します。

マップに埋め込みSVGこの知識を持つ

武装、あなたの代わりにdocument.bodyのマップペインにSVGノードを追加することができます。ここでは、直接overlayペインを変更する簡単な例です：

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

注意すべき重要な点は、リーフレットがnoneにCSS property pointer-eventsを設定することにより、個々のパス要素をクリックを無効にしていることです。 Ghostscriptの作者によって

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

画像（：あなたは、パスのノード上のイベント、それゆえ追加CSSプロパティを取得するには、これを変更する必要がありGPL Ghostscript SVN：tiger。 L.imageOverlay（IMAGEURL、imageBounds）.addTo（地図）;（Wikimedia Commons