전단지 - 중복 폴리선 용 툴팁

Question

배경 :
하이킹 용 웹 기반 매핑 응용 프로그램에서 작업 중입니다. 그래서 전단지를 기반으로 한지도는 하이킹 코스의 루트를 제공합니다. 하이킹 트레일은 여러 경로의 일부가 될 수 있으므로 경로를 나타내는 해당하는 다중 선이 중복 될 수 있습니다.

는

는 문제 :
각 경로는 툴팁이 (마우스 오버 트리거를, {끈적 : TRUE}) 두 개 이상의 경로 자마자 겹치지 않는 폴리 라인을 예상하지만로 작동 라벨을 보여주는에만 폴리 라인을 중복 "위에"는 툴팁이 열립니다. 이 문제는 본질적으로 나쁘지는 않지만 모든 경로가 똑같이 중요하므로 경로의 모든 레이블을 포인터의 위치 (또는 최대 5 개의 레이블 + x 개 이상)에 표시하고 싶습니다. 이 주제와 관련된 문제를 찾을 수 없었습니다.

내가 뭘하려 :
-, 모든 경로에 대한 기능 그룹을 만듭니다 툴팁 기능이 포인터의 위치를 ​​넘어 모든 폴리 라인의 배열을 제공 바라고, 그룹에 툴팁을 결합한다. 그것이 나왔을 때, 나는 위에 폴리 라인의 정보를 얻는다.
- 나는지도에서 mousemove 이벤트를 성공했으나 성공하지 못했다.
- 포인터의 layerPoint 좌표를 모든 경로의 _rings과 비교했다. & _parts layPoint 배열이 일치하는 것을 찾는다. layerPoints는 폴리선의 실제 점만 포함하고 두 점 사이의 연결은 포함하지 않으므로 성공률은 약 5 %입니다. 또한 포인터가 폴리선을 만지기 전에 톨팁을 트리거하는 각 폴리 라인 주위에는 여백이 있습니다 (터치 동작도 향상됩니다).
- 여백 문제를 해결하려면 이전에 각 폴리 라인 포인트에 양수 및 음수 여백을 추가하십시오 결과를 향상시키는 포인터 좌표와 비교하지만 주된 문제는 해결되지 않습니다.

는

(!) 참고 :
- 모든 경로가 하나의 캔버스

길고도 짧은 이야기로 그려, 나는 목표를 달성하기 위해 외부의 도움이 필요합니다. 어쩌면 당신 중 일부는 아이디어를 갖고 있거나 해결책을 제시 할 수 있습니다. 모든 입력을 부탁드립니다.

** UPDATE :
뷰포트에서 모든 경로에 포인터에서 최단 거리를 계산한다

접근 방법을 다음과 같이 **
작동하지만 매우 비효율적 인 솔루션입니다. 포인터에서 경로까지의 거리가 특정 임계 값 미만이면 표시해야 할 경로 레이블의 배열에 경로를 추가하십시오.

단계 :
1.) 모든 라우팅 기능 그룹 포함에 빈 툴팁을 결합
2)를 follwing을 기능

var routesFeatureGroup = L.featureGroup(routesGroup) 
    .bindTooltip('', {sticky: true}) 
    .on('mousemove', function(e){ 
     var routeLabels = [e.layer.options.label]; // add triggering route's label by default 
     var mouseCoordAbs = el.$map.project(e.latlng); 

     $.each(vars.objectsInViewport.routes, function(i, v){ 
      if (e.layer.options.id != el.$routes[i].options.id && el.$routes[i]._pxBounds.contains(e.layerPoint)){ 
       var nearestLatlngOnPolyline = getNearestPolylinePoint(e.latlng, el.$routes[i]); 
       var polyPointCoordAbs = el.$map.project(nearestLatlngOnPolyline); 

       var distToMouseX = polyPointCoordAbs.x - mouseCoordAbs.x; 
       var distToMouseY = polyPointCoordAbs.y - mouseCoordAbs.y; 
       var distToMouse = Math.sqrt(distToMouseX*distToMouseX + distToMouseY*distToMouseY); 

       if (distToMouse < 15) { 
        routeLabels.push(el.$routes[i].options.label); 
       } 
      } 
     }) 

     var routesFeatureGroup.setTooltipContent(routeLabels.join('<br>')); 
    }) 

설명과 기능 그룹에 바인드에서 mousemove 이벤트 :
이미 앱의 다른 부분에 대한 현재 뷰포트의 모든 개체 (경로 및 마커)를 수집합니다.현재 보이는 모든 경로는 vars.objectsInViewport.routes (각각의 id)에 저장되므로 모든 경로를 거치지 않아도됩니다. mousemove 이벤트를 트리거 한 계층은 기본적으로 추가됩니다. 자신의 ID가에서 mousemove 이벤트를 트리거 층에 다른 (이 라벨은 기본적으로 추가 될 때) - -
가 경우 자신의 경계 : 그때 나는 경우 현재 가시 경로의 각 검사 (직교 좌표 : "_pxBounds") cartesian layer를 포함 mousemove 이벤트의 점

경로에 대해 이러한 조건이 충족되면 포인터에서 경로까지 가장 가까운 latlng 포인트를 계산합니다. 나는 사용자 정의 함수를 사용하여이 작업을 수행하는데,이 작업은이 컨텍스트에서 오랫동안 게시 할 수 있습니다. (나는 누군가가 요청한다면)

마우스의 위치와 다음에서 마지막으로지도 프로젝트 방법 http://leafletjs.com/reference.html#map-project

을 사용하여 절대 좌표로 변환되는 폴리 라인/경로에있는 위도와 경도 점, 이들 사이의 거리 포인트에 대한 피타고라스를 사용하여 계산됩니다. 그것은 픽셀 기반이므로 줌 레벨은 하나의 요소가 아닙니다. 거리가 특정 임계 값 (15 픽셀) 이하 그들은 (폴리 라인 주위에 기본 마진) 공중 선회 된 것으로 간주 될 포인터를 충분히 가까이있는, 그래서 경로의 레이블은 레이블 배열에 추가됩니다.

마지막으로 기능 그룹의 툴팁이 모든 레이블 가득합니다.

결과는 작업이 매우 비싼 경우에도 매우 유망하다. 나는 함수가 조금 전화를 줄이기 위해 50ms의 시간 제한을 추가 :

var tooltipTimeout; 
var routesFeatureGroup = L.featureGroup(routesGroup) 
    .bindTooltip('', {sticky: true}) 
    .on('mousemove', function(e){ 
     clearTimeout(tooltipTimeout); 

     tooltipTimeout = setTimeout(function(){ 
      // collect labels 
      // ... 
     },50); 
    .on('mouseout', function(){ 
     clearTimeout(tooltipTimeout); 
    }) 

Answer 1

내가 당신에게이 작업을 수행하는 방법에 대한 아이디어를 제공 할 수 있습니다,하지만 난하지가 일을 할 것이라고 100 % 확신합니다. 점이 다각형 내에 있고 그 점을 포함하는 모든 다각형을 반환하는지 알려주는 plugin for Leaflet (지도 상자)이 있습니다.

폴리 라인에서이 플러그인을 사용할 수없는 경우 마지막 점에서 첫 번째 점으로 돌아가서 선을 닫음으로써 폴리 라인에서 폴리곤을 만들 수 있습니다 (해결책이 맞는지 확실하지 않습니다). 예를 들어 [0, 1, 2, ..., n-1, n]의 연결된 점의 폴리 라인이있는 경우 [n을 n-1, n-1을 n-2로 연결]로 돌아갑니다. .. 1 with 0]. 이 방법으로 동일한 폴리선 모양을 갖지만 폴리곤이됩니다. 이것은 가장 최적화 된 솔루션이 아니며 알려진 플러그인을 사용하는 빠른 수정입니다. 당신은 모든 툴팁을 일단

, 각 다각형/폴리 라인을 위해 한 번에 모두를 열 수 있습니다. 또는 사용자가 열려고하는 도움말을 선택할 수있는 도우미 툴팁을여십시오.

도움이 되었기를 바랍니다. 더 나은 해결책을 찾거나 (또는 ​​일을하는 플러그인을 찾으십시오) 여기에 게시하십시오.