1、需要先加載好地圖，具體點此鏈接
openLayers添加天地圖WMTS、XYZ瓦片服務圖層、高德地圖XYZ瓦片服務圖層-CSDN博客文章瀏覽閱讀31次。本文介紹了基于OpenLayers的地圖交互功能實現，主要包括以下內容： 地圖初始化：支持天地圖XYZ/WMTS瓦片服務和高德地圖兩種底圖加載方式，可通過配置參數控制不同圖層的顯示。 交互功能： 標記點添加：支持動態創建可拖拽的標記點 折線繪制：提供平滑曲線功能，使用chaikin-smooth算法優化線條效果 軌跡模擬：實現路徑動畫效果，可設置航向角和軌跡線 知識圖譜式交互：由靜態線條和可拖拽點構成 實現細節： 使用ol/layer/Vector管理矢量圖層 通過ol/interaction/Translhttps://blog.csdn.net/ssy001128/article/details/148759666
2、加載完成后，搭建切換圖層頁面，并實現切換功能
圖片自行下載
<template><div class="map-array" :style="{ width: targetWidth + 'px' }"><divclass="layers"@click="setFloatDiv(item, index)"v-for="(item, index) in mapArray":key="index":title="item.text"><img :src="item.img" alt="" ref="img" /><p>{{ item.text }}</p></div></div><div class="staic" @mouseenter="handleHover()"><img :src="mapArray[activeIndex].img" alt="" ref="img" /><p>{{ mapArray[activeIndex].text }}</p></div>
</template><script>
import * as mapUtils from "../components/mapUtils";
import shiliang from "../assets/shiliang.png";
import yingxiang from "../assets/yingxiang.png";
import dixing from "../assets/dixing.png";
export default {data() {return {mapArray: [{img: shiliang,text: "矢量地圖",type: "VECTOR",},{img: yingxiang,text: "影像地圖",type: "RASTER",},{img: dixing,text: "地形地圖",type: "TOPOGRAPHY",},],activeIndex: 0,maptype: "VECTOR",targetWidth: 0,};},methods: {setFloatDiv(id, index) {this.maptype = id.type;this.activeIndex = index;const mark = id.type + "MARK";const layers = mapUtils.getMap().getLayers().getArray().filter((layer) => layer.getProperties().layerId === "TileLayers");layers.forEach((item) => {item.setVisible(false);if (item.values_.id === id.type || item.values_.id === mark) {item.setVisible(true);this.targetWidth = 0;}});},handleHover() {this.targetWidth = 300;},},
};
</script><style lang="scss">
.map-array {position: absolute;z-index: 1;display: flex;width: 0px;height: 64px;bottom: 2%;right: 116px;overflow: hidden;transition: width 0.3s ease; // 添加過渡效果.layers {width: 100px;position: relative;cursor: pointer;img {width: 100px;height: 100%;object-fit: cover; // 確保圖片正確填充}p {position: absolute;bottom: 0;margin: 0;background-color: rgba(0, 0, 0, 0.5);text-align: center;width: 100%;color: #fff;}}
}
.staic {position: absolute;z-index: 1;bottom: 2%;right: 16px;height: 64px;img {width: 100px;height: 100%;object-fit: cover; // 確保圖片正確填充}p {position: absolute;bottom: 0;margin: 0;background-color: rgba(0, 0, 0, 0.5);text-align: center;width: 100%;color: #fff;}
}
</style>
?
)
