版本更新

suerprisePlus

2024-07-16 6069325e1a37cf0462afda1627d4c660735dc57e

 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,29 @@
  data() {
    return {
      errInfoMessage: null,
      errInfoFlag: false
      errInfoFlag: false,
      lengedList:[
            {
              name: "军事目标",
              color: "#73afff"
            },
            {
              name: "政治目标",
              color: "#fffd72"
            },
            {
              name: "经济目标",
              color: "#fabc56"
            },
            {
              name: "社会目标",
              color: "#272424"
            },
            {
              name: "民宅",
              color: "#979696"
            }
          ]
    };
  },
  computed: {
@@ -35,9 +65,12 @@
    }
  },
  methods: {
    getBackgroundColor(res) {
      return `background-color: ${res.color};`
    },
    setMapViewStart() {
      mapView.initMap();
     

    },
    setErrorMessage(res) {
      this.errInfoMessage = res;
@@ -53,10 +86,7 @@
          type: "erroInfo",
          value: obj.val
        });
        mapServer.addServer({
          sourceType: "tms",
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        });

      }
      this.$nextTick(() => {
        this.errInfoFlag = false;
@@ -78,6 +108,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: 60px;
  height: 30px;
}

.infoBox {
  left: 50%;
  top: 50%;
@@ -92,13 +155,16 @@
  color: white;
  transform: translate(-50%, -50%);
}

.infoBottom {
  margin-top: 10px;
  float: right;
}

.infoBottom :first-child {
  margin-right: 10px;
}

.infoBottom button {
  width: 50px;

@@ -118,6 +184,7 @@
  font-size: 16px;
  line-height: 30px;
}

.infoCount {
  font-size: 14px;
  line-height: 30px;