vue2+OpenLayers 天地图上画路线轨迹 虚线 实线

这次在地图上放轨迹图 这边放了gif格式的图片 没加载出来 查资料说是openlayers加载dom时只加载了第一帧 所以是个图片 后面完善下
引入部分

import {
  Circle as CircleStyle,
  Style,
  Stroke,
  Fill,
  Icon,
  Text,
} from "ol/style";

代码如下

<template>
  <div class="container">
    <div id="vue-openlayers" class="map-x"></div>
    <div
      id="info-box"
      class="info-box"
      style="width: 100px; height: 100px"
    ></div>
    <div id="canv" style="width: 100px; height: 100px"></div>
    <div class="btn">
      <el-button type="primary" @click="addLine"> 按钮1 </el-button>
    </div>
  </div>
  
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
// import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";


import {
  Circle as CircleStyle,
  Style,
  Stroke,
  Fill,
  Icon,
  Text,
} from "ol/style";
export default {
  name: "FirstMap",
  data() {
    return {
      map: null,
      draw: null,
      maskLayer: null,
      logo,
      layers: [],
    };
  },
  methods: {
    initMap() {
      let that = this;
      // 将图标样式应用到点要素
      const features = [];
      const point = new Point([108.56, 34.15]); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        custom: { data: "123", type: "icon" },
        type: "icon",
      });
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: this.logo,
            // size: [40, 40],
            scale: 0.2, // 图标缩放比例
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const source = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: source,
      });

      let map = new Map({
        target: "vue-openlayers",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",
            }),
          }),
          markLayerPoints, // 确保图层顺序正确
          // vectorLayers,
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [108.56, 34.15], // 修改中心坐标格式
          zoom: 6,
        }),
      });

      this.map = map;
     
    },
    addLine() {
      //创建一条线
      let coordinates = [
        [
          108.569906889,
          34.1162314859
        ],
        [
          108.6669328157,
          34.0366042879
        ],
        [
          108.6685694211,
          34.9200766812
        ],
        [
          108.7616690123,
          34.8229703422
        ],
        [
          108.7653473357,
          34.745285271
        ],
        [
          108.7673890537,
          34.6578895659
        ],
        [
          108.8151414056,
          34.5763202412
        ],
        [
          108.8298937574,
          34.5510725931
        ],
        [
          108.8477457005,
          34.5044615504
        ],
        [
          108.9609287276,
          34.3102488724
        ]
      ]
      let source = new VectorSource(); // 创建数据源
      const pointStart = new Feature({
        geometry: new Point(coordinates[0]),
        name: "luxian",
      });

      const pointEnd = new Feature({
        geometry: new Point(coordinates[coordinates.length - 1]),
        name: "luxian",
      });
      coordinates
      // 创建一个样式对象
        let  myStyle = new Style({
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({
              color: "#A3D5F4"
            })
          })
        })
       let  myStyle1 = new Style({
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({
              color: 'rgba(255, 179, 1, 1)'
            })
          })
        })
      
     

      pointStart.setStyle(
        myStyle
      )

      pointEnd.setStyle(
        myStyle1
      )

      
      let index =  Math.floor((coordinates.length - 1) / 2);
      const pointShip = new Feature({
        geometry: new Point(coordinates[index]),
        name: "chuan",

      });
      pointShip.setStyle(
        new Style({
          // 坐标点的样式
          image: new Icon({
            src: require("@/assets/img/taifeng.gif"),
            offset:[-30,0],
            offsetOrigin:'bottom-center',
            // size:[100,100],
            scale: 0.2155
          }),
        })
      )
      var Line = new Feature({
        geometry: new LineString(coordinates),
        name: "luxian",
      })

      // 实线  
      let lienStyle = new Style({
          //填充色
          fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
          }),
          //边线颜色
          stroke: new Stroke({
            color: '#A3D5F4',
            width: 2,
            lineDash: [3, 5] // 设置虚线样式
          }),
        })
        // 虚线
      let  lienStyle1 = new Style({
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({
              color: 'rgba(255, 73, 73, 1)'
            })
          }),
          stroke: new Stroke({
            color: 'rgba(255, 73, 73, 1)',
            width: 2,
            lineDash: [3, 5] // 设置虚线样式
          }),
      })

      //设置点的样式信息
      Line.setStyle(
        lienStyle1
      )
      source.addFeatures([pointStart, Line, pointShip, pointEnd]);
      // source.addFeatures([pointStart, Line, pointEnd]);
      let layer = new VectorLayer({
        name: 'hxLine',
        source: source,
        visible: true,
        zIndex: 1
      }); // 创建地图图层
      this.map.addLayer(layer); // 地图添加图层
    },
  },
  mounted() {
    this.initMap();
  },
}
</script>
<style scoped lang="scss">
.input {
  position: fixed;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 5px;
  padding-bottom: 10px;

  > * {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
}
</style>

<style scoped lang="scss">
.container {
  position: relative;

  .btn {
    position: absolute;
    left: 4%;
    top: 1%;
  }
}

#vue-openlayers {
  width: 100vw;
  height: 100vh;
}

h3 {
  line-height: 40px;
}

/* 隐藏信息盒子的初始样式 */
#info-box {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid black;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>