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

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' }">
    <div
      class="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>