vue3 数据可视化大屏项目开发中，为了美观在渲染地图时，会给地图添加一个边框效果，今天整理的是高德地图边框效果实例。

实现方法

给地图添加一个div遮罩，通过css给这个遮罩添加一个内阴影效果。box-shadow: inset 0px 0px 32px 0px rgba(68, 151, 250, 0.8);

为了避免遮罩影响地图操作，我们给遮罩一个穿透点击效果：pointer-events: none;

最后再在顶部添加一个标题样式，一个高德地图边框效果就出来了。

演示实例

效果代码

<template>
  <div class="maps">
    <div ref="allmap" class="bodymap"></div>
    <div class="biankuang">
      <div class="biankuangTitle">
        <span>今日校门进出分布</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    }
  },
  components: {},
  created() {

  },
  mounted() {
    this.getGdMap()
  },

  methods: {
    // 高德地图相关
    getGdMap() {
      var that = this;
      that.map = new AMap.Map(this.$refs.allmap, {
        scrollWheel: true,
        viewMode: '3D',
        resizeEnable: true,
        zoom: 17.5,
        maxZoom: 30,
        minZoom: 0,
        center: [118.166445, 24.462911],
      });
    },
  },
  filters: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap {
  width: 100%;
  height: 100%;
  position: relative;
}

.maps {
  width: 100%;
  height: 100%;
  position: relative;

}

.biankuang {
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  box-shadow: inset 0px 0px 32px 0px rgba(68, 151, 250, 0.8);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.biankuangTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: row;
  align-content: flex-start;
  background: url("./assets/biankuang.png") center top no-repeat;
  width: 100%;
  height: 28px;
  background-size: 353px 28px;

  span {
    font-size: 20px;
    font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 1px;
    background: linear-gradient(88deg, #1BCFF2 0%, #1EFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>