65.在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条

前言

在现代的前端开发中，地图已经成为许多项目的核心功能之一。OpenLayers 是一个强大的开源地图库，它提供了丰富的功能和高度的定制化支持。在本篇文章中，我将向大家展示如何在 Vue 3 中使用 OpenLayers 绘制带有箭头的线条。

我们将实现以下功能：

在地图上动态绘制线条；
在线条的每段末端添加箭头；
箭头方向自动调整，以指示线条的方向。

实现效果

绘制的线条如下图所示，每段线条都带有箭头，箭头的方向与线段方向一致。

开发环境

Vue 版本：3.x
OpenLayers 版本：6.x+
其他工具：Node.js、NPM

项目代码

<!--
 * @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"></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 LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import Draw from 'ol/interaction/Draw';
import Point from 'ol/geom/Point';
import { Fill, Stroke, Style, Icon } from 'ol/style';
import arrow from '@/assets/OpenLayers/arrow.png';
const map = ref(null);
const source = new SourceVector({ wrapX: false });
const draw = ref(null);

const styleFunction = (feature) => {
  const geometry = feature.getGeometry();
  const styles = [
    new Style({
      stroke: new Stroke({
        color: 'purple',
        width: 2,
      }),
    }),
  ];

  geometry.forEachSegment((start, end) => {
    const dx = end[0] - start[0];
    const dy = end[1] - start[1];
    const rotation = Math.atan2(dy, dx);

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

  return styles;
};

const addInteraction = () => {
  if (draw.value) {
    map.value.removeInteraction(draw.value);
  }

  draw.value = new Draw({
    source: source,
    type: 'LineString',
  });

  map.value.addInteraction(draw.value);
};

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

  const vector = new LayerVector({
    source: source,
    style: styleFunction,
  });

  map.value = new Map({
    target: 'vue-openlayers',
    layers: [raster, vector],
    view: new View({
      projection: 'EPSG:4326',
      center: [113.1206, 23.034996],
      zoom: 10,
    }),
  });

  addInteraction();
};

onMounted(() => {
  initMap();
});
</script>

<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42B983;
}

#vue-openlayers {
  width: 800px;
  height: 470px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>