shows icons based on group class

src/components/ReplayMap.js

@@ -27,20 +27,22 @@ export default class ReplayMap extends React.Component {
 
   async componentDidMount() {
     await this.fetchPlayerData();
-    await this.fetchDrawingData();
-    this.tickDrawings();
+    //await this.fetchDrawingData();
+    //this.tickDrawings();
     this.replay();
   }
 
   componentWillReceiveProps(nextProps) {}
 
   // cloud game a1231e2b-aa29-494d-b687-ea2d48cc23df
+  // local game wimma 15e9563b-e621-4ba1-a440-1b21c7774923
+  // local game vbox 16977b13-c419-48b4-b7d6-e7620f27bf39
   // fetch player locations from the game
   fetchPlayerData = async () => {
     await fetch(
       `${
         process.env.REACT_APP_API_URL
-      }/replay/players/15e9563b-e621-4ba1-a440-1b21c7774923`,
+      }/replay/players/16977b13-c419-48b4-b7d6-e7620f27bf39`,
       {
         method: "GET"
       }
@@ -61,9 +63,10 @@ export default class ReplayMap extends React.Component {
 
   fetchDrawingData = async () => {
     await fetch(
-      `${
-        process.env.REACT_APP_API_URL
-      }/replay/a1231e2b-aa29-494d-b687-ea2d48cc23df`,
+      `${process.env.REACT_APP_API_URL}/replay/{
+		"lng": 25.72588,
+		"lat": 62.23147
+}`,
       {
         method: "GET"
       }

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

@@ -67,23 +67,15 @@ export const Draw = L.Class.extend({
 
     // 目标如果使用图片，先加载图片
     if (this.targetOptions.useImg) {
-      let img = new Image();
-      let img2 = new Image();
-      img2.onload = () => {
-        this._targetImg2 = img2;
-      };
-      img2.onerror = () => {
-        throw new Error("img load error!");
-      };
-      img2.src = this.targetOptions.imgUrl;
-
-      img.onload = () => {
-        this._targetImg = img;
-      };
-      img.onerror = () => {
-        throw new Error("img load error!");
-      };
-      img.src = this.targetOptions.imgUrl;
+      /*       let img2 = new Image();
+            img2.onload = () => {
+              this._targetImg2 = img2;
+            };
+            img2.onerror = () => {
+              throw new Error("img load error!");
+            };
+            img2.src = this.targetOptions.imgUrl; */
+      this._targetImg = [];
     }
   },
 
@@ -312,11 +304,25 @@ export const Draw = L.Class.extend({
     };
     this._ctx.save();
     this._ctx.translate(point.x, point.y);
-
+    let image;
+    this._targetImg.map(img => {
+      if (img.icon == info[0]["value"]) {
+        image = img;
+      }
+    });
+    if (!image) {
+      let img = new Image();
+      img.onload = () => {
+        this._targetImg.push(img);
+      };
+      img.onerror = () => {
+        throw new Error("img load error!");
+      };
+      img.src = info[0]["value"];
+      img.icon = info[0]["value"];
+      image = img;
+    }
     //let svg = document.createElementNS(`../${info[0]["value"]}`, "svg"); //http://www.sclance.com/pngs/random-png/random_png_1136179.png
-    let image =
-      info[0]["value"] === "infantry.svg" ? this._targetImg : this._targetImg2;
-    image.src = `../${info[0]["value"]}`;
     this._ctx.drawImage(image, 0 - offset.x, 0 - offset.y, width, height);
     this._ctx.restore();
   },