2017-10-05 2 views
0

GeoJSON 레이어의 줄을 줄이는 간단한 방법이 있습니까?전단지 GeoJSON은 목적지에 도달하기 전에 라인 피쳐를자를 수 있습니까?

나는 선을 가지고 있으며, 점 A에서 점 B로 간다. 선의 마커의 반경이 종단점보다 짧게하고 싶다. 그게 가능하니? 라인 종단/원점으로부터의 오프셋 (offset)과 같은 종류입니다. 여기

은 예입니다

내가 50 × 50이다 아이콘을 가지고 있지만, 반투명 (이미지 참조) 나는 아이콘의 위도/경도로 이동 라인을 가지고,하지만 난 자르기를 시도하려는 아이콘이 아이콘에 들어가기 전에 라인을 오프셋하여 아이콘 아래의 라인을 볼 수 없습니다. 이것이 가능한가?

이 질문이 명확하지 않은 경우 의견을 보내 주시기 바랍니다. dashArraydashOffset 옵션을 사용하여 수행 할 수 있습니다

enter image description here

답변

1

: 당신은 또한` "zoomend"`이벤트 이후의 스타일을 업데이트해야합니다 같은

var map = new L.Map('leaflet', { 
 
    center: [0, 0], 
 
    zoom: 0 
 
}); 
 

 
new L.CircleMarker([0, 90], {radius: 30}).addTo(map); 
 
new L.CircleMarker([0, -90], {radius: 30}).addTo(map); 
 

 
var polyline = new L.Polyline([[0, -90], [0, 90]]).addTo(map); 
 

 
// Get length of the line 
 
var totalLength = polyline.getElement().getTotalLength(); 
 

 
polyline.setStyle({ 
 
    // Set dashArray to the length of the line minus radius * 2 
 
    dashArray: totalLength - 60, 
 
    // Offset by radius 
 
    dashOffset: -30 
 
});
body { 
 
    margin: 0; 
 
} 
 

 
html, body, #leaflet { 
 
    height: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Leaflet 1.2.0</title> 
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    </head> 
 
    <body> 
 
     <div id="leaflet"></div> 
 
     <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    </body> 
 
</html>

+0

보인다. – ghybs

+0

독자의 연습으로 몇 가지 사항을 열어 두어야합니다;) @ghybs – iH8

+0

와우. 인상적인 해킹. – IvanSanchez

관련 문제