player replay wip

public/light-infantry.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="591.0625" height="372.0625" id="svg2">
+  <defs id="defs4">
+    <linearGradient id="linearGradient3777">
+      <stop id="stop3779" style="stop-color:#b35800;stop-opacity:1" offset="0"/>
+    </linearGradient>
+  </defs>
+  <metadata id="metadata7">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g transform="translate(-72.28125,-210.75)" id="layer1">
+    <path d="M 585.90976,366.37406 4.2663332,3.7357361" transform="translate(72.28125,210.75)" id="path3881" style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+    <path d="M 584.7946,6.0174311 5.6411055,365.7946" transform="translate(72.28125,210.75)" id="path3883" style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+    <rect width="583.06555" height="364.06042" x="76.266335" y="214.73877" id="rect3859" style="fill:none;stroke:#0b04fb;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+  </g>
+  <text x="293.67578" y="344.20807" id="text2988" xml:space="preserve" style="font-size:50px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"><tspan x="293.67578" y="344.20807" id="tspan2990" style="font-size:100px">L</tspan></text>
+</svg>
\ No newline at end of file

src/components/ReplayMap.js

@@ -15,6 +15,8 @@ export default class ReplayMap extends React.Component {
     this.state = {
       // stores the playback object
       playback: null,
+      // stores player locations from backend
+      data: null,
       // stores all drawings from backend
       allGeoJSON: [],
       // stores all active drawings on the map
@@ -38,7 +40,7 @@ export default class ReplayMap extends React.Component {
     await fetch(
       `${
         process.env.REACT_APP_API_URL
-      }/replay/players/a1231e2b-aa29-494d-b687-ea2d48cc23df`,
+      }/replay/players/15e9563b-e621-4ba1-a440-1b21c7774923`,
       {
         method: "GET"
       }
@@ -59,10 +61,9 @@ export default class ReplayMap extends React.Component {
 
   fetchDrawingData = async () => {
     await fetch(
-      /*       `${
+      `${
         process.env.REACT_APP_API_URL
-      }/replay/a1231e2b-aa29-494d-b687-ea2d48cc23df`, */
-      `http://localhost:5000/replay/15e9563b-e621-4ba1-a440-1b21c7774923`,
+      }/replay/a1231e2b-aa29-494d-b687-ea2d48cc23df`,
       {
         method: "GET"
       }
@@ -114,7 +115,7 @@ export default class ReplayMap extends React.Component {
         // whether to use an image to display target, if false, the program provides a default
         useImg: true,
         // if useImg is true, provide the imgUrl
-        imgUrl: "../infantry-red.svg",
+        imgUrl: "../light-infantry.svg",
         // the width of target, unit: px
         width: 60,
         // the height of target, unit: px
@@ -160,11 +161,9 @@ export default class ReplayMap extends React.Component {
           <DrawGeoJSON geoJSONLayer={this.state.activeGeoJSON} />
         )}
       </Map> */
-      <div className="map" ref="map">
-        {/*         {this.state.activeGeoJSON.features && (
-          <DrawGeoJSON geoJSONLayer={this.state.activeGeoJSON} />
-        )} */}
-      </div>
+      <React.Fragment>
+        <div className="map" ref="map" />
+      </React.Fragment>
     );
   }
 }

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

@@ -176,8 +176,9 @@ export const Draw = L.Class.extend({
     }
     // 画船
     let targetPoint = trackpoints[trackpoints.length - 1];
+    let info = trackpoints[0].info;
     if (this.targetOptions.useImg && this._targetImg) {
-      this._drawShipImage(targetPoint);
+      this._drawShipImage(targetPoint, info);
     } else {
       this._drawShipCanvas(targetPoint);
     }
@@ -292,7 +293,27 @@ export const Draw = L.Class.extend({
     this._ctx.restore();
   },
 
-  _drawShipImage: function(trackpoint) {
+  _drawShipImage: function(trackpoint, info) {
+    let point = this._getLayerPoint(trackpoint);
+    let width = this.targetOptions.width;
+    let height = this.targetOptions.height;
+    let offset = {
+      x: width / 2,
+      y: height / 2
+    };
+    this._ctx.save();
+    this._ctx.translate(point.x, point.y);
+    let svg = document.createElementNS(`../${info[0]["value"]}`, "svg");
+    let img = new Image();
+    img.onload = () => {
+      this._ctx.drawImage(img, 0 - offset.x, 0 - offset.y, width, height);
+    };
+    img.src = `../${info[0]["value"]}`;
+    console.log(img);
+    this._ctx.restore();
+  },
+
+  /*   _drawShipImage: function(trackpoint) {
     let point = this._getLayerPoint(trackpoint);
     let width = this.targetOptions.width;
     let height = this.targetOptions.height;
@@ -310,7 +331,7 @@ export const Draw = L.Class.extend({
       height
     );
     this._ctx.restore();
-  },
+  }, */
 
   _getTooltipText: function(targetobj) {
     let content = [];