vue3-openlayers 图标闪烁、icon闪烁、marker闪烁

本篇介绍一下使用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-tianditu
        layerType="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>