2017-01-08 4 views
0

PHP의 연습/프로젝트의 경우 경로를 프로그래밍해야하지만 거리에 대해서는 정확하지 않고 (GPS에서 알 수 있듯이) 두 점 사이의 선. 예 : example routeOSM : 진행중인 두 지점 사이의 프로그래밍 라인

추가 어려움 비율에서 시작 줄에 진행률을 표시 할 수있다, 목표는 직선에 (자동차, 사람 또는 자전거 등) 이미지가하는 것이다. 나는 이미 leaflet.js로 일해 왔지만, 다른 도서관이 더 적절하다면 나는 받아들입니다.

내가 포인트 (출발 및 도착)에 대해, 순간이를 사용

function placeMarkerDepartureArrival() { 
    // Departure 
    L.marker([varGPS[0].lat, varGPS[0].lng], {icon:myIconAD}).addTo(map); 
    // Arrival 
    L.marker([varGPS[1].lat, varGPS[1].lng], {icon:myIconAD}).addTo(map); 
} 

당신이 어떤 예제 나 사이트가 있다면, 나는 즐긴다입니다.

(전단지 매핑 라이브러리를 기반으로)
+0

그것은 승 내게 불분명 당신의 질문은 실제로 요구하고 있습니다. 코드에 대한 도움이 필요하십니까? 살펴볼 작업 코드 제안? – TylerH

답변

0

Mapbox.js 애니메이션의 예와 그 설명서 웹 사이트에 플롯 라인을 가지고 있으며, 선을 통해 지점을 애니메이션 당신의 운동/프로젝트

무료 계층을 가지고

mapbox.js 사이트에서

는 :

map.addSource('point', { 
    "type": "geojson", 
    "data": pointOnCircle(0) 
}); 

map.addLayer({ 
    "id": "point", 
    "source": "point", 
    "type": "circle", 
    "paint": { 
     "circle-radius": 10, 
     "circle-color": "#007cbf" 
    } 
}); 

function animateMarker(timestamp) { 
    // Update the data to a new position based on the animation timestamp. The 
    // divisor in the expression `timestamp/1000` controls the animation speed. 
    map.getSource('point').setData(pointOnCircle(timestamp/1000)); 

    // Request the next frame of the animation. 
    requestAnimationFrame(animateMarker); 
} 

// Start the animation. 
animateMarker(0); 

Link to example