openLayers切换基于高德、天地图切换矢量、影像、地形图层_openlayers10 切换

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、加载完成后，搭建切换图层页面，并实现切换功能

图片自行下载

 
 
  
{{ item.text }}
 
 
 
  
{{ mapArray[activeIndex].text }}
 
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; }, },};.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; }}