From 25279041d50c34983d8e7fb0c3f65185764d4338 Mon Sep 17 00:00:00 2001
From: L4168 <L4168@student.jamk.fi>
Date: Fri, 19 Jul 2019 13:10:53 +0300
Subject: [PATCH] mapdrawing replay wip
---
src/components/ReplayMap.js | 5 +-
.../control.trackplayback/control.playback.js | 73 ++++++++++++++++++-
.../leaflet.trackplayback/trackcontroller.js | 24 ++++--
.../leaflet.trackplayback/trackplayback.js | 14 +++-
4 files changed, 104 insertions(+), 12 deletions(-)
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index cee0f20..ec30ce8 100644
--- a/src/components/ReplayMap.js
+++ b/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);
};
diff --git a/src/track-playback/src/control.trackplayback/control.playback.js b/src/track-playback/src/control.trackplayback/control.playback.js
index 2d2e9f5..1833d28 100644
--- a/src/track-playback/src/control.trackplayback/control.playback.js
+++ b/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);
};
diff --git a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js b/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
index b623033..8dc3103 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
+++ b/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() {
diff --git a/src/track-playback/src/leaflet.trackplayback/trackplayback.js b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
index 3d40db1..d707967 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackplayback.js
+++ b/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();
--
GitLab