给地图四面添加蒙层

效果如下图，

<div class="main layout"> 

    <map3d class="mapContainer"  ref="map3d" v-show="!isshowd" :menunum="menunum" ></map3d> 

</div>

.main {

  width: 100%;

  height: 100%;

  position: absolute;

  &::before,

  &::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    z-index: 1;

    pointer-events: none;

  }

  &::before {

    top: 0;

    height: 284px;

    background-image: url("../assets/topbg.png");

    background-size: 100% 100%;

    background-repeat: no-repeat;

  }

  &::after {

    bottom: 0;

    height: 288px;

    background-image: url("../assets/bottombg.png");

    background-size: 100% 100%;

    background-repeat: no-repeat;

  }

}

.mapContainer {

  width: 100%;

  height: 100%;

  position: absolute;

  &::before,

  &::after {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    z-index: 2;

    pointer-events: none;

  }

  &::before {

    width: 284px;

    left: 0;

    background-image: url("../assets/leftbg.png");

    background-size: 100% 100%;

    background-repeat: no-repeat;

  }

  &::after {

    width: 284px;

    right: 0;

    background-image: url("../assets/rightbg.png");

    background-size: 100% 100%;

    background-repeat: no-repeat;

  }

}