本篇介紹一下使用vue3-openlayers 圖標閃爍、icon閃爍、marker閃爍

1 需求

• 圖標閃爍、icon閃爍、marker閃爍

2 分析

圖標閃爍、icon閃爍、marker閃爍使用ol-animation-fade組件

3 實現

<template><ol-map:loadTilesWhileAnimating="true":loadTilesWhileInteracting="true"style="width: 100%; height: 100%"ref="mapRef"><ol-view ref="view" :center="center" :zoom="zoom" :projection="projection" /><ol-tile-layer><ol-source-tianditulayerType="img":projection="projection":tk="key":hidpi="true"ref="sourceRef"></ol-source-tianditu></ol-tile-layer><ol-tile-layer><ol-source-tianditu:isLabel="true"layerType="img":projection="projection":tk="key":hidpi="true"></ol-source-tianditu></ol-tile-layer><ol-vector-layer><ol-source-vector><ol-animation-fade :duration="1000" :repeat="Infinity"><ol-feature><ol-geom-point:coordinates=" [110, 30]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature><ol-feature><ol-geom-point:coordinates="[112.5, 31]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature></ol-animation-fade><ol-animation-fade :duration="2000" :repeat="Infinity"><ol-feature><ol-geom-point:coordinates="[111.3, 31]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature><ol-feature><ol-geom-point:coordinates="[115.5, 32]"></ol-geom-point><ol-style><ol-style-icon :src="iconSrc" :scale="0.05"></ol-style-icon></ol-style></ol-feature></ol-animation-fade></ol-source-vector></ol-vector-layer></ol-map>
</template><script setup lang="ts">
import iconSrc from '@/assets/image/truck.png';const center = ref([121, 31]);
const projection = ref('EPSG:4326');
const zoom = ref(5);
const mapRef = ref();
const key = '替換為天地圖key';
const sourceRef = ref(null);
</script>
<style scoped lang="scss"></style>