No.20可视化大屏--vite+vue3 高德地图之添加地图控件

 

1.缩放控件

     // 添加工具条控件----缩放控件
     const toolbar = new AMap.ToolBar({
        position: {
           top: 'auto',
           right: '10px',
           left: 'auto',
           bottom: '30px'
        }
      });
      map.addControl(toolbar);

　　

2.比例尺控件

    // 添加工具条控件----比例尺控件
     const scale = new AMap.Scale({
        position: {
           top: 'auto',
           right: '10px',
           left: 'auto',
           bottom: '5px'
        }
      });
      map.addControl(scale);

　　

3.控制罗盘控件

    // 添加工具条控件----控制罗盘控件
     const controlBar = new AMap.ControlBar({
        position: {
           top: '10px',
           right: '10px',
           left: 'auto',
           bottom: 'auto'
        }
      }
     );
      map.addControl(controlBar);

　　

4.定位控件

          // 添加工具条控件----定位控件
     const geolocation = new AMap.Geolocation({
        position: {
           top: '60px',
           right: '13px',
           left: 'auto',
           bottom: 'auto'
        }
      }
     );
      map.addControl(geolocation);

　　

5.鹰眼控件

    // 添加工具条控件----鹰眼控件
    const hawkeye = new AMap.HawkEye({
        position: {
           top: '2px',
           right: 'auto',
           left: '13px',
           bottom: 'auto'
        }
      }
     );
      map.addControl(hawkeye);

　　

6.图层切换控件

    // 添加工具条控件----图层切换控件
    // const maptype1 = new AMap.MapType({
    //   defaultType: 0, // 默认底图类型（0：默认图层，1：卫星图层，2：实时交通图层）
    //   showTraffic: true,
    //   showRoad: true,
    //   position: 'LB' 
    //   }
    //  );
    //   map.addControl(maptype1);

 

完整代码：

<script setup>
import { onMounted, onUnmounted } from "vue";
// onMounted: Vue 生命周期钩子，当组件挂载后自动执行
// onUnmounted: 当组件卸载时自动执行，用来做清理。
import AMapLoader from "@amap/amap-jsapi-loader";
// AMapLoader: 用于动态加载高德地图 JavaScript API

let map = null;

onMounted(() => {
  // 安全码配置，密钥   
  window._AMapSecurityConfig = {
    securityJsCode: "ac7fdccb32cee0136064796e038160b3",
  };

  AMapLoader.load({
    key: "c16c1b2c8b16c1b5d2572a613600fb64", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.Geolocation","AMap.HawkEye","AMap.MapType"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      const layer = new AMap.createDefaultLayer({
        zooms: [3, 20], //可见级别
        visible: true, //是否可见
        opacity: 1, //透明度
        zIndex: 0, //叠加层级
      });

      map = new AMap.Map("container", {         //创建一个地图实例，挂载在 ID 为 "container" 的 DOM 上。
        // 设置地图容器id
        viewMode: "2D", // 是否为2D地图模式
        mapStyle: "amap://styles/darkblue", //设置地图的显示样式
        // layers: [
        //     new AMap.TileLayer.Satellite(),
        //     // 路网
        //     new AMap.TileLayer.RoadNet()
        // ],
        zoom: 11, // 初始化地图级别
        center: [110.3312, 20.0310], // 初始化地图中心点位置(海南)
        layers: [layer], //layer为创建的默认图层
      });

      const traffic = new AMap.TileLayer.Traffic({
        autoRefresh: true, //是否自动刷新，默认为false
        interval: 180, //刷新间隔，默认180s
     });

     map.add(traffic); //通过add方法添加图层

    // 添加工具条控件----比例尺控件
     const scale = new AMap.Scale({
        position: {
           top: 'auto',
           right: '10px',
           left: 'auto',
           bottom: '5px'
        }
      });
      map.addControl(scale);

     // 添加工具条控件----缩放控件
     const toolbar = new AMap.ToolBar({
        position: {
           top: 'auto',
           right: '10px',
           left: 'auto',
           bottom: '30px'
        }
      });
      map.addControl(toolbar);

    // 添加工具条控件----控制罗盘控件
     const controlBar = new AMap.ControlBar({
        position: {
           top: '10px',
           right: '10px',
           left: 'auto',
           bottom: 'auto'
        }
      }
     );
      map.addControl(controlBar);

    // 添加工具条控件----定位控件
     const geolocation = new AMap.Geolocation({
        position: {
           top: '60px',
           right: '13px',
           left: 'auto',
           bottom: 'auto'
        }
      }
     );
      map.addControl(geolocation);

    // 添加工具条控件----鹰眼控件
    const hawkeye = new AMap.HawkEye({
        position: {
           top: '2px',
           right: 'auto',
           left: '13px',
           bottom: 'auto'
        }
      }
     );
      map.addControl(hawkeye);

    //添加工具条控件----图层切换控件
    const maptype = new AMap.MapType({
      //defaultType: 0, // 默认底图类型（0：默认图层，1：卫星图层，2：实时交通图层）
      //showTraffic: true,
      //showRoad: true,
      position: {
           top: 'auto',
           right: 'auto',
           left: '90px',
           bottom: '120px'
        } 
      }
     );
      map.addControl(maptype);

    // ✅ 添加 Marker（标记点）
    const marker = new AMap.Marker({
        position: [110.3312, 20.0310],
        title: "海南省人民政府",
      });
      map.add(marker);


     })

    .catch((e) => {
      console.log(e);
    });
});


//地图的清理
onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style>
#container {
  width: 98%;
  height: 450px;
  margin-right: 5px;
  margin-left: -5px;
  margin-top: 40px;
}
.amap-copyright {
  display: none !important;
}

/* 控制罗盘控件缩放样式 */
.amap-controlbar {
  transform: scale(0.4); /* 缩小为80% */
  transform-origin: top right; /* 缩放锚点设置为右上角 */
}

/* 自定义鹰眼控件的大小 */
.amap-hawkeye {
  width: 100px !important;
  height: 80px !important;
  overflow: hidden; /* 防止内容溢出 */
}

.amap-hawkeye .amap-maps {
  transform: scale(1.0); /* 根据需求缩放鹰眼内部地图 */
  transform-origin: top left;
}

/* 设置图层控件的整体字体颜色与大小 */
.amap-maptype {
  color: rgb(6, 57, 212) !important;
  font-size: 12px;
  font-family: sans-serif;
}


</style>

　　

 

效果：