使用高德地图 JS API 2.0，放置瓦片图层

使用npm安装高德地图 JS API 2.0高德官方NPM 安装 Loader

npm i @amap/amap-jsapi-loader --save

1. 设置一个div盒子
2. 引入高德AMapLoader
3. 渲染地图
4. 放置切片图层

<template>
  <div class="main">
    <div id="container"></div>
    <!--播放器-->
    <ImagePlayer
        @handle-play="handlePlay"
        v-model:progressValue="progressValue"
        v-model:maxTime="maxTime"
        :marksArr="marksArr"
      />
    <HotLegend :hotLegendColor="hotLegendColor" />
    <ToolBar @change-mode="changeMode" /> <!-- 图层切换 -->
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import ToolBar from "./components/toolBar.vue";
import HotLegend from "./components/HotLegend.vue";
import { getForecastData } from "@/api/weather.js";

import { hotLegendColors } from "./constants";
import { modeList, transformWeaterValue } from "./components/data";

let map = null;
let hotLegendColor = ref();
let mode = ref(modeList[0].value); //图层类型
const queryParams = ref({
  weather_vars: "temperature",
});
const urlList = ref();
const timeList = ref();
const flat = ref(1);
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "",//开发者申请的密钥
  };
  AMapLoader.load({
    key: "", // 开发者申请的key
    version: "2.0",
    plugins: [],
  })
    .then(async (AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 5.8, // 初始化地图级别
        zooms: [5.8, 11],
        center: [104.305335, 32.5571], // 初始化地图中心点位置
      });
      //限制地图显示范围
      lockMapBounds();
      // 获取瓦片数据
      await getUrlData();
      // 放置url到地图上
      setTileLayerList();
      // 给地图实例绑定点击事件 onClick
      map.on("click", onClick);
    })
    .catch((e) => {
      console.log(e);
    });
};
// 声明点击事件的回调函数
function onClick(e) {
  console.log("回调函数", e);
}
//限制地图显示范围
function lockMapBounds() {
  var bounds = new AMap.Bounds([135.775305, 53.910741], [73.151995, 17.053745]);
  map.setLimitBounds(bounds);
}

//  放置url到地图上
const setTileLayerList = async () => {
// 删除原来的 否则会一直叠加
  if (flat.value > 1) {
    let oldLayer = "";
    Object.entries(map.getLayers()).forEach(([key, value]) => {
      if (value.CLASS_NAME === "AMap.TileLayer") {
        oldLayer = value;
      }
    });
    map.remove(oldLayer);
  }
  var layer = new AMap.TileLayer({
    // 图块取图地址
    getTileUrl: urlList.value[0],
    opacity: 0.8,
  });
  map.add(layer);
  flat.value++;
};

//点击图标，更改图层
const changeMode = async (val) => {
  mode.value = val;
  queryParams.value.weather_vars = modeList.find((v) => v.value == val).param;
  await getUrlData();
  setTileLayerList();
};

// 获取切片数据
const getUrlData = async () => {
  
};

//   渲染地图
onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map?.destroy();
});
</script>
<style scoped>
#container {
  width: 100%;
  height: 90vh;
}
</style>