前言
OpenLayers 是一个强大的开源地图库,支持多种地图源和地理数据格式。本文将介绍如何在 Vue 3 项目中使用 OpenLayers 实现一个动态的点划线效果,并附上完整的代码示例。
环境准备
在开始之前,请确保你已经完成以下准备工作:
-
Node.js 环境:确保你的开发环境中已经安装了 Node.js。
-
Vue 3 项目:如果你还没有 Vue 3 项目,可以通过以下命令创建一个:
npm init vue@latest
-
安装 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>
代码解析
-
地图初始化:
-
使用
Map
和View
初始化地图,并设置地图的中心点和缩放级别。 -
使用
OSM
作为地图源,VectorLayer
用于渲染矢量数据。
-
-
线条数据:
-
使用
LineString
定义线条的几何数据。 -
使用
Feature
和Style
定义线条的样式,包括颜色、宽度和虚线效果。
-
-
动态效果:
-
使用
setInterval
定时切换线条的样式,实现动态效果。 -
在
onMounted
钩子中启动定时器,在onUnmounted
钩子中清除定时器。
-
-
响应式布局:
-
使用 CSS 定义地图容器的样式,并设置边框以便于查看。
-
总结
通过本文的介绍,你已经学会了如何在 Vue 3 项目中使用 OpenLayers 实现一个动态的点划线效果。OpenLayers 提供了丰富的 API 和灵活的配置选项,能够满足各种地图可视化需求。希望这篇文章对你有所帮助,欢迎在评论区分享你的想法和建议!
参考链接
希望这篇博文能够帮助你在 CSDN 上获得更多的阅读和关注!如果有任何问题,欢迎在评论区讨论。