高德地图vue-amap实现区域掩膜卫星图且背景为灰色

最新推荐文章于 2025-02-24 11:28:49 发布

jieyucx

最新推荐文章于 2025-02-24 11:28:49 发布

阅读量2.5k

点赞数 18

分类专栏：高德地图 vue的那些事文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/jieyucx/article/details/135471378

版权

本文介绍了如何在Vue应用中使用vue-amap插件的1.4.4版本实现区域掩膜效果，即在指定区域显示卫星图，区域外显示灰色背景。通过地理编码获取北京市边界，设置地图样式，以及使用Object3DLayer和Polyline进行区域标识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-amap高德1.4.4，区域掩膜效果

区域掩膜
区域内展示卫星图，区域外背景灰色–>实现原理，先用灰色样式，当区域掩膜实现之后再添加卫星图层

效果如下：

在这里插入图片描述
代码如下：

<template>
  <div>
    <div class="amap-page-container">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        :pitch="pitch"
        viewMode="3D"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      pitch</