基于Vue3+OpenLayers实现地图动态标记的轻量级方案

更新时间：2026年04月12日 14:24:13 作者：吉檀迦俐

本文介绍了使用Vue3+OpenLayers实现地图上的动态标记（如闪烁点、雷达扫描等）的方法,通过使用Overlay绑定DOM和CSS控制GIF动画,实现轻量级、高效的动画效果,适用于预警点闪烁、定位动画、雷达扫描等场景,需要的朋友可以参考下

一、实现效果

最终效果如下：

地图加载完成后
指定经纬度位置出现 动态 GIF 标记
标记通过 CSS 控制，无需额外动画逻辑

在实际 GIS 项目开发中，我们经常会遇到这样一种需求：

在地图上展示“动态标记”（比如闪烁点、雷达扫描、预警点等）

传统做法一般是：

使用静态图片（PNG / SVG）
或使用 Canvas 动画

但如果我们只是想实现简单的动画效果，其实可以用一种更轻量的方式：

通过 CSS 加载 GIF 作为标记，实现动画效果

本文将基于 Vue3 + OpenLayers，实现：

✔ 在地图上加载多个点
✔ 每个点使用 GIF 动画展示
✔ 不使用复杂绘制，仅用 Overlay + CSS

三、核心思路

实现步骤其实很简单：

1️⃣ 使用 GeoJSON 定义点位

const geojsonData = {
    type: "FeatureCollection",
    features: [{
        geometry: {
            type: "Point",
            coordinates: [-95.4, 31.8],
        },
    }],
}

2️⃣ 提取坐标

const getCoordinatesByGeojson = (geojsonData) => {
    return geojsonData.features.map(
        (feature) => feature.geometry.coordinates
    )
}

3️⃣ 使用 Overlay 绑定 DOM

OpenLayers 提供了 Overlay：

可以把 HTML 元素“挂”到地图上

const marker = new Overlay({
    position: coord,
    element: gifspan,
})

4️⃣ 使用 CSS 加载 GIF

关键点来了

span {
    background: url("/image/gif.gif") no-repeat;
}

GIF 会自动播放动画，不需要 JS 控制

四、完整代码实现

<!--
 * @Author: 彭麒
 * @Date: 2026/4/10
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center flex-wrap">
      <div class="font-bold text-[24px]">
        Vue3 + Openlayers:加载gif文件，采用CSS加载gif背景的方式
      </div>
    </div>
    <div id="vue-openlayers"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View, Overlay } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { fromLonLat, useGeographic } from 'ol/proj'
let map = null
const geojsonData = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: { title: "point1" },
      geometry: {
        type: "Point",
        coordinates: [-95.4, 31.8],
      },
    },
    {
      type: "Feature",
      properties: { title: "point2" },
      geometry: {
        type: "Point",
        coordinates: [-97.1, 38.7],
      },
    },
  ],
}
// ====== 方法 ======
const getCoordinatesByGeojson = (geojsonData) => {
  return geojsonData.features.map(
      (feature) => feature.geometry.coordinates
  )
}
const showGif = () => {
  const coordinates = getCoordinatesByGeojson(geojsonData)
  coordinates.forEach((coord) => {
    const gifspan = document.createElement('span')
    document.documentElement.appendChild(gifspan)
    const marker = new Overlay({
      position: coord,
      element: gifspan,
      positioning: 'center-center',
    })
    map.addOverlay(marker)
  })
}
const initMap = () => {
  const googleLayer = new TileLayer({
    source: new XYZ({
      url: 'https://www.google.com/maps/vt?lyrs=m&gl=en&x={x}&y={y}&z={z}',
      crossOrigin: 'anonymous',
    }),
  })
  map = new Map({
    target: 'vue-openlayers',
    layers: [googleLayer],
    view: new View({
      projection: 'EPSG:3857',
      center: fromLonLat([-97.1, 38.7]),
      zoom: 4,
    }),
  })
}
// ====== 生命周期 ======
onMounted(() => {
  initMap()
  showGif()
  useGeographic() // 必须
})
</script>
<style>
.container {
  width: 840px;
  height: 620px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 490px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
.container span {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: url("/image/gif.gif") no-repeat;
  background-size: 80px 80px;
}
</style>

五、关键点解析

1. 为什么用 Overlay？

VectorLayer → 更适合大量数据
Overlay → 更适合 DOM / 动画 / 交互

本场景用 Overlay 更简单

2. 为什么用 CSS 而不是 JS 动画？

优点：

✅ 实现简单
✅ 不占用 JS 计算
✅ GIF 自动循环

3. 坐标问题（重点坑）

useGeographic()

必须调用，否则：

坐标系不一致
点位会偏移

4. DOM 挂载位置优化

❌ 错误写法：

document.documentElement.appendChild(el)

✅ 正确写法：

container.appendChild(el)

避免污染全局 DOM

六、适用场景

这种方式非常适合：

🚨 预警点闪烁
📍 定位动画
📡 雷达扫描效果
🚑 实时监控点

七、优化建议

如果你要做更复杂的项目，可以升级：

1. 使用 VectorLayer（性能更高）

适合上千点

2. 使用 Sprite 动画（替代 GIF）

更流畅、可控

3. 使用 Canvas 动画

实现波纹、扩散效果

八、总结

本文核心就一句话：

✅ 利用 Overlay + CSS GIF，实现地图动态标记，是一种简单高效的方案

相比复杂动画：

实现成本低
可维护性高
非常适合业务项目

以上就是基于Vue3+OpenLayers实现地图动态标记的轻量级方案的详细内容，更多关于Vue3 OpenLayers地图动态标记的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue使用vant实现日期选择器功能
在当今前端开发的领域中,Vue 框架因其高效和灵活的特性备受开发者青睐,而 Vant 是一个轻量的移动端组件库,为 Vue 应用的开发提供了丰富且便捷的功能组件,本文将就如何在 Vue 框架中通过 Vant 来实现日期选择器的使用,需要的朋友可以参考下
2024-08-08
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
这篇文章主要介绍了解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue实现将页面区域导出为pdf
文章介绍了两种将前端页面指定区域导出为PDF的纯前端实现方法,方式一使用jsPDF和html2canvas将特定区域转化为图片,再将图片转化为PDF,适用于小区域转换,但存在翻页时内容拆分的问题,方式二使用html2pdf.js,支持自动分页,适用于较大区域的转换
2025-10-10
手把手教你Vue-cli项目的搭建
这篇文章主要为大家详细介绍了Vue-cli项目的搭建方法，文中图片介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
vue中定时器setInterval的使用及说明
这篇文章主要介绍了vue中定时器setInterval的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
使用vue深度选择器修改ElementUI组件内样式的示例代码
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错，下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下
2022-12-12
vue获取v-for异步数据dom的解决问题
这篇文章主要介绍了vue获取v-for异步数据dom的解决问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue组件生命周期三个阶段全面总结讲解
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-11-11
Vue.config.js配置报错ValidationError: Invalid options object解
这篇文章主要给大家介绍了关于Vue.config.js配置报错ValidationError: Invalid options object的解决办法,主要由于vue.config.js配置文件错误导致的,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-02-02
浅谈vue项目如何打包扔向服务器
本篇文章主要介绍了浅谈vue项目如何打包扔向服务器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05