Vue+Openlayer实现轨迹路线

桃扇骨 2022-09-09 00:18 526阅读 0赞

![20210907104631391.gif][]

<template>
      <div>
        <div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
      </div>
    </template>
    
    <script>
    import VectorLayer from "ol/layer/Vector";
    import VectorSource from "ol/source/Vector";
    import Feature from "ol/Feature";
    import { Draw } from "ol/interaction";
    import { Style, Fill, Stroke, Circle, Icon } from "ol/style";
    import { transform, fromLonLat, toLonLat } from "ol/proj";
    import { Point, LineString } from "ol/geom";
    
    import { Map, View, interaction, events } from "ol";
    import TileLayer from "ol/layer/Tile";
    import { defaults as defaultControls } from "ol/control";
    import XYZ from "ol/source/XYZ";
    
    export default {
      data() {
        return {
          map: {},
          featureMove: {},
          carPoints: [], //车还要走的点
          routeIndex: 0, //当前小车所在的路段
          timer: {},
          coordinates: [
            [10836932.628965743, 4998172.218425438],
            [10638182.82599503, 3781582.515392581],
            [10897159.841987172, 3552719.105911153],
            [11120000.530166456, 4986126.775821152],
            [11360909.382252172, 4895785.956289009],
            [11053750.595842887, 3420219.23726401],
            [11294659.4479286, 3257605.7621061527],
            [11565681.906525029, 4823513.300663294],
            [11866817.971632171, 4757263.366339724],
            [11535568.300014313, 3185333.1064804387],
            [11812613.479912885, 3058855.959135439],
            [12125794.987624314, 4721127.038526867],
            [12402840.167522885, 4684990.710714009],
            [12023408.725487886, 2926356.090488296],
            [12300453.905386457, 2860106.1561647244],
            [12643749.0196086, 4630786.218994724],
            [12866589.707787886, 4510331.792951867],
            [12547385.478774315, 2878174.3200711533],
            [12932839.642111458, 2878174.3200711533],
            [13113521.281175744, 3751468.908881867],
            [13125566.723780029, 4739195.202433295],
            [13691702.526181456, 5425785.43087758],
            [13553179.936232172, 6112375.659321865],
            [12920794.199507171, 5407717.266971151],
            [12065567.774602886, 4974081.3332168665],
            [12788294.330860028, 4895785.956289009],
          ],
          routeLayer: {},
        };
      },
      mounted() {
        this.initMap(); //初始化地图方法
        this.open(); //自动开启功能
      },
      methods: {
        //初始化地图
        initMap() {
          this.map = new Map({
            target: "map",
            layers: [
              new TileLayer({
                source: new XYZ({
                  url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                }),
              }),
            ],
            view: new View({
              center: fromLonLat([108.522097, 37.272848]),
              zoom: 4.7,
            }),
          });
        },
        //添加矢量图层
        async open() {
          //画轨迹线
          await this.drawLine();
          //开始动
          this.moveStart();
        },
        //轨迹线  把每个点连起来
        drawLine() {
          this.routeLayer = new VectorLayer({
            source: new VectorSource({
              features: [],
            }),
          });
          this.map.addLayer(this.routeLayer);
    
          let comDots = [];
          let wireFeature = {};
          this.coordinates.forEach((item) => {
            comDots.push(item);
            wireFeature = new Feature({
              geometry: new LineString(comDots),
            });
            wireFeature.setStyle(
              new Style({
                stroke: new Stroke({
                  // 设置边的样式
                  color: "rgb(21, 106, 158)",
                  width: 3,
                }),
              })
            );
            this.routeLayer.getSource().addFeatures([wireFeature]);
          });
        },
        //创建小车这个要素
        moveStart() {
          //坐标转换
          this.dotsData = this.coordinates.map((item) => {
            return transform(item, "EPSG:3857", "EPSG:4326");
          });
          //深复制车的位置，不在原数组改变，方便重新播放
          // this.carPoints = JSON.parse(JSON.stringify(this.dotsData));
          this.carPoints = [...this.dotsData];
    
          //小车最初位置在第一个坐标点
          this.featureMove = new Feature({
            geometry: new Point(this.carPoints[0]),
          });
          this.featureMove.setStyle(
            new Style({
              image: new Icon({
                src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
                scale: 0.85,
                anchor: [0.5, 0.5],
                rotation: this.countRotate(),
              }),
            })
          );
          //添加车辆元素到图层
          this.routeLayer.getSource().addFeature(this.featureMove);
          this.timeStart();
        },
        //计时器开始
        timeStart() {
          this.timer = setInterval(() => {
            if (this.routeIndex + 1 >= this.carPoints.length) {
              //重头开始
              this.routeIndex = 0;
              //移除要素
              this.routeLayer.getSource().removeFeature(this.featureMove);
              clearInterval(this.timer);
              //重复运动
              this.open(); //自动开启功能
              return;
            }
            //到转折点旋转角度
            if (this.nextPoint() === this.carPoints[this.routeIndex + 1]) {
              this.routeIndex++;
              this.featureMove
                .getStyle()
                .getImage()
                .setRotation(this.countRotate());
            }
            //改变坐标点
            this.featureMove
              .getGeometry()
              .setCoordinates(fromLonLat(this.carPoints[this.routeIndex]));
          }, 10);
        },
        //计算下一个点的位置
        //这里的算法是计算了两点之间的点   两点之间的连线可能存在很多个计算出来的点
        nextPoint() {
          let routeIndex = this.routeIndex;
          let p1 = this.map.getPixelFromCoordinate(
            fromLonLat(this.carPoints[routeIndex])
          ); //获取在屏幕的像素位置
          let p2 = this.map.getPixelFromCoordinate(
            fromLonLat(this.carPoints[routeIndex + 1])
          );
          let dx = p2[0] - p1[0];
          let dy = p2[1] - p1[1];
          //打印可见  在没有走到下一个点之前，下一个点是不变的，前一个点以这个点为终点向其靠近
          let distance = Math.sqrt(dx * dx + dy * dy);
          if (distance <= 1) {
            return this.carPoints[routeIndex + 1];
          } else {
            let x = p1[0] + dx / distance;
            let y = p1[1] + dy / distance;
            let coor = transform(
              this.map.getCoordinateFromPixel([x, y]),
              "EPSG:3857",
              "EPSG:4326"
            );
            this.carPoints[routeIndex] = coor; //这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
            return this.carPoints[routeIndex];
          }
        },
        //计算两点之间的角度  算旋转角度
        countRotate() {
          let i = this.routeIndex,
            j = i + 1;
          if (j === this.carPoints.length) {
            i--;
            j--;
          }
          let p1 = this.carPoints[i];
          let p2 = this.carPoints[j];
          return Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

![20210907104742333.gif][]

<template>
      <div>
        <div id="map" style="width: 100vw; height: 100vh" />
        <div id="geo-marker" class="css_animation">
          <img :src="myplanImg" />
        </div>
        <div class="measuretip" id="speed"></div>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import { Map, View, Feature, Overlay } from "ol";
    import { Vector as VectorLayer } from "ol/layer";
    import { OSM, Vector as VectorSource } from "ol/source";
    
    import { Point, LineString } from "ol/geom.js";
    
    import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
    
    import TileLayer from "ol/layer/Tile";
    export default {
      data() {
        return {
          path: [
            [115.62, 14.82],
            [112.79, 14.82],
            [114.6636, 18.2977],
            [111.687, 18.897],
            [110.3014, 15.063],
          ], // 模拟路径
          pathIndex: 0, // 路径点索引
          marker: {}, //移动点
          splitNumber: 200, // 每两个经纬度之间的分割点
          setIntervalTime: 30, // 移动点间隔时间
          myplanImg: "https://openlayers.org/en/v4.6.5/examples/data/icon.png", // 移动点的图片
          helpTooltipElement: {}, // 平台信息div
          helpTooltip: {}, // 平台信息overlay
          sourceFeatures: new VectorSource(),
          lineString: new LineString([]),
        };
      },
      created() {
        this.analysisPath(this.splitNumber);
      },
      mounted() {
        this.initSeamap();
      },
      methods: {
        initSeamap: function () {
          this.pathIndex = this.path.length - 1;
    
          this.map = new Map({
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [109.8, 18.4],
              zoom: 7,
              minZoom: 3, // 限制最大显示
              maxZoom: 14,
            }),
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
              new VectorLayer({
                // 两点之间的连线
                source: new VectorSource({
                  features: [
                    new Feature({
                      geometry: this.lineString,
                    }),
                  ],
                }),
                style: [
                  new Style({
                    stroke: new Stroke({
                      width: 3,
                      color: "rgba(0, 0, 0, 1)",
                      lineDash: [0.1, 5],
                    }),
                    zIndex: 2,
                  }),
                ],
                updateWhileAnimating: true,
              }),
              new VectorLayer({
                // 两端点Feature
                source: this.sourceFeatures,
              }),
            ],
          });
          this.marker = new Overlay({
            positioning: "center-center",
            offset: [0, 0],
            element: document.getElementById("geo-marker"),
            stopEvent: false,
          });
          this.map.addOverlay(this.marker);
          let style1 = [
            // 开始结束点样式
            new Style({
              image: new Icon({
                src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
              }),
            }),
          ];
          let feature_start = new Feature({
            geometry: new Point(this.path[0]),
          });
          let feature_end = new Feature({
            geometry: new Point(this.path[this.path.length - 1]),
          });
          feature_start.setStyle(style1);
          feature_end.setStyle(style1);
    
          this.sourceFeatures.addFeatures([feature_start, feature_end]);
    
          this.lineString.setCoordinates(this.path);
          this.helpTooltipElement = document.createElement("div");
          this.helpTooltipElement.className = "measuretip";
          this.helpTooltipElement.id = "speed";
          this.helpTooltip = new Overlay({
            element: this.helpTooltipElement,
            offset: [15, 0],
            positioning: "center-left",
          });
          this.map.addOverlay(this.helpTooltip);
          this.map.once("postcompose", (event) => {
            setInterval(() => {
              this.animation();
            }, this.setIntervalTime);
          });
        },
        animation: function () {
          if (this.pathIndex === -1) {
            this.pathIndex = this.path.length - 1;
          }
          this.marker.setPosition(this.path[this.pathIndex]);
          this.helpTooltipElement.innerHTML =
            "<B>名称：</B>船载应急通信系统" +
            "<br>" +
            "<B>子系统：</B>平台A,平台B" +
            "<br>" +
            "<B>经纬度：</B>" +
            (this.path[this.pathIndex][0] + "").substring(0, 6) +
            "," +
            (this.path[this.pathIndex][1] + "").substring(0, 5);
          this.helpTooltip.setPosition(this.path[this.pathIndex]);
          this.pathIndex--;
        },
        analysisPath: function (splitNumber) {
          let tempPath = [...this.path];
    
          let pathResults = [];
          let tempPoint = [0, 0];
          if (tempPath.length > 1) {
            for (let i = 0; i < tempPath.length - 1; i++) {
              // 每两个点之间分割出splitNumber个点
              pathResults.push(tempPath[i]);
              for (let j = 0; j < splitNumber; j++) {
                tempPoint[0] =
                  ((tempPath[i + 1][0] - tempPath[i][0]) * (j + 1)) / splitNumber +
                  tempPath[i][0];
                tempPoint[1] =
                  ((tempPath[i + 1][1] - tempPath[i][1]) * (j + 1)) / splitNumber +
                  tempPath[i][1];
                pathResults.push([...tempPoint]);
              }
            }
            pathResults.push(tempPath[tempPath.length - 1]);
            this.path = [...pathResults];
          }
        },
      },
    };
    </script>
    
    <style>
    .measuretip {
      position: relative;
      background-color: #0d9bf2;
      opacity: 0.7;
      border-radius: 3px;
      padding: 10px;
      font-size: 12px;
      cursor: default;
    }
    </style>

![20210907104854771.gif][]

<template>
      <div>
        <div id="map" style="width: 100vw; height: 100vh" />
        <div style="position: fixed; top: 200px; left: 200px">
          <el-button @click="startAnimation()">开始</el-button>
          <el-button @click="stopAnimation()">暂停</el-button>
        </div>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import { Map, View, Feature, Overlay } from "ol";
    import { Vector as VectorLayer } from "ol/layer";
    import { XYZ, OSM, Vector as VectorSource } from "ol/source";
    
    import { Point, LineString } from "ol/geom.js";
    
    import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
    
    import TileLayer from "ol/layer/Tile";
    import { ScaleLine, defaults as defaultControls } from "ol/control";
    
    import { getVectorContext } from "ol/render";
    
    export default {
      data() {
        return {
          map: {},
          route: new LineString([
            [115.62, 14.82],
            [112.79, 14.82],
            [114.6636, 18.2977],
            [111.687, 18.897],
            [110.3014, 15.063],
          ]),
          geometryMove: {},
          featureMove: {},
          styles: {
            route: new Style({
              stroke: new Stroke({
                width: 6,
                color: [237, 212, 0, 0.8],
              }),
            }),
            icon: new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
                scale: 1, //设置大小
              }),
            }),
            featureMove: new Style({
              image: new Circle({
                radius: 7,
                fill: new Fill({ color: "black" }),
                stroke: new Stroke({
                  color: "white",
                  width: 2,
                }),
              }),
            }),
          },
          vectorLayer: {},
          distance: 0,
          lastTime: 0,
          speed: 0.1,
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          this.geometryMove = new Point(this.route.getFirstCoordinate());
    
          this.featureMove = new Feature({
            type: "featureMove",
            geometry: this.geometryMove,
          });
          this.vectorLayer = new VectorLayer({
            source: new VectorSource({
              features: [
                new Feature({
                  type: "route",
                  geometry: this.route,
                }),
                this.featureMove,
                new Feature({
                  type: "icon",
                  geometry: new Point(this.route.getFirstCoordinate()),
                }),
                new Feature({
                  type: "icon",
                  geometry: new Point(this.route.getLastCoordinate()),
                }),
              ],
            }),
            style: (feature) => {
              return this.styles[feature.get("type")];
            },
          });
          this.map = new Map({
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [109.8, 18.4],
              zoom: 7,
            }),
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
            ],
          });
          this.map.addLayer(this.vectorLayer);
        },
        moveFeature(e) {
          let time = e.frameState.time;
          this.distance =
            (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
    
          this.lastTime = time;
    
          const currentCoordinate = this.route.getCoordinateAt(
            this.distance > 1 ? 2 - this.distance : this.distance
          );
          this.geometryMove.setCoordinates(currentCoordinate);
          const vectorContext = getVectorContext(e);
          vectorContext.setStyle(this.styles.featureMove);
          vectorContext.drawGeometry(this.geometryMove);
          this.map.render();
        },
        startAnimation() {
          this.lastTime = Date.now();
          this.vectorLayer.on("postrender", this.moveFeature);
          this.featureMove.setGeometry(null); //必须用null，不能用{}
        },
    
        stopAnimation() {
          this.featureMove.setGeometry(this.geometryMove);
          this.vectorLayer.un("postrender", this.moveFeature);
        },
      },
    };
    </script>

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_12_color_FFFFFF_t_70_g_se_x_16][]

使用：

<template>
      <div>
        <div id="map" style="height: 100vh; width: 100vw"></div>
        <div style="position: fixed; top: 100px; left: 200px">
          <el-button @click="openAnimation()">打开动画</el-button>
          <el-button @click="closeAnimation()">关闭动画</el-button>
        </div>
    
        <LjOlCarRoute
          ref="ref_LjOlCarRoute"
          :map="map"
          :coordinates="coordinates_route"
          :speed="0.1"
          v-if="showAnimation"
        ></LjOlCarRoute>
      </div>
    </template>
     
    <script>
    import "ol/ol.css";
    import { Map, View } from "ol";
    import { OSM } from "ol/source";
    import { Tile as TileLayer } from "ol/layer";
    import LjOlCarRoute from "@/components/LjOlCarRoute/index.vue";
    
    export default {
      components: { LjOlCarRoute },
      data() {
        return {
          map: {},
          showAnimation: false,
          coordinates_route: [
            [104.2979180563, 30.528298024],
            [104.2987389704, 30.527798338],
            [104.2974397847, 30.5265062907],
            [104.296943667091881, 30.52468992916009],
          ],
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      computed: {},
      methods: {
        initMap() {
          this.map = new Map({
            target: "map",
            layers: [
              new TileLayer({
                source: new OSM(),
              }),
            ],
            view: new View({
              projection: "EPSG:4326",
              center: [104.2974397847, 30.5265062907],
              zoom: 18,
            }),
          });
        },
        openAnimation() {
          this.showAnimation = true;
        },
        closeAnimation() {
          this.$refs.ref_LjOlCarRoute.removeLayer();
          this.showAnimation = false;
        },
      },
    };
    </script>

组件：LjOlCarRoute/index.vue:

<template>
      <div>
        <div style="position: fixed; top: 200px; left: 200px">
          <el-button @click="startAnimation()">开始</el-button>
          <el-button @click="stopAnimation()">暂停</el-button>
        </div>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import { Map, View, Feature, Overlay } from "ol";
    import { Vector as VectorLayer } from "ol/layer";
    import { XYZ, OSM, Vector as VectorSource } from "ol/source";
    
    import { Point, LineString } from "ol/geom.js";
    
    import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
    
    import TileLayer from "ol/layer/Tile";
    
    import { getVectorContext } from "ol/render";
    
    export default {
      name: "LjOlCarRoute",
      props: {
        map: {
          type: Object,
          default: () => {},
          required: true,
        },
        coordinates: {
          type: Array,
          default: () => [
            [115.62, 14.82],
            [112.79, 14.82],
            [114.6636, 18.2977],
            [111.687, 18.897],
            [110.3014, 15.063],
          ],
        },
        startPointImage: {
          type: String,
          default:
            "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/position.png",
        },
        endPointImage: {
          type: String,
          default:
            "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/position.png",
        },
        movePointImage: {
          type: String,
          default:
            "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/xiaoche.png",
        },
        speed: {
          type: Number,
          default: 0.1,
        },
      },
      data() {
        return {
          route: new LineString(this.coordinates),
          geometryMove: {},
          featureMove: {},
          styles: {
            route: new Style({
              stroke: new Stroke({
                width: 6,
                color: [237, 212, 0, 0.8],
              }),
            }),
            startIcon: new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: this.startPointImage,
                scale: 1, //设置大小
              }),
            }),
            endIcon: new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: this.endPointImage,
                scale: 1, //设置大小
              }),
            }),
            featureMove: new Style({
              image: new Icon({
                // anchor: [0.5, 1],
                src: this.movePointImage,
                scale: 0.2, //设置大小
              }),
            }),
          },
          vectorLayer: {},
          distance: 0,
          lastTime: 0,
        };
      },
      created() {},
      mounted() {
        this.initMap();
      },
      methods: {
        initMap() {
          this.geometryMove = new Point(this.route.getFirstCoordinate());
    
          this.featureMove = new Feature({
            type: "featureMove",
            geometry: this.geometryMove,
          });
          this.vectorLayer = new VectorLayer({
            source: new VectorSource({
              features: [
                new Feature({
                  type: "route",
                  geometry: this.route,
                }),
                this.featureMove,
                new Feature({
                  type: "startIcon",
                  geometry: new Point(this.route.getFirstCoordinate()),
                }),
                new Feature({
                  type: "endIcon",
                  geometry: new Point(this.route.getLastCoordinate()),
                }),
              ],
            }),
            style: (feature) => {
              return this.styles[feature.get("type")];
            },
          });
          this.map.addLayer(this.vectorLayer);
        },
        moveFeature(e) {
          let time = e.frameState.time;
          this.distance =
            (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
    
          this.lastTime = time;
    
          const currentCoordinate = this.route.getCoordinateAt(
            this.distance > 1 ? 2 - this.distance : this.distance
          );
          this.geometryMove.setCoordinates(currentCoordinate);
          const vectorContext = getVectorContext(e);
          vectorContext.setStyle(this.styles.featureMove);
          vectorContext.drawGeometry(this.geometryMove);
          this.map.render();
        },
        startAnimation() {
          this.lastTime = Date.now();
          this.vectorLayer.on("postrender", this.moveFeature);
          this.featureMove.setGeometry(null); //必须用null，不能用{}
        },
    
        stopAnimation() {
          this.featureMove.setGeometry(this.geometryMove);
          this.vectorLayer.un("postrender", this.moveFeature);
        },
        removeLayer() {
          this.map.removeLayer(this.vectorLayer);
          this.vectorLayer.getSource().clear();
          this.featureMove = {};
          this.geometryMove = {};
        },
      },
    };
    </script>

[20210907104631391.gif]: /images/20220829/682d8dc1ec1f441e942fd5f4de9e24dd.png
[20210907104742333.gif]: /images/20220829/0ec67e1bb4544558ab66dccff607e8aa.png
[20210907104854771.gif]: /images/20220829/a72eb947bd5141c68e1e95890b3c7b3c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAfueWhg_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b494ee18b6234ad1a9dfa958ec263205.png