使用npm安装高德地图 JS API 2.0高德官方NPM 安装 Loader
npm i @amap/amap-jsapi-loader --save
- 设置一个div盒子
- 引入高德AMapLoader
- 渲染地图
- 放置切片图层
<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>