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>

效果：

posted @ 2025-05-06 17:52 百里屠蘇top 閱讀(185) 評論(0) 收藏舉報

刷新頁面返回頂部