openlayers轨迹绘制、轨迹回放

<template>
  <div style="width: 100vw; height: 100vh">
    <div id="map" style="width: 100%; height: 100%"></div>
    <div class="btn">
      <el-button @click="drawPoint('点')">点</el-button>
      <el-button @click="drawPoint('线')">线</el-button>
      <el-button @click="drawPoint('圆')">圆</el-button>
      <el-button @click="drawPoint('多边形')">先用多边形绘制轨迹</el-button>
      <el-button @click="startPlayback()">再轨迹回放</el-button>
      <el-button @click="claerPlayback()">清除轨迹</el-button>
      <el-button @click="clearDraw">清除绘画</el-button>
    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat, toLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector"; //新的矢量层
import VectorSource from "ol/source/Vector"; //新的矢量源
import { Fill, Style, Stroke, Circle as CircleStyle } from "ol/style";
import { Draw } from "ol/interaction";
import { Point } from "ol/geom";
import { Icon } from "ol/style";
import { Feature } from "ol";
import { LineString } from "ol/geom";
export default {
  data() {
    return {
      map: null, //地图层
      routeCoords: [
        // [111.82603186264637, 40.710486885237714],
        // [112.52915686264639, 38.061789174504554],
        // [117.14341467514639, 36.52361719898482],
        // [113.62778967514637, 34.7378517903238],
        // [109.05747717514639, 34.48467564264409],
        // [106.46470373764637, 38.33806666287316],
        // [111.82603186264637, 40.710486885237714],
      ], //轨迹点，
      positionFeature: null,
      vectorLayer: null,
      vectorSource: null,
    };
  },
  methods: {
    //初始化默认地图
    createMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
          this.initDrawLayers(),
        ],
        view: new View({
          center: fromLonLat([116.40387397, 39.91488908]),
          zoom: 3,
          maxZoom: 20,
          minZoom: 4,
          projection: "EPSG:3857",
        }),
      });
    },

    // 增加点
    initDrawLayers() {
      let drawLayers = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          //填充 设置矢量特征的填充样式
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),

          //画   线条时的线条的颜色
          stroke: new Stroke({
            color: "blue",
            width: 2,
          }),

          //绘制点的颜色
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "green",
            }),
          }),
        }),
      });
      return drawLayers;
    },

    //绘制
    drawPoint(drawType) {
      let type = "";
      switch (drawType) {
        case "点":
          type = "Point";
          break;
        case "线":
          type = "LineString";
          break;
        case "圆":
          type = "Circle";
          break;
        case "多边形":
          type = "Polygon";
          break;
        default:
          break;
      }

      if (this.draw) {
        this.map.removeInteraction(this.draw); //removeInteraction 删除交互
      }
      this.draw = new Draw({
        source: this.map.getLayers().array_[1].getSource(),
        type,
      });
      this.map.addInteraction(this.draw); // this.map.addInteraction 设置交互
      // 监听draw事件来获取点的坐标
      this.draw.on("drawend", (event) => {
        alert(1);
        const geometry = event.feature.getGeometry();
        const coordinates = geometry.getCoordinates()[0];
        console.log(coordinates);
        // 转换所有顶点为经纬度
        const lonLatCoordinates = coordinates.map((coord) => toLonLat(coord));
        console.log("多边形顶点的经纬度:", lonLatCoordinates);

        // 将经纬度存储在数组中
        this.routeCoords = lonLatCoordinates;
        console.log("所有多边形的经纬度:", this.routeCoords);

        // // 清除画笔
        // this.map.removeInteraction(this.draw)
        // this.map.removeInteraction(this.map)
        // const geometry = event.feature.getGeometry();
        // if (geometry instanceof Point) {
        //   const coord = geometry.getCoordinates();
        //   console.log('点的坐标：', coord);
        // }
      });
    },
    //清除轨迹
    claerPlayback() {
      this.routeCoords = [];
      this.vectorSource.clear();
      if (this.vectorLayer) {
        this.vectorLayer.getSource().clear(); //清除轨迹特征
      }
    },
    // 绘制轨迹
    drawRoute() {
      console.log(this.routeCoords, "thisrouteCoords");
      const route = new LineString(
        this.routeCoords.map((coord) => fromLonLat(coord)) // 转换经纬度为地图坐标
      );
      console.log(route, "route");
      // 设置轨迹样式
      const routeFeature = new Feature({
        geometry: route,
      });

      const routeStyle = new Style({
        stroke: new Stroke({
          width: 3,
          color: [0, 0, 255, 0.8],
        }),
      });

      routeFeature.setStyle(routeStyle);

      this.vectorSource = new VectorSource({
        features: [routeFeature],
      });

      this.vectorLayer = new VectorLayer({
        source: this.vectorSource,
      });

      this.map.addLayer(this.vectorLayer);

      // 创建当前位置的点
      this.positionFeature = new Feature({
        geometry: new Point(fromLonLat(this.routeCoords[0])),
      });

      const positionStyle = new Style({
        image: new Icon({
          src: "https://openlayers.org/en/latest/examples/data/icon.png",
          scale: 0.5,
        }),
      });

      this.positionFeature.setStyle(positionStyle);
      this.vectorSource.addFeature(this.positionFeature);
    },
    // 开始轨迹回放
    startPlayback() {
      this.drawRoute();
      // this.map.getLayers().array_[1].getSource().clear();

      let index = 0;

      const moveFeature = () => {
        if (index < this.routeCoords.length) {
          const newCoords = fromLonLat(this.routeCoords[index]);
          this.positionFeature.getGeometry().setCoordinates(newCoords);
          this.map.getView().setCenter(newCoords);
          index++;
          // 使用定时器或 requestAnimationFrame 实现平滑动画
          setTimeout(moveFeature, 1000); // 每秒移动一次
        }
      };

      moveFeature();
    },
    //清除会话
    clearDraw() {
      //采取链式操作 减少多余代码显示
      this.map.getLayers().array_[1].getSource().clear();
    },
  },
  mounted() {
    this.createMap();
  },
};
</script>

<style scoped>
.btn {
  position: fixed;
  top: 10px;
  right: 10px;
}
</style>