基于Vue3+OpenLayers實(shí)現(xiàn)地圖動(dòng)態(tài)標(biāo)記的輕量級(jí)方案
更新時(shí)間：2026年04月12日 14:24:13 作者：吉檀迦俐
本文介紹了使用Vue3+OpenLayers實(shí)現(xiàn)地圖上的動(dòng)態(tài)標(biāo)記（如閃爍點(diǎn)、雷達(dá)掃描等）的方法,通過使用Overlay綁定DOM和CSS控制GIF動(dòng)畫,實(shí)現(xiàn)輕量級(jí)、高效的動(dòng)畫效果,適用于預(yù)警點(diǎn)閃爍、定位動(dòng)畫、雷達(dá)掃描等場景,需要的朋友可以參考下
一、實(shí)現(xiàn)效果
最終效果如下：
- 地圖加載完成后
- 指定經(jīng)緯度位置出現(xiàn) 動(dòng)態(tài) GIF 標(biāo)記
- 標(biāo)記通過 CSS 控制，無需額外動(dòng)畫邏輯
在實(shí)際 GIS 項(xiàng)目開發(fā)中，我們經(jīng)常會(huì)遇到這樣一種需求：
在地圖上展示“動(dòng)態(tài)標(biāo)記”（比如閃爍點(diǎn)、雷達(dá)掃描、預(yù)警點(diǎn)等）
傳統(tǒng)做法一般是：
- 使用靜態(tài)圖片（PNG / SVG）
- 或使用 Canvas 動(dòng)畫
但如果我們只是想實(shí)現(xiàn)簡單的動(dòng)畫效果，其實(shí)可以用一種更輕量的方式：
通過 CSS 加載 GIF 作為標(biāo)記，實(shí)現(xiàn)動(dòng)畫效果
本文將基于 Vue3 + OpenLayers，實(shí)現(xiàn)：
? 在地圖上加載多個(gè)點(diǎn)
? 每個(gè)點(diǎn)使用 GIF 動(dòng)畫展示
? 不使用復(fù)雜繪制，僅用 Overlay + CSS
三、核心思路
實(shí)現(xiàn)步驟其實(shí)很簡單：
1?? 使用 GeoJSON 定義點(diǎn)位
const geojsonData = {
type: "FeatureCollection",
features: [{
geometry: {
type: "Point",
coordinates: [-95.4, 31.8],
},
}],
}2?? 提取坐標(biāo)
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
關(guān)鍵點(diǎn)來了
span {
background: url("/image/gif.gif") no-repeat;
}GIF 會(huì)自動(dòng)播放動(dòng)畫，不需要 JS 控制
四、完整代碼實(shí)現(xiàn)
<!--
* @Author: 彭麒
* @Date: 2026/4/10
* @Email: 1062470959@qq.com
* @Description: 此源碼版權(quán)歸吉檀迦俐所有，可供學(xué)習(xí)和借鑒或商用。
-->
<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>五、關(guān)鍵點(diǎn)解析
1. 為什么用 Overlay？
- VectorLayer → 更適合大量數(shù)據(jù)
- Overlay → 更適合 DOM / 動(dòng)畫 / 交互
本場景用 Overlay 更簡單
2. 為什么用 CSS 而不是 JS 動(dòng)畫？
優(yōu)點(diǎn)：
- ? 實(shí)現(xiàn)簡單
- ? 不占用 JS 計(jì)算
- ? GIF 自動(dòng)循環(huán)
3. 坐標(biāo)問題（重點(diǎn)坑）
useGeographic()
必須調(diào)用，否則：
- 坐標(biāo)系不一致
- 點(diǎn)位會(huì)偏移
4. DOM 掛載位置優(yōu)化
? 錯(cuò)誤寫法：
document.documentElement.appendChild(el)
? 正確寫法：
container.appendChild(el)
避免污染全局 DOM
六、適用場景
這種方式非常適合：
- ?? 預(yù)警點(diǎn)閃爍
- ?? 定位動(dòng)畫
- ?? 雷達(dá)掃描效果
- ?? 實(shí)時(shí)監(jiān)控點(diǎn)
七、優(yōu)化建議
如果你要做更復(fù)雜的項(xiàng)目，可以升級(jí)：
1. 使用 VectorLayer（性能更高）
適合上千點(diǎn)
2. 使用 Sprite 動(dòng)畫（替代 GIF）
更流暢、可控
3. 使用 Canvas 動(dòng)畫
實(shí)現(xiàn)波紋、擴(kuò)散效果
八、總結(jié)
本文核心就一句話：
? 利用 Overlay + CSS GIF，實(shí)現(xiàn)地圖動(dòng)態(tài)標(biāo)記，是一種簡單高效的方案
相比復(fù)雜動(dòng)畫：
- 實(shí)現(xiàn)成本低
- 可維護(hù)性高
- 非常適合業(yè)務(wù)項(xiàng)目
以上就是基于Vue3+OpenLayers實(shí)現(xiàn)地圖動(dòng)態(tài)標(biāo)記的輕量級(jí)方案的詳細(xì)內(nèi)容，更多關(guān)于Vue3 OpenLayers地圖動(dòng)態(tài)標(biāo)記的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號(hào)的解決方法，感興趣的朋友一起看看吧2018-04-04
vue中實(shí)現(xiàn)代碼高亮與語法著色的方法介紹
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語法著色，Vue提供了多種方式來實(shí)現(xiàn)代碼高亮與語法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue2.0組件之間傳值、通信的多種方式以及注意要點(diǎn)，需要的朋友可以參考下2018-02-02
這篇文章主要為大家介紹了vue3中的透傳attributes教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
利用Vue Native構(gòu)建移動(dòng)應(yīng)用的全過程記錄
VueNative是一個(gè)使用JavaScript構(gòu)建跨平臺(tái)原生移動(dòng)應(yīng)用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動(dòng)應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒)
這篇文章主要介紹了vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue DatePicker日期選擇器時(shí)差8小時(shí)問題
這篇文章主要介紹了vue DatePicker日期選擇器時(shí)差8小時(shí)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue路由切換時(shí)的左滑和右滑效果,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05