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