search

ewoken / Leaflet.MovingMarker

A Leaflet plug-in to create moving marker
MIT License
342 stars 177 forks source link

feature:add real time retate function #34

Open zjffun opened 5 years ago

zjffun commented 5 years ago

Add the function to rotate markers along the route, which can be used to show more cool track animations

MinSomai commented 4 months ago

wow dude @zjffun, you are a live saver. thanks for the PR

zjffun commented 4 months ago

@MinSomai Glad this can help you :)

MinSomai commented 4 months ago

BTW, arrow was pointing up when zooming in/out.

We are using turfjs and this seems to fix the issue.

Putting the code here in case someone faces the same issue.

Thanks again for the PR.

  _updateRotation: function () {
      const cord1 = turf.point([this._currentLine[0].lng, this._currentLine[0].lat]);
      const cord2 = turf.point([this._currentLine[1].lng, this._currentLine[1].lat]);

      let bearing = turf.bearing(cord1, cord2);
      this.setRotationAngle(bearing / 2 + 0 / 2); // 0/2 <- here 0, is for configuration/rotation offset.
      this.setRotationOrigin(this.options.rotationOrigin);

    // if (this._rotationAngle) {
    //   this._icon.style[L.DomUtil.TRANSFORM + "Origin"] = this.options.rotationOrigin;

    //   this._icon.style[L.DomUtil.TRANSFORM] +=
    //     " rotateZ(" + (this.options.initialRotationAngle + this._rotationAngle) + "deg)";
    // }
  },