리플릿 - 마우스 오버, 클릭 한 다음

Question

을 해제합니다 나의 작업 예입니다 http://members.upcpoczta.pl/w.racek/mapa.html

내가 달성하고자하는

이다 : 그것은 지금처럼

1. 는 마우스 오버에 하이라이트를 유지

2. I을 강조 표시된 자전거 경로를 클릭하십시오. 기능 기능을 확대하고 싶지만 경로를 확대 할 때 선택한 경로 외부를 클릭하거나지도를 이동할 때까지 계속 강조 표시하고 싶습니다.

지금 마우스가 움직이면 강조 표시가 사라지고 클릭 한 경로를 알 수 없습니다.

Answer 1

좋아, 일종의 해커지만, 그런 식으로 뭔가를 달성하는 방법의 데모로 그것을 참조하십시오. 변수 selected을 만들고 click 핸들러가 실행되면 강조된 기능을 저장합니다. 이제 mouseout 처리기에서 선택이 이루어 졌는지 확인하고 mouseout을 실행 한 레이어와 일치하는지 확인한 다음 강조 표시된 스타일을 제거하지 마십시오. 또한 click 핸들러에 일부 논리를 작성해야 선택이 이미 이루어진 경우 하이라이트가 제거됩니다.

코드 예제 : http://plnkr.co/edit/fdTnA9CyJdJejiPq2q8M?p=preview

당신은 또한 당신이 달성하고 거기에하려고하는지도 click 또는 moveend이든 UX 용 핸들러를 작성해야합니다 : 여기

function highlight (layer) { 
     layer.setStyle({ 
      weight: 5, 
      dashArray: '' 
     }); 
     if (!L.Browser.ie && !L.Browser.opera) { 
      layer.bringToFront(); 
     } 
    } 

    function dehighlight (layer) { 
     if (selected === null || selected._leaflet_id !== layer._leaflet_id) { 
      geojson.resetStyle(layer); 
     } 
    } 

    // Variable to store selection 
    var selected = null; 

    function select (layer) { 
     // See if there is already a selection 
     if (selected !== null) { 
      // Store for now 
      var previous = selected; 
     } 
     map.fitBounds(layer.getBounds()); 
     // Set new selection 
     selected = layer; 
     // If there was a previous selection 
     if (previous) { 
      // Dehighlight previous 
      dehighlight(previous); 
     } 
    } 

    var geojson = L.geoJson(rower, { 
     style: function (feature) { 
      return { 
       weight: 2, 
       opacity: 1, 
       color: feature.properties.colour, 
       dashArray: 3, 
      }; 
     }, 
     onEachFeature: function (feature, layer) { 
     layer.on({ 
      'mouseover': function (e) { 
       highlight(e.target); 
      }, 
      'mouseout': function (e) { 
       dehighlight(e.target); 
      }, 
      'click': function (e) { 
       select(e.target); 
      } 
     }); 
    } 
}).addTo(map); 

는 Plunker에 작업 예제 선택 항목이 있는지 확인한 다음 강조 표시를 제거하십시오. 그러나 개념을 이해하면 오히려 간단합니다.