2017-12-06 19 views
2

레이어가있는 사용자 정의 SVG 코드가 있습니다.Leaflet.js에 SVG 코드를 포함시키는 방법은 무엇입니까?

지금까지 웹 페이지에서 작동 중이며 jQuery 기능을 표시/숨기기로 조작 할 수 있으며 이제는 전단지와 통합하려고합니다.

나는 Leafletjs.com에있는 튜토리얼과 문서를 읽었습니다. 모든 예제는 내가 OpenStreets의지도 등을위한 이미지 또는 일부 링크를 통합하는이 관련보고

모두 내가 예를 들어 다음과 같은 노력했습니다의

첫째 :이 잘 작동

<script> 

    // initialize the map 
    var map = L.map('map-test').setView([42.35, -71.08], 13); 

    // load a tile layer 
    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', 
    { 
     attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>', 
     maxZoom: 17, 
     minZoom: 9 
    }).addTo(map); 

</script> 

, 그것의 지도를 표시하고 확대/축소하고 다른 객체를 볼 수 있지만 소스 코드에서 일부 논리가있는 별도의 이미지처럼 표시되는 것을 볼 수 있습니다.

내 사용자 지정 SVG 코드를 모든 레이어와 통합하여 리플렛으로 드래그하고 확대/축소 할 수 있습니다.

이 웹 사이트는 정확히 내가 원하는 것을 가지고 : https://winter.intermaps.com/oetztal?lang=en

당신이 그들이 <div class="leaflet-pane leaflet-overlay-pane"> 내부 전체 SVG 코드를 통합하고 볼 수있는 소스 코드에서.

편집 :

내 서버에 내 map.html 파일을 업로드 한 전체 SVG 코드가 그 파일 안에 있습니다. 전단지에 어떻게 포함시킬 수 있습니까?

답변

0

svg를 imageOverlay으로로드하면 <img> 안에 고정되어 고정됩니다. 이 PR을 확인하십시오 https://github.com/Leaflet/Leaflet/issues/5756이 멋진 녀석은 을 <object>으로 바꿀 수 있고 큰 소년 svg로 취급하기 위해 svg 내용을 거기에 넣을 수 있다는 것을 알아 냈습니다. 최소한 svg의 노드 속성에있는 이벤트 핸들러가 작동합니다.