mapdrawing replay wip

src/components/ReplayMap.js

@@ -73,7 +73,10 @@ export default class ReplayMap extends React.Component {
     }).addTo(this.map);
     // import options from ReplayConfig.js
     this.trackplayback = new L.TrackPlayBack(this.state, this.map, options);
-    this.trackplaybackControl = L.trackplaybackcontrol(this.trackplayback);
+    this.trackplaybackControl = L.trackplaybackcontrol(
+      this.trackplayback,
+      this.map
+    );
     this.trackplaybackControl.addTo(this.map);
   };
 

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

@@ -9,10 +9,60 @@ export const TrackPlayBackControl = L.Control.extend({
     autoPlay: false
   },
 
-  initialize: function(trackplayback, options) {
+  initialize: function(trackplayback, map, options) {
+    this.map = map;
     L.Control.prototype.initialize.call(this, options);
     this.trackPlayBack = trackplayback;
     this.trackPlayBack.on("tick", this._tickCallback, this);
+    this.leafletDrawings = [];
+  },
+
+  // 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);
+    };
+    var createPolyline = data => {
+      data.geometry.coordinates = data.geometry.coordinates.map(cords => {
+        return [cords[1], cords[0]];
+      });
+      return L.polyline(data.geometry.coordinates, {
+        color: data.properties.color
+      }).addTo(this.map);
+    };
+    var createPolygon = data => {
+      // geoJSON has lat lng wrong way so turn them around
+      data.geometry.coordinates = data.geometry.coordinates[0].map(cords => {
+        return [cords[1], cords[0]];
+      });
+      return L.polygon(data.geometry.coordinates, {
+        color: data.properties.color
+      }).addTo(this.map);
+    };
+    var createRectangle = data => {
+      return L.rectangle(data.geometry.coordinates, {
+        color: data.properties.color
+      }).addTo(this.map);
+    };
+    var createCircle = data => {
+      return L.circle(data.geometry.coordinates, {
+        radius: data.properties.radius
+      }).addTo(this.map);
+    };
+    // handle faulty cords
+    if (!data.geometry.coordinates[0][0]) {
+      return null;
+    }
+
+    var obj = {
+      Marker: createMarker,
+      LineString: createPolyline,
+      Polygon: createPolygon,
+      Rectangle: createRectangle,
+      Circle: createCircle
+    };
+    return obj[data.geometry.type](data);
   },
 
   onAdd: function(map) {
@@ -383,6 +433,23 @@ export const TrackPlayBackControl = L.Control.extend({
     for (let i = 0; i < this._factionScoreboxes.length; i++) {
       this._factionScoreboxes[i].innerHTML = this.trackPlayBack.passScores(i);
     }
+    // tick drawings
+    let drawings = this.trackPlayBack.passDrawings();
+    for (let i = 0; i < drawings.length; i++) {
+      // skip if undefined
+      if (!drawings[i]) return;
+      // remove if it's not active
+      if (!drawings[i].drawingIsActive && this.leafletDrawings[i]) {
+        this.map.removeLayer(this.leafletDrawings[i]);
+        this.leafletDrawings[i] = null;
+        return;
+      }
+      // else draw the marker if it's not drawn
+      if (!this.leafletDrawings[i]) {
+        this.leafletDrawings[i] = this._drawFunction(drawings[i].data);
+      }
+    }
+    //
     // 更新时间轴
     this._slider.value = e.time;
     // 播放结束后改变播放按钮样式
@@ -395,6 +462,6 @@ export const TrackPlayBackControl = L.Control.extend({
   }
 });
 
-export const trackplaybackcontrol = function(trackplayback, options) {
-  return new TrackPlayBackControl(trackplayback, options);
+export const trackplaybackcontrol = function(trackplayback, map, options) {
+  return new TrackPlayBackControl(trackplayback, map, options);
 };

src/track-playback/src/leaflet.trackplayback/trackcontroller.js

@@ -8,12 +8,14 @@ import { Track } from "./track";
  * 控制轨迹和绘制
  */
 export const TrackController = L.Class.extend({
-  initialize: function(tracks = [], draw, allScores, options) {
+  initialize: function(data, draw, options) {
     L.setOptions(this, options);
-    this._activeScores = [0, 0];
-    this._tracks = [];
-    this._scores = allScores;
-    this.addTrack(tracks);
+    this._activeScores = [];
+    this._activeDrawings = [];
+    this._tracks = data.tracks;
+    this._scores = data.scores;
+    this._drawings = data.drawings;
+    this.addTrack(data.tracks || []);
 
     this._draw = draw;
 
@@ -45,11 +47,13 @@ export const TrackController = L.Class.extend({
 
   drawTracksByTime: function(time) {
     this._draw.clear();
+    // draw player locations
     for (let i = 0, len = this._tracks.length; i < len; i++) {
       let track = this._tracks[i];
       let tps = track.getTrackPointsBeforeTime(time);
       if (tps && tps.length) this._draw.drawTrack(tps);
     }
+    // add scores to counter
     for (let i = 0; i < this._scores.length; i++) {
       let newScore = 0;
       let scores = this._scores[i];
@@ -60,6 +64,16 @@ export const TrackController = L.Class.extend({
       }
       this._activeScores[i] = newScore;
     }
+    // draw mapdrawings to map
+    for (let i = 0; i < this._drawings.length; i++) {
+      let drawing;
+      for (let j = 0; j < this._drawings[i].length; j++) {
+        if (this._drawings[i][j].timestamp < time) {
+          drawing = this._drawings[i][j];
+        }
+      }
+      if (drawing) this._activeDrawings[i] = drawing;
+    }
   },
 
   _updateTime: function() {

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

@@ -27,9 +27,12 @@ export const TrackPlayBack = L.Class.extend({
     this.tracks = this._initTracks(data.players);
     this.draw = new Draw(map, drawOptions);
     this.trackController = new TrackController(
-      this.tracks,
-      this.draw,
-      data.scores
+      {
+        tracks: this.tracks,
+        scores: data.scores,
+        drawings: data.drawings
+      },
+      this.draw
     );
     this.clock = new Clock(this.trackController, options.clockOptions);
 
@@ -122,9 +125,14 @@ export const TrackPlayBack = L.Class.extend({
   passFactions: function() {
     return this.draw.filterOptions.factions;
   },
+  // pass current scores to control panel
   passScores: function(i) {
     return this.trackController._activeScores[i];
   },
+  // pass current drawings to control panel
+  passDrawings: function() {
+    return this.trackController._activeDrawings;
+  },
   dispose: function() {
     this.clock.off("tick", this._tick);
     this.draw.remove();