different images for players

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

@@ -67,7 +67,16 @@ export const Draw = L.Class.extend({
 
     // 目标如果使用图片，先加载图片
     if (this.targetOptions.useImg) {
-      const img = new Image();
+      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;
       };
@@ -303,17 +312,25 @@ export const Draw = L.Class.extend({
     };
     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);
+
+    //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();
   },
 
-  /*   _drawShipImage: function(trackpoint) {
+  // _createImage: async function() {
+  //   const newimg = await new Image();
+  //   newimg.onload = async () => {};
+  //   newimg.onerror = async () => {
+  //     throw new Error("img load error!");
+  //   };
+  //   return await newimg;
+  // },
+
+  /*   _drawShipImage: function(trackpoint, info) {
     let point = this._getLayerPoint(trackpoint);
     let width = this.targetOptions.width;
     let height = this.targetOptions.height;
@@ -330,6 +347,7 @@ export const Draw = L.Class.extend({
       width,
       height
     );
+    console.log(this._targetImg);
     this._ctx.restore();
   }, */