No.19可视化大屏--vite+vue3 高德地图之展示图层

官方文档：https://lbs.amap.com/api/javascript-api-v2/tutorails/display-a-layer

1.1 创建图层

const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});

1.2加载图层

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [layer], //layer为创建的默认图层
});

1.3 创建实时交通路况图层

实时交通图层用于展示当前时刻的道路交通状况，不同的颜色代表不同的拥堵程度，暗红色代表极度拥堵，绿色代表通畅，灰色代表路况不明。

const traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自动刷新，默认为false
  interval: 180, //刷新间隔，默认180s
});
map.add(traffic); //通过add方法添加图层

　　

完整代码示例：

<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: "ac7fdcc136064796e038160b3",
  };

  AMapLoader.load({
    key: "c16c1b26c1b5d2572a613600fb64", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'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: "3D", // 是否为3D地图模式
        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方法添加图层
     })

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


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

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

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

</style>

　效果：