suerprisePlus
2024-07-04 81f92eb9fb83ed5d8ac0b0a5c206315416f10df0
src/views/mapView/mapView.vue
@@ -1,5 +1,13 @@
<template>
  <div id="sdkContainer" class="mapView">
    <div class="mapLenged" v-if="$store.state.showLenged">
      <ul>
        <li v-for="(item, key) in lengedList" :key="key">
          <div class="mapcolor" :style="getBackgroundColor(item)"></div>
          <div class="mapTitle">{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <div class="infoBox" v-show="errInfoFlag">
      <div id="inforMessage"></div>
      <div class="infoBottom">
@@ -19,7 +27,24 @@
  data() {
    return {
      errInfoMessage: null,
      errInfoFlag: false
      errInfoFlag: false,
      lengedList: [{
        name: "军事目标",
        color: "#409EFF"
      }, {
        name: "政治目标",
        color: "#FFFF00"
      }, {
        name: "经济目标",
        color: "#FFA500"
      }, {
        name: "社会目标",
        color: "#000000"
      }, {
        name: "民宅",
        color: "#808080"
      }
      ]
    };
  },
  computed: {
@@ -35,9 +60,12 @@
    }
  },
  methods: {
    getBackgroundColor(res) {
      return `background-color: ${res.color};`
    },
    setMapViewStart() {
      mapView.initMap();
    },
    setErrorMessage(res) {
      this.errInfoMessage = res;
@@ -53,7 +81,7 @@
          type: "erroInfo",
          value: obj.val
        });
      }
      this.$nextTick(() => {
        this.errInfoFlag = false;
@@ -75,6 +103,39 @@
  height: 100%;
  position: absolute;
}
.mapLenged {
  position: absolute;
  z-index: 40;
  border: 1px solid #808080;
  background: rgba(255, 255,255, .7);
  padding: 4px;
  bottom: 20px;
  left: 20px;
  border-radius: 10px;
  /* color: gray; */
}
.mapLenged .mapTitle {
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 16px;
}
.mapLenged li {
  list-style-type: none;
  display: flex;
  line-height: 20px;
  margin: 10px;
}
.mapLenged .mapcolor {
  width: 100px;
  height: 30px;
}
.infoBox {
  left: 50%;
  top: 50%;
@@ -89,13 +150,16 @@
  color: white;
  transform: translate(-50%, -50%);
}
.infoBottom {
  margin-top: 10px;
  float: right;
}
.infoBottom :first-child {
  margin-right: 10px;
}
.infoBottom button {
  width: 50px;
@@ -115,6 +179,7 @@
  font-size: 16px;
  line-height: 30px;
}
.infoCount {
  font-size: 14px;
  line-height: 30px;