64.在Vue3中使用OpenLayers显示带箭头的线段,箭头居中

在 WebGIS 开发中,使用 OpenLayers 渲染地图和矢量图形是常见的需求。今天我们来实现一个效果:在 Vue 3 项目中,使用 OpenLayers 显示带箭头的线段,并让箭头居中。

项目环境和技术栈

  1. Vue 3 + Composition API
  2. OpenLayers
  3. Vite 构建工具

实现效果

我们将绘制一条由多个坐标点构成的线段,在每个线段的中点处显示一个箭头,指向线段的方向。

效果示例如下:


代码实现

1. 项目初始化

首先,使用 Vite 创建一个 Vue 3 项目:

javascript 复制代码
npm create vite@latest vue-openlayers-demo --template 
vue cd vue-openlayers-demo npm install

安装 OpenLayers:

javascript 复制代码
npm install ol

2. 编写代码

创建一个 MapWithArrow.vue 文件,编写以下内容:

javascript 复制代码
<!--
 * @Author: 彭麒
 * @Date: 2025/1/14
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有,可供学习和借鉴或商用。
 -->
<template>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers显示带箭头的线段,箭头居中</div></div>
    <div id="vue-openlayers" ref="mapRef" class="map-x"></div>
  </div>
</template>

<script setup>
import 'ol/ol.css';
import {ref, onMounted} from 'vue';
import {Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Style, Stroke, Icon} from 'ol/style';
import Feature from 'ol/Feature';
import {Point, LineString} from 'ol/geom';
import arrow from '@/assets/OpenLayers/arrow.png';

const map = ref(null);
const mapRef = ref(null);
const source = new VectorSource({wrapX: false});
const markersData = [
  [112.44837595417002, 23.186590101623924, 1604627953],
  [112.26981796722073, 22.48475773547695, 1604714353],
  [113.96115972956521, 22.25412016222777, 1604800753],
  [113.44837595417002, 23.186590101623924, 1604887153],
];
let fea = null;

const addLine = () => {
  const lineStringFeature = new Feature(new LineString(markersData));
  lineStringFeature.setStyle(
    new Style({
      stroke: new Stroke({
        color: '#00f',
        width: 2,
      }),
    })
  );

  fea = lineStringFeature;
  source.addFeature(lineStringFeature);
};

const arrowStyle = () => {
  const geometry = fea.getGeometry();
  const styles = [];
  geometry.forEachSegment((start, end) => {
    const dx = end[0] - start[0];
    const dy = end[1] - start[1];
    const rotation = Math.atan2(dy, dx);
    const kx = (end[0] + start[0]) / 2;
    const ky = (end[1] + start[1]) / 2;

    styles.push(
      new Style({
        geometry: new Point([kx, ky]),
        image: new Icon({
          src: arrow,
          anchor: [0.75, 0.5],
          rotateWithView: true,
          rotation: -rotation,
        }),
      })
    );
  });
  return styles;
};

const addPoint = () => {
  const features = markersData.map((data) => {
    const feature = new Feature({
      geometry: new Point([data[0], data[1]]),
    });
    feature.setStyle(arrowStyle());
    return feature;
  });
  source.addFeatures(features);
};

const initMap = () => {
  const raster = new Tile({
    source: new OSM(),
  });

  const vector = new VectorLayer({
    source: source,
  });

  map.value = new Map({
    target: mapRef.value,
    layers: [raster, vector],
    view: new View({
      projection: 'EPSG:4326',
      center: [113.243045, 22.16871],
      zoom: 7,
    }),
  });

  addLine();
  addPoint();
};

onMounted(() => {
  initMap();
});
</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. 地图初始化

    使用 OSM 作为地图底图,通过 VectorLayer 添加线段和箭头。

  2. 线段绘制

    通过 LineString 创建矢量线段,并设置样式。

  3. 箭头计算

    遍历每段线段的起点和终点,计算中点和角度,动态生成箭头样式。

  4. 动态样式

    箭头样式通过 Icon 图标实现,并通过 rotation 参数设置旋转角度。


总结

本文展示了如何在 Vue 3 中使用 OpenLayers 显示带箭头的线段,并详细介绍了实现细节。这种实现方法可以应用于各种地图展示需求,如路径规划、物流轨迹等场景。

如有问题,欢迎在评论区留言讨论!🎉


希望这篇文章对你有所帮助!如果喜欢,记得点赞和收藏!

相关推荐
工一木子37 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
~央千澈~4 小时前
UniApp完全支持快应用QUICKAPP-以及如何采用 Uni 模式开发发行快应用优雅草卓伊凡
arcgis
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js