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>
)
