vue + openlayer 按路径移动

PAX-K

已于 2023-09-27 12:10:53 修改

阅读量415

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript openlayer

于 2023-09-27 11:07:30 首次发布

本文链接：https://blog.csdn.net/weixin_39340061/article/details/133344537

版权

示例

创建一个方形的规矩，并让点按轨迹移动。效果如下:
在这里插入图片描述

源代码

<template>
  <div>
    <div id="map" class="map"></div>
    <button id="start-animation" ref="startButton">Start Animation</button>
  </div>
</template>

<script>
import "ol/ol.css";
import "@/assets/css/map.css";
import {
    Map, View, Feature } from "ol";
import {
    Circle as CircleStyle, Fill, Icon, Stroke, Style } from "ol/style";
import {
    OSM, Vector as VectorSource } from "ol/source";
import {
    Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {
    getVectorContext } from "ol/render";
import {
    LineString, Point } from "ol/geom";
import {
    ref } from "vue";

export default {
   
  setup(props) {
   
    const map = ref(null);
    const startButton = ref(null);
    const styles = {
   
      route: new Style({
   
        stroke: new Stroke({
   
          width: 6,
          color: [237, 212, 0, 0.8],
        }),
      }),
      icon: new