feat:3D地图重构

ZhangXianQiang

2024-03-01 6ff83c7075d745834208fb232abeaf51019d78c3

 src/views/daoAnOffice/chartgd.vue

@@ -6,10 +6,6 @@
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
      <div @click="toggleTrafic" class="item-tb">
        <p class="item-tb-p">地图切换</p>
        <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
      </div>

    </div>
    <div class="info-box">
@@ -98,7 +94,7 @@
  </div>
</template>

<script lang="ts" setup>
<script setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {Pointer} from "@element-plus/icons-vue";
@@ -129,9 +125,6 @@

}

const toggleTrafic = () => {
  emit('changeDt')
};
const fencingConstruction = () => {
  //构建信息窗体中显示的内容
  let info = [];
@@ -593,8 +586,10 @@
}
// initMap();
</script>
<style>
html, body, #container {
<style scoped>
html,
body,
#container {
  height: 100%;
  width: 100%;
}
@@ -664,17 +659,13 @@

span {
  margin-left: 5px;
  //font-size: 11px;
}

.info-middle img {
  //float: left;
  height: 100%;
  width: 100%;
  margin-right: 6px;
}
</style>
<style lang="scss" scoped>

.home{
  height: 100%;
@@ -682,22 +673,25 @@
  padding: 0px;
  margin: 0px;
  position: relative;

  .info-div{
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    //background-color: #4E2749;
    background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;

    .item-tb-img{
      width: 20px;
      height: 20px;
    }

    .info-div-p{
      flex: 1;
      margin-left: 5px;
@@ -706,30 +700,34 @@
      justify-content: space-between;
    }
  }

  .info-box {
    position: absolute;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    height: 100%;
    background-color: #1f1f1f;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .item-tb{
      cursor: pointer;
    margin-top: 20px;

    .item-tb-img{
      width: 65px;
    }

    .item-tb-p{
      line-height:35px;
      //background: #00adb5;
      background: #00adb5;
      color:#fff;
      text-align: center;
      text-shadow:
@@ -737,15 +735,18 @@
    }
  }
}

.ul{
  margin-top: 10px;
  height: 60%;
  overflow-y: scroll;

  .li{
    padding: 5px 10px;
    background: #FFFFFF;
    margin-bottom: 10px;
    min-height: 60px;

    .d-flex{
      background: #FFFFFF;
      color: #1f1f1f;
@@ -761,6 +762,7 @@
  padding: 0px;
  margin: 0px;
}

.btn{
  padding: 10px;
  display: flex;
@@ -773,6 +775,7 @@
:deep() .amap-logo {
  display: none !important;
}

:deep() .amap-copyright {
  display: none !important;
}