지도 상자 - 라인 레이어에 '클릭시'이벤트 추가

Question

TLDR; 지도 상자 "선"유형 레이어에 팝업을 추가하려면 어떻게해야합니까?

지도 상자 맵을로드하고 행 레이어를 추가하는 기능이 있습니다.

내 목표는 해당 라인을 클릭하면 팝업을 추가하는 것입니다. 예제를 따라 클릭 이벤트를 추가했습니다. 그러나 이것은 나에게 오류를 준다. 내가 뭘 잘못하고 있는지에 대한 어떤 조언?

function renderLineLayer(layerName,data) { 
     map.on('load', function() { 
      map.addLayer({ 
       "id": layerName, 
       "type": "line", 
       "source": { 
        "type": "geojson", 
        "data": data 

       }, 
       "layout": { 
        "line-join": "round", 
        "line-cap": "round", 
        "visibility":"visible" 
       }, 
       "paint": { 
        "line-color": "blue", 
        "line-width": 8 
       } 
      }); 

      console.log(map.getLayer(layerName));   

      map.on('click', layerName, function (e) { 
       console.log('click');     
       new mapboxgl.Popup() 
        .setLngLat(e.lngLat) 
        .setHTML(e.features[0].properties.name) 
        .addTo(map); 

      }); 
     }); 

    } 

오류가 발생했습니다.

TypeError: listeners[i].call is not a function[Learn More] mapbox-gl-dev.js:29779:13 

Answer 1

이것은 다소 추측이지만 on('click') 이벤트 API가 최근에 변경되었습니다. 이전에는 계층 인수 (IIRC)가 없었습니다. 이전 버전의 Mapbox-GL-JS 라이브러리를 사용하는 경우 두 번째 인수 (레이어 이름)를 함수 인 것처럼 호출하여 해당 오류 메시지를 표시합니다.

해결책 : 최신 Mapbox-GL-JS 라이브러리 버전 (0.36)으로 업데이트하십시오.

(라인 기능에서 마우스 클릭에 응답하는 프로세스가 포인트 또는 폴리곤과 다를 것이라고 생각하지 않습니다.)