66.在Vue3中使用OpenLayers实现动态闪闪发光的点划线

前言

OpenLayers 是一个强大的开源地图库,支持多种地图源和地理数据格式。本文将介绍如何在 Vue 3 项目中使用 OpenLayers 实现一个动态的点划线效果,并附上完整的代码示例。

环境准备

在开始之前,请确保你已经完成以下准备工作:

  1. Node.js 环境:确保你的开发环境中已经安装了 Node.js。

  2. Vue 3 项目:如果你还没有 Vue 3 项目,可以通过以下命令创建一个:

    npm init vue@latest
  3. 安装 OpenLayers:在项目中安装 OpenLayers:

    npm install ol

实现效果

完整代码

<!--
 * @Author: 彭麒
 * @Date: 2025/1/22
 * @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实现动态闪闪发光的点划线</div>
    </div>
    <div id="vue-openlayers" class="map-x"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import { OSM } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import {LineString} from "ol/geom";
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import CircleStyle from 'ol/style/Circle';
const map = ref(null);
const lineSource = ref(new VectorSource({ wrapX: false }));
const status = ref(false);
const lineData = ref([
  [116, 39],
  [117.005, 39],
]);

// 初始化地图
const initMap = () => {
  map.value = new Map({
    target: 'vue-openlayers',
    layers: [
      new Tile({
        source: new OSM()
      }),
      new VectorLayer({
        source: lineSource.value
      })
    ],
    view: new View({
      projection: "EPSG:4326",
      center: [116.5, 39],
      zoom: 10
    })
  });
};

// 显示线条
const showLine = (x) => {
  lineSource.value.clear();
  let lineFeature = new Feature({
    geometry: new LineString(lineData.value),
  });
  lineFeature.setStyle(featureStyle(x));
  lineSource.value.addFeature(lineFeature);
};

// 定义线条样式
const featureStyle = (x) => {
  return new Style({
    fill: new Fill({
      color: "#00f"
    }),
    stroke: new Stroke({
      width: 10,
      color: x ? "#f00" : "#0f0",
      lineDash: x ? [30, 20] : [20, 30],
      lineDashOffset: x ? 20 : 10
    }),
    image: new CircleStyle({  // 点样式
      radius: 10,
      fill: new Fill({
        color: '#ff0000'
      })
    })
  });
};

// 定时器函数
let timerId;
const timer = () => {
  timerId = setInterval(() => {
    status.value = !status.value;
    showLine(status.value);
  }, 200);
};

onMounted(() => {
  initMap();
  timer();
});

onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
  }
});

</script>

<style scoped>
.container {
  width: 840px;
  height: 520px;
  margin: 0 auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42B983;
}
</style>

代码解析

  1. 地图初始化

    • 使用 Map 和 View 初始化地图,并设置地图的中心点和缩放级别。

    • 使用 OSM 作为地图源,VectorLayer 用于渲染矢量数据。

  2. 线条数据

    • 使用 LineString 定义线条的几何数据。

    • 使用 Feature 和 Style 定义线条的样式,包括颜色、宽度和虚线效果。

  3. 动态效果

    • 使用 setInterval 定时切换线条的样式,实现动态效果。

    • 在 onMounted 钩子中启动定时器,在 onUnmounted 钩子中清除定时器。

  4. 响应式布局

    • 使用 CSS 定义地图容器的样式,并设置边框以便于查看。

总结

通过本文的介绍,你已经学会了如何在 Vue 3 项目中使用 OpenLayers 实现一个动态的点划线效果。OpenLayers 提供了丰富的 API 和灵活的配置选项,能够满足各种地图可视化需求。希望这篇文章对你有所帮助,欢迎在评论区分享你的想法和建议!


参考链接


希望这篇博文能够帮助你在 CSDN 上获得更多的阅读和关注!如果有任何问题,欢迎在评论区讨论。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吉檀迦俐

你的鼓励奖是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值