리플렛 맵에서 이동 배송

Question

실제 항구를 시뮬레이션하기 위해 대화식지도를 만들고 있습니다. 나는 leaflet.js와 openstreetmap.org를 사용하여 내지도를 만들었습니다. 이제 부표, 배송 등을위한 레이어를 추가해야합니다.

정적 오브젝트를 부표로 추가하려면 아이콘으로 사용자 정의한 간단한 마커를 사용했는데 제대로 작동합니다.
그러나 움직이는 배는 어떨까요? 지도상에서 움직이는 연속체로 그들을 표현해야하며, 나는 그들의 차원과 시간에 따른 방향을 보여줘야한다. 나는 5 점을

지도에 다각형으로 그들을 잡아 좌표하지만 난 정말 그 더 나은 회전 된 L.icon 전단지 객체

Layer = L.geoJson(null, { 
    pointToLayer: function(feature, latlng) { 

     return new L.marker(latlng, { 
      icon: L.icon({ 
       iconUrl: 'img/ship.png', 
        iconRetinaUrl: 'img/ship@2x.png', 
        iconSize: [18, 24] 
       }) 
     }).on('click', function() { 
      $scope.openPanel('ships', feature); 
     }); 
    } 
}); 

또는 전단지 다각형

을 그릴을 사용하기에 확실하지 않다

var p1 = new L.LatLng(51.509, -0.08), 
    p2 = new L.LatLng(51.503, -0.06), 
    p3 = new L.LatLng(51.51, -0.047), 
    p4 = new L.LatLng(51.503, +0.06), 
    p5 = new L.LatLng(51.51, +0.047), 
    polygonPoints = [p1, p2, p3, p4, p5]; 

var ship = new L.Polygon(polygonPoints); 
    map.addLayer(ship); 

선박의 동적 움직임을 고려할 때, 가장 좋은 방법은 무엇인가?
미리 감사드립니다.

Answer 1

멋진 플러그인으로 전단지를 확인해보십시오. https://github.com/openplans/Leaflet.AnimatedMarker은 아이콘을 줄 바꿈하는 데 도움이 될 수 있습니다. 오리엔테이션과 관련하여 여러 개의 비슷한 아이콘이 있어야 할 수도 있습니다 (방향이 바뀌거나 앞을 향하는 등 다양한 방향으로). 이동 방향이나 라인의 어떤 지점에 따라 아이콘을 변경해야합니까? 희망이 도움이됩니다. 행운을 빕니다! 오후 8시 30 분 P.S. 당신이 일을 얻는 경우에 나는 당신의 다각형 그리기 및 변수 ship 아래지도에 추가 한 후 작업을

Answer 2

에서 볼 싶어요, 당신은 그 모서리의 위치를 ​​변경 setLatLngs를 호출 할 수 있습니다.