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>
相关推荐
剪刀石头布啊2 分钟前
http状态码大全
前端·后端·程序员
剪刀石头布啊4 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
宇之广曜13 分钟前
搭建 Mock 服务,实现前端自调
前端·mock
yuko093115 分钟前
【手机验证码】+86垂直居中的有趣问题
前端
用户15129054522019 分钟前
Springboot中前端向后端传递数据的几种方式
前端
阿星做前端19 分钟前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
用户15129054522023 分钟前
Web Worker:让前端飞起来的隐形引擎
前端
司宸23 分钟前
学习笔记十 —— 自定义hooks设计原则 笔试实现
前端
用户15129054522028 分钟前
踩坑与成长:WordPress、MyBatis-Plus 及前端依赖问题解决记录
前端·后端
半个烧饼不加肉33 分钟前
React + ts + react-webcam + CamSplitter 实现虚拟摄像头解决win摄像头独占的问题
前端·react.js·前端框架