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

图片自行下载

javascript 复制代码
<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>
相关推荐
程序视点1 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile1 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年1 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神1 小时前
coze娱乐ai换脸
前端
GIS之路2 小时前
GeoTools 开发合集(全)
前端
咖啡の猫2 小时前
Shell脚本-嵌套循环应用案例
前端·chrome
一点一木2 小时前
使用现代 <img> 元素实现完美图片效果(2025 深度实战版)
前端·css·html
萌萌哒草头将军2 小时前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
布列瑟农的星空2 小时前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy3 小时前
前端必懂的 Cache 缓存机制详解
前端