Mapdrawing replay

src/track-playback/src/control.trackplayback/control.playback.js

@@ -17,11 +17,16 @@ export const TrackPlayBackControl = L.Control.extend({
     this.leafletDrawings = [];
   },
 
+  // absolutely disgusting, never use geojson
   // init object to pass drawing data to right function
   _drawFunction: function(data) {
     // create leaflet objects
     var createMarker = data => {
-      return L.polyline(data.geometry.coordinates).addTo(this.map);
+      data.geometry.coordinates = [
+        data.geometry.coordinates[1],
+        data.geometry.coordinates[0]
+      ];
+      return L.marker(data.geometry.coordinates).addTo(this.map);
     };
     var createPolyline = data => {
       data.geometry.coordinates = data.geometry.coordinates.map(cords => {
@@ -46,21 +51,27 @@ export const TrackPlayBackControl = L.Control.extend({
       }).addTo(this.map);
     };
     var createCircle = data => {
+      data.geometry.coordinates = [
+        data.geometry.coordinates[1],
+        data.geometry.coordinates[0]
+      ];
       return L.circle(data.geometry.coordinates, {
         radius: data.properties.radius
       }).addTo(this.map);
     };
     // handle faulty cords
-    if (!data.geometry.coordinates[0][0]) {
+    if (!data.geometry.coordinates[0][0] && !data.geometry.type === "Point") {
       return null;
     }
-
+    if (data.geometry.type === "Point" && !data.properties.radius) {
+      data.geometry.type = "Marker";
+    }
     var obj = {
       Marker: createMarker,
       LineString: createPolyline,
       Polygon: createPolygon,
       Rectangle: createRectangle,
-      Circle: createCircle
+      Point: createCircle
     };
     return obj[data.geometry.type](data);
   },
@@ -429,6 +440,14 @@ export const TrackPlayBackControl = L.Control.extend({
     // 更新时间
     let time = this.getTimeStrFromUnix(e.time);
     this._infoCurTime.innerHTML = time;
+    this._slider.value = e.time;
+    // 播放结束后改变播放按钮样式
+    if (e.time >= this.trackPlayBack.getEndTime()) {
+      L.DomUtil.removeClass(this._playBtn, "btn-start");
+      L.DomUtil.addClass(this._playBtn, "btn-stop");
+      this._playBtn.setAttribute("title", "play");
+      this.trackPlayBack.stop();
+    }
     // tick scores
     for (let i = 0; i < this._factionScoreboxes.length; i++) {
       this._factionScoreboxes[i].innerHTML = this.trackPlayBack.passScores(i);
@@ -437,6 +456,11 @@ export const TrackPlayBackControl = L.Control.extend({
     let drawings = this.trackPlayBack.passDrawings();
     for (let i = 0; i < drawings.length; i++) {
       // skip if undefined
+      if (!drawings[i] && this.leafletDrawings[i]) {
+        this.map.removeLayer(this.leafletDrawings[i]);
+        this.leafletDrawings[i] = null;
+        return;
+      }
       if (!drawings[i]) return;
       // remove if it's not active
       if (!drawings[i].drawingIsActive && this.leafletDrawings[i]) {
@@ -445,20 +469,13 @@ export const TrackPlayBackControl = L.Control.extend({
         return;
       }
       // else draw the marker if it's not drawn
-      if (!this.leafletDrawings[i]) {
+      if (drawings[i].drawingIsActive && !this.leafletDrawings[i]) {
         this.leafletDrawings[i] = this._drawFunction(drawings[i].data);
+        console.log(this.leafletDrawings[i]);
       }
     }
     //
     // 更新时间轴
-    this._slider.value = e.time;
-    // 播放结束后改变播放按钮样式
-    if (e.time >= this.trackPlayBack.getEndTime()) {
-      L.DomUtil.removeClass(this._playBtn, "btn-start");
-      L.DomUtil.addClass(this._playBtn, "btn-stop");
-      this._playBtn.setAttribute("title", "play");
-      this.trackPlayBack.stop();
-    }
   }
 });