live map v2

src/components/ActionDialogs/PlayerMap.vue

@@ -1,24 +1,27 @@
 <template>
   <div>
     <md-dialog :md-active.sync="show" @close="show=false">
-      <l-map :crs="Simple()" v-if="map_exists" style="height: 800px; width: 800px" :min-zoom="-3" :set-zoom="-1" :center="[cords[map_name].y, cords[map_name].x]">
+      <l-map :crs="Simple()" v-if="map_exists" style="height: 800px; width: 800px" :min-zoom="-1" :zoom="-1" :center="[cords[map_name].y, cords[map_name].x]">
         <l-image-overlay :url="`https://tf2.pblr-nyk.pro/site_content/images/maps/${this.map_name}.jpg`" :bounds="[[0,0], [2160, 3840]]"/>
         <l-marker v-for="player in players" :key="player.id" :lat-lng="getRektPos(player.pos)">
-          <l-icon class-name="icom-map">{{player.name}}</l-icon>
+          <l-icon class-name="pm_icon" :icon-url="getClzEmblem(player.team, player.clz)"/>
+          <l-popup><p>{{player.name}}</p></l-popup>
         </l-marker>
       </l-map>
       <h4 v-else>Вид карты {{map_name}} отсутвует!</h4>
+      <md-button class="btn-default" v-on:click="showMe(false)">Закрыть</md-button>
     </md-dialog>
   </div>
 </template>
 
 <script>
-import { LMap, LImageOverlay, LMarker, LIcon } from "vue2-leaflet";
+import {LMap, LImageOverlay, LMarker, LIcon, LPopup} from "vue2-leaflet";
 import axios from "axios";
 import {Simple} from "leaflet/src/geo/crs/CRS.Simple";
+import {toLatLng} from "leaflet/src/geo/LatLng";
 export default {
   name: "PlayerMap",
-  components: {LMap, LImageOverlay, LMarker, LIcon},
+  components: {LMap, LImageOverlay, LMarker, LIcon, LPopup},
   props: {
     players: {
       type: Array,
@@ -37,6 +40,11 @@ export default {
         "x":2620,
         "y":1427,
         "hu":5
+      },
+      "zavod_stoilo_night":{
+        "x":1920,
+        "y":1050,
+        "hu":4
       }
     }
   }),
@@ -54,14 +62,67 @@ export default {
           .catch(() => this.map_exists = false)
     },
     getRektPos(pos) {
-      console.log(" ");
-      console.log(pos[0], pos[1]);
-      console.log(pos[0] / this.cords[this.map_name].hu, pos[1] / this.cords[this.map_name].hu);
-      var player_x = this.cords[this.map_name].x + (pos[0] / this.cords[this.map_name].hu);
-      var player_y = this.cords[this.map_name].y + (pos[1] / this.cords[this.map_name].hu);
-      console.log(player_x, player_y);
-      return [player_y, player_x];
+      //console.log(" ");
+      //console.log(pos[0], pos[1]);
+      //console.log(pos[0] / this.cords[this.map_name].hu, pos[1] / this.cords[this.map_name].hu);
+      const player_x = this.cords[this.map_name].x + (pos[0] / this.cords[this.map_name].hu);
+      const player_y = this.cords[this.map_name].y + (pos[1] / this.cords[this.map_name].hu);
+      //console.log(player_x, player_y);
+      return toLatLng(player_y, player_x);
+    },
+    getStyle4Icon(team, clz) {
+      let stl = {
+        "width": "32px !important",
+        "height": "32px !important",
+        "margin": "0 !important;"
+      };
+      const img = this.getClzEmblem(team, clz);
+      if (img !== null) {
+        stl["background-image"] = img;
+      }
+      console.log(stl["background-image"]);
+      return stl;
+    },
+    getClzEmblem(team, clz) {
+      const t = this.calcTeam(team);
+      const c = this.calcClass(clz);
+      if (t === null || c == null) {
+        return null;
+      }
+      return require(`@/assets/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`);
+    },
+    calcTeam(team) {
+      switch (team) {
+        case 0: return null;
+        case 1: return null;
+        case 2: return "RED";
+        case 3: return "BLU";
+        default: return null;
+      }
+    },
+    calcClass(clz) {
+      switch (clz) {
+        case 0: return null;
+        case 1: return "Scout";
+        case 2: return "Sniper";
+        case 3: return "Soldier";
+        case 4: return "Demoman";
+        case 5: return "Medic";
+        case 6: return "Heavy";
+        case 7: return "Pyro";
+        case 8: return "Spy";
+        case 9: return "Engineer";
+        default: return null;
+      }
     }
   }
 }
-</script>
+</script>
+
+<style>
+.pm_icon {
+  width: 24px !important;
+  height: 24px !important;
+  margin: 0 !important;
+}
+</style>