ngCordova를 사용한 애니메이션 방향 화살표 "주변" 스타일

ngCordova를 사용한 애니메이션 방향 화살표 "주변" 스타일

모바일 위치에 따라 지도의 핀을 정확히 가리키는 AroundMe Mobile App과 같은 나침반/화살표를 만들어 휴대폰을 옮길 때 화살표를 업데이트하고 싶습니다.

그 방법을 정확히 이해하려고 하는데, 그것을 설명하는 가이드나 튜토리얼을 찾을 수 없습니다.

온라인에서 찾은 것은 베어링 함수입니다. 그리고 그에 대한 지침을 만들었습니다.

app.directive('arrow', function () {

    function bearing(lat1, lng1, lat2, lng2) {
      var dLon = (lng2 - lng1);
      var y = Math.sin(dLon) * Math.cos(lat2);
      var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
      var rad = Math.atan2(y, x);
      var brng = toDeg(rad);
      return (brng + 360) % 360;
    }

    function toRad(deg) {
      return deg * Math.PI / 180;
    }

    function toDeg(rad) {
      return rad * 180 / Math.PI;
    }

    return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      var arrowAngle = bearing(scope.user.position.lat, scope.user.position.lng, attrs.lat, attrs.lng);
      element.parent().css('transform', 'rotate(' + arrowAngle + 'deg)');
    }
  };

});

방향의 화살표가 업데이트 되는 것 같은데 아쉽게도 모바일로도 계산되지 않아 올바른 방향이 아닙니다.magneticHeading위치.

그래서 제가...ngCordova디바이스 오리엔테이션용 플러그인으로magneticHeading그리고 지금은 어떻게 사용하는지 정확히 모르겠어요.bearing기능.

  $cordovaDeviceOrientation.getCurrentHeading().then(function(result) {
    var magneticHeading = result.magneticHeading;
    var arrowAngle = bearing(scope.user.position.lat, scope.user.position.lng, attrs.lat, attrs.lng, magneticHeading);
    element.parent().css('transform', 'rotate(' + arrowAngle + 'deg)');
  });

반품문에 추가하려고 했습니다.

return (brng - heading) % 360;

또는 다음과 같이 입력합니다.

return (heading - ((brng + 360) % 360));

워처를 사용하여 이 코드를 구현하면 화살표가 움직이는 것을 볼 수 있지만 정확한 위치에 있지 않습니다.예를 들어 내 위치와 핀에서 화살표는 N을 가리키고 E를 가리킵니다.

항상 온라인으로 찾아보면, 저는 어떤 튜토리얼/질문도 찾을 수 없습니다.lat/lng point및 amagnetingHeading.

아마도 나는 해결책에 가까워졌지만 혼자서는 진행할 수 없다.

나도 수학 공식을 찾으려고 노력했지만, 그것을 이해하고 실천하는 것조차 큰 고통이 있다.

당신이 도울 수 있기를 바랍니다.

많은 부분이 실제 그래픽 표현에 달려있기 때문에 이 질문에 대한 명확한 답을 내놓기는 어렵습니다.예를 들어, 어느 방향을 가리키고 있습니까?rotate(0deg).

당신이 발견한 공식에 대해 설명할 수 있어요. 당신이 직접 문제를 해결하는 데 도움이 될 거예요.어려운 점은 다음과 같습니다.

  var dLon = (lng2 - lng1);
  var y = Math.sin(dLon) * Math.cos(lat2);
  var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
  var rad = Math.atan2(y, x);

여기 보이는 것은 Haversines 공식(https://en.wikipedia.org/wiki/Haversine_formula))입니다.일반적으로 하나의 좌표는 두 개의 좌표 세트로 충분하고 그 사이의 각도를 계산할 수 있습니다.위도 및 경도로 작업할 때 지구는 평평한 표면이 아니기 때문에 이 기능은 작동하지 않습니다.첫 번째 3행은 Haversine과 결과입니다.x그리고.y)는 의 좌표입니다.unit circle(https://en.wikipedia.org/wiki/Unit_circle)

다음 단계에서는 이 단위 원의 점에서 중심까지의 각도를 계산합니다.를 사용할 수 있습니다.arctangant에는 Javascript가 있습니다.atan2이를 통해 이 프로세스가 간소화됩니다.그 결과 원의 중심을 향한 점의 각도가 단순해집니다.즉, 자신의 관심 지점을 향한 당신의 입장입니다.결과는 라디안 단위로 표시되며 각도로 변환해야 합니다.(https://en.wikipedia.org/wiki/Atan2)

평면 좌표계를 사용한 단순 버전은 다음과 같습니다.

var deltaX = poi.x - you.x;
var deltaY = you.y - poi.y;
var rotation = toDeg(Math.atan2(deltaX, deltaY));

bearingElement.css('transform', 'rotate(' + rotation + 'deg)');

서 ★★★★★poi과 ' 지점'입니다.you당신의 입장입니다.

자신의 회전을 보정하려면 자신의 회전을 빼야 합니다.위의 샘플에서 결과는 다음과 같습니다.

var deltaX = poi.x - you.x;
var deltaY = you.y - poi.y;
var rotation = toDeg(Math.atan2(deltaX, deltaY));

rotation -= you.rotation;

bearingElement.css('transform', 'rotate(' + rotation + 'deg)');

간단한 평면 좌표계를 볼 수 있는 플런커를 만들었습니다. 및합니다.you 및point of interest ' 'you'를.poi '너 '너를 돌려도 '너'가 나옵니다.이것은 우리가 우리의 회전을 보상하기 때문이다.

https://plnkr.co/edit/OJBGWsdcWp3nAkPk4lpC?p=preview

플런커에서 '제로' 위치는 항상 북쪽에 있다는 것을 주목하십시오.앱에서 '제로' 위치를 확인하십시오.적절히 조정하면 스크립트가 동작합니다.

이것이 도움이 되기를 바랍니다:-)

언급URL : https://stackoverflow.com/questions/35317874/animated-directional-arrows-aroundme-style-using-ngcordova