devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+Openlayer实现轨迹路线_openlayers轨迹绘制

作者：凡人多烦事01 | 2024-05-22 08:19:35

赞

踩

openlayers轨迹绘制

  1. <template>
  2.   <div>
  3.     <div id="map" ref="map" style="width: 100vw; height: 100vh"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import VectorLayer from "ol/layer/Vector";
  9. import VectorSource from "ol/source/Vector";
  10. import Feature from "ol/Feature";
  11. import { Draw } from "ol/interaction";
  12. import { Style, Fill, Stroke, Circle, Icon } from "ol/style";
  13. import { transform, fromLonLat, toLonLat } from "ol/proj";
  14. import { Point, LineString } from "ol/geom";
  15.  
  16. import { Map, View, interaction, events } from "ol";
  17. import TileLayer from "ol/layer/Tile";
  18. import { defaults as defaultControls } from "ol/control";
  19. import XYZ from "ol/source/XYZ";
  20.  
  21. export default {
  22.   data() {
  23.     return {
  24.       map: {},
  25.       featureMove: {},
  26.       carPoints: [], //车还要走的点
  27.       routeIndex: 0, //当前小车所在的路段
  28.       timer: {},
  29.       coordinates: [
  30.         [10836932.628965743, 4998172.218425438],
  31.         [10638182.82599503, 3781582.515392581],
  32.         [10897159.841987172, 3552719.105911153],
  33.         [11120000.530166456, 4986126.775821152],
  34.         [11360909.382252172, 4895785.956289009],
  35.         [11053750.595842887, 3420219.23726401],
  36.         [11294659.4479286, 3257605.7621061527],
  37.         [11565681.906525029, 4823513.300663294],
  38.         [11866817.971632171, 4757263.366339724],
  39.         [11535568.300014313, 3185333.1064804387],
  40.         [11812613.479912885, 3058855.959135439],
  41.         [12125794.987624314, 4721127.038526867],
  42.         [12402840.167522885, 4684990.710714009],
  43.         [12023408.725487886, 2926356.090488296],
  44.         [12300453.905386457, 2860106.1561647244],
  45.         [12643749.0196086, 4630786.218994724],
  46.         [12866589.707787886, 4510331.792951867],
  47.         [12547385.478774315, 2878174.3200711533],
  48.         [12932839.642111458, 2878174.3200711533],
  49.         [13113521.281175744, 3751468.908881867],
  50.         [13125566.723780029, 4739195.202433295],
  51.         [13691702.526181456, 5425785.43087758],
  52.         [13553179.936232172, 6112375.659321865],
  53.         [12920794.199507171, 5407717.266971151],
  54.         [12065567.774602886, 4974081.3332168665],
  55.         [12788294.330860028, 4895785.956289009],
  56.       ],
  57.       routeLayer: {},
  58.     };
  59.   },
  60.   mounted() {
  61.     this.initMap(); //初始化地图方法
  62.     this.open(); //自动开启功能
  63.   },
  64.   methods: {
  65.     //初始化地图
  66.     initMap() {
  67.       this.map = new Map({
  68.         target: "map",
  69.         layers: [
  70.           new TileLayer({
  71.             source: new XYZ({
  72.               url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
  73.             }),
  74.           }),
  75.         ],
  76.         view: new View({
  77.           center: fromLonLat([108.522097, 37.272848]),
  78.           zoom: 4.7,
  79.         }),
  80.       });
  81.     },
  82.     //添加矢量图层
  83.     async open() {
  84.       //画轨迹线
  85.       await this.drawLine();
  86.       //开始动
  87.       this.moveStart();
  88.     },
  89.     //轨迹线  把每个点连起来
  90.     drawLine() {
  91.       this.routeLayer = new VectorLayer({
  92.         source: new VectorSource({
  93.           features: [],
  94.         }),
  95.       });
  96.       this.map.addLayer(this.routeLayer);
  97.  
  98.       let comDots = [];
  99.       let wireFeature = {};
  100.       this.coordinates.forEach((item) => {
  101.         comDots.push(item);
  102.         wireFeature = new Feature({
  103.           geometry: new LineString(comDots),
  104.         });
  105.         wireFeature.setStyle(
  106.           new Style({
  107.             stroke: new Stroke({
  108.               // 设置边的样式
  109.               color: "rgb(21, 106, 158)",
  110.               width: 3,
  111.             }),
  112.           })
  113.         );
  114.         this.routeLayer.getSource().addFeatures([wireFeature]);
  115.       });
  116.     },
  117.     //创建小车这个要素
  118.     moveStart() {
  119.       //坐标转换
  120.       this.dotsData = this.coordinates.map((item) => {
  121.         return transform(item, "EPSG:3857", "EPSG:4326");
  122.       });
  123.       //深复制车的位置，不在原数组改变，方便重新播放
  124.       // this.carPoints = JSON.parse(JSON.stringify(this.dotsData));
  125.       this.carPoints = [...this.dotsData];
  126.  
  127.       //小车最初位置在第一个坐标点
  128.       this.featureMove = new Feature({
  129.         geometry: new Point(this.carPoints[0]),
  130.       });
  131.       this.featureMove.setStyle(
  132.         new Style({
  133.           image: new Icon({
  134.             src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
  135.             scale: 0.85,
  136.             anchor: [0.5, 0.5],
  137.             rotation: this.countRotate(),
  138.           }),
  139.         })
  140.       );
  141.       //添加车辆元素到图层
  142.       this.routeLayer.getSource().addFeature(this.featureMove);
  143.       this.timeStart();
  144.     },
  145.     //计时器开始
  146.     timeStart() {
  147.       this.timer = setInterval(() => {
  148.         if (this.routeIndex + 1 >= this.carPoints.length) {
  149.           //重头开始
  150.           this.routeIndex = 0;
  151.           //移除要素
  152.           this.routeLayer.getSource().removeFeature(this.featureMove);
  153.           clearInterval(this.timer);
  154.           //重复运动
  155.           this.open(); //自动开启功能
  156.           return;
  157.         }
  158.         //到转折点旋转角度
  159.         if (this.nextPoint() === this.carPoints[this.routeIndex + 1]) {
  160.           this.routeIndex++;
  161.           this.featureMove
  162.             .getStyle()
  163.             .getImage()
  164.             .setRotation(this.countRotate());
  165.         }
  166.         //改变坐标点
  167.         this.featureMove
  168.           .getGeometry()
  169.           .setCoordinates(fromLonLat(this.carPoints[this.routeIndex]));
  170.       }, 10);
  171.     },
  172.     //计算下一个点的位置
  173.     //这里的算法是计算了两点之间的点   两点之间的连线可能存在很多个计算出来的点
  174.     nextPoint() {
  175.       let routeIndex = this.routeIndex;
  176.       let p1 = this.map.getPixelFromCoordinate(
  177.         fromLonLat(this.carPoints[routeIndex])
  178.       ); //获取在屏幕的像素位置
  179.       let p2 = this.map.getPixelFromCoordinate(
  180.         fromLonLat(this.carPoints[routeIndex + 1])
  181.       );
  182.       let dx = p2[0] - p1[0];
  183.       let dy = p2[1] - p1[1];
  184.       //打印可见  在没有走到下一个点之前，下一个点是不变的，前一个点以这个点为终点向其靠近
  185.       let distance = Math.sqrt(dx * dx + dy * dy);
  186.       if (distance <= 1) {
  187.         return this.carPoints[routeIndex + 1];
  188.       } else {
  189.         let x = p1[0] + dx / distance;
  190.         let y = p1[1] + dy / distance;
  191.         let coor = transform(
  192.           this.map.getCoordinateFromPixel([x, y]),
  193.           "EPSG:3857",
  194.           "EPSG:4326"
  195.         );
  196.         this.carPoints[routeIndex] = coor; //这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
  197.         return this.carPoints[routeIndex];
  198.       }
  199.     },
  200.     //计算两点之间的角度  算旋转角度
  201.     countRotate() {
  202.       let i = this.routeIndex,
  203.         j = i + 1;
  204.       if (j === this.carPoints.length) {
  205.         i--;
  206.         j--;
  207.       }
  208.       let p1 = this.carPoints[i];
  209.       let p2 = this.carPoints[j];
  210.       return Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);
  211.     },
  212.   },
  213. };
  214. </script>
  215.  
  216. <style lang="scss" scoped>
  217. </style>
  218.

 

  1. <template>
  2.   <div>
  3.     <div id="map" style="width: 100vw; height: 100vh" />
  4.     <div id="geo-marker" class="css_animation">
  5.       <img :src="myplanImg" />
  6.     </div>
  7.     <div class="measuretip" id="speed"></div>
  8.   </div>
  9. </template>
  10. <script>
  11. import "ol/ol.css";
  12. import { Map, View, Feature, Overlay } from "ol";
  13. import { Vector as VectorLayer } from "ol/layer";
  14. import { OSM, Vector as VectorSource } from "ol/source";
  15.  
  16. import { Point, LineString } from "ol/geom.js";
  17.  
  18. import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
  19.  
  20. import TileLayer from "ol/layer/Tile";
  21. export default {
  22.   data() {
  23.     return {
  24.       path: [
  25.         [115.62, 14.82],
  26.         [112.79, 14.82],
  27.         [114.6636, 18.2977],
  28.         [111.687, 18.897],
  29.         [110.3014, 15.063],
  30.       ], // 模拟路径
  31.       pathIndex: 0, // 路径点索引
  32.       marker: {}, //移动点
  33.       splitNumber: 200, // 每两个经纬度之间的分割点
  34.       setIntervalTime: 30, // 移动点间隔时间
  35.       myplanImg: "https://openlayers.org/en/v4.6.5/examples/data/icon.png", // 移动点的图片
  36.       helpTooltipElement: {}, // 平台信息div
  37.       helpTooltip: {}, // 平台信息overlay
  38.       sourceFeatures: new VectorSource(),
  39.       lineString: new LineString([]),
  40.     };
  41.   },
  42.   created() {
  43.     this.analysisPath(this.splitNumber);
  44.   },
  45.   mounted() {
  46.     this.initSeamap();
  47.   },
  48.   methods: {
  49.     initSeamap: function () {
  50.       this.pathIndex = this.path.length - 1;
  51.  
  52.       this.map = new Map({
  53.         target: "map",
  54.         view: new View({
  55.           projection: "EPSG:4326",
  56.           center: [109.8, 18.4],
  57.           zoom: 7,
  58.           minZoom: 3, // 限制最大显示
  59.           maxZoom: 14,
  60.         }),
  61.         layers: [
  62.           new TileLayer({
  63.             source: new OSM(),
  64.           }),
  65.           new VectorLayer({
  66.             // 两点之间的连线
  67.             source: new VectorSource({
  68.               features: [
  69.                 new Feature({
  70.                   geometry: this.lineString,
  71.                 }),
  72.               ],
  73.             }),
  74.             style: [
  75.               new Style({
  76.                 stroke: new Stroke({
  77.                   width: 3,
  78.                   color: "rgba(0, 0, 0, 1)",
  79.                   lineDash: [0.1, 5],
  80.                 }),
  81.                 zIndex: 2,
  82.               }),
  83.             ],
  84.             updateWhileAnimating: true,
  85.           }),
  86.           new VectorLayer({
  87.             // 两端点Feature
  88.             source: this.sourceFeatures,
  89.           }),
  90.         ],
  91.       });
  92.       this.marker = new Overlay({
  93.         positioning: "center-center",
  94.         offset: [0, 0],
  95.         element: document.getElementById("geo-marker"),
  96.         stopEvent: false,
  97.       });
  98.       this.map.addOverlay(this.marker);
  99.       let style1 = [
  100.         // 开始结束点样式
  101.         new Style({
  102.           image: new Icon({
  103.             src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
  104.           }),
  105.         }),
  106.       ];
  107.       let feature_start = new Feature({
  108.         geometry: new Point(this.path[0]),
  109.       });
  110.       let feature_end = new Feature({
  111.         geometry: new Point(this.path[this.path.length - 1]),
  112.       });
  113.       feature_start.setStyle(style1);
  114.       feature_end.setStyle(style1);
  115.  
  116.       this.sourceFeatures.addFeatures([feature_start, feature_end]);
  117.  
  118.       this.lineString.setCoordinates(this.path);
  119.       this.helpTooltipElement = document.createElement("div");
  120.       this.helpTooltipElement.className = "measuretip";
  121.       this.helpTooltipElement.id = "speed";
  122.       this.helpTooltip = new Overlay({
  123.         element: this.helpTooltipElement,
  124.         offset: [15, 0],
  125.         positioning: "center-left",
  126.       });
  127.       this.map.addOverlay(this.helpTooltip);
  128.       this.map.once("postcompose", (event) => {
  129.         setInterval(() => {
  130.           this.animation();
  131.         }, this.setIntervalTime);
  132.       });
  133.     },
  134.     animation: function () {
  135.       if (this.pathIndex === -1) {
  136.         this.pathIndex = this.path.length - 1;
  137.       }
  138.       this.marker.setPosition(this.path[this.pathIndex]);
  139.       this.helpTooltipElement.innerHTML =
  140.         "<B>名称：</B>船载应急通信系统" +
  141.         "<br>" +
  142.         "<B>子系统：</B>平台A,平台B" +
  143.         "<br>" +
  144.         "<B>经纬度：</B>" +
  145.         (this.path[this.pathIndex][0] + "").substring(0, 6) +
  146.         "," +
  147.         (this.path[this.pathIndex][1] + "").substring(0, 5);
  148.       this.helpTooltip.setPosition(this.path[this.pathIndex]);
  149.       this.pathIndex--;
  150.     },
  151.     analysisPath: function (splitNumber) {
  152.       let tempPath = [...this.path];
  153.  
  154.       let pathResults = [];
  155.       let tempPoint = [0, 0];
  156.       if (tempPath.length > 1) {
  157.         for (let i = 0; i < tempPath.length - 1; i++) {
  158.           // 每两个点之间分割出splitNumber个点
  159.           pathResults.push(tempPath[i]);
  160.           for (let j = 0; j < splitNumber; j++) {
  161.             tempPoint[0] =
  162.               ((tempPath[i + 1][0] - tempPath[i][0]) * (j + 1)) / splitNumber +
  163.               tempPath[i][0];
  164.             tempPoint[1] =
  165.               ((tempPath[i + 1][1] - tempPath[i][1]) * (j + 1)) / splitNumber +
  166.               tempPath[i][1];
  167.             pathResults.push([...tempPoint]);
  168.           }
  169.         }
  170.         pathResults.push(tempPath[tempPath.length - 1]);
  171.         this.path = [...pathResults];
  172.       }
  173.     },
  174.   },
  175. };
  176. </script>
  177.  
  178. <style>
  179. .measuretip {
  180.   position: relative;
  181.   background-color: #0d9bf2;
  182.   opacity: 0.7;
  183.   border-radius: 3px;
  184.   padding: 10px;
  185.   font-size: 12px;
  186.   cursor: default;
  187. }
  188. </style>
  189.  

  1. <template>
  2.   <div>
  3.     <div id="map" style="width: 100vw; height: 100vh" />
  4.     <div style="position: fixed; top: 200px; left: 200px">
  5.       <el-button @click="startAnimation()">开始</el-button>
  6.       <el-button @click="stopAnimation()">暂停</el-button>
  7.     </div>
  8.   </div>
  9. </template>
  10. <script>
  11. import "ol/ol.css";
  12. import { Map, View, Feature, Overlay } from "ol";
  13. import { Vector as VectorLayer } from "ol/layer";
  14. import { XYZ, OSM, Vector as VectorSource } from "ol/source";
  15.  
  16. import { Point, LineString } from "ol/geom.js";
  17.  
  18. import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
  19.  
  20. import TileLayer from "ol/layer/Tile";
  21. import { ScaleLine, defaults as defaultControls } from "ol/control";
  22.  
  23. import { getVectorContext } from "ol/render";
  24.  
  25. export default {
  26.   data() {
  27.     return {
  28.       map: {},
  29.       route: new LineString([
  30.         [115.62, 14.82],
  31.         [112.79, 14.82],
  32.         [114.6636, 18.2977],
  33.         [111.687, 18.897],
  34.         [110.3014, 15.063],
  35.       ]),
  36.       geometryMove: {},
  37.       featureMove: {},
  38.       styles: {
  39.         route: new Style({
  40.           stroke: new Stroke({
  41.             width: 6,
  42.             color: [237, 212, 0, 0.8],
  43.           }),
  44.         }),
  45.         icon: new Style({
  46.           image: new Icon({
  47.             anchor: [0.5, 1],
  48.             src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
  49.             scale: 1, //设置大小
  50.           }),
  51.         }),
  52.         featureMove: new Style({
  53.           image: new Circle({
  54.             radius: 7,
  55.             fill: new Fill({ color: "black" }),
  56.             stroke: new Stroke({
  57.               color: "white",
  58.               width: 2,
  59.             }),
  60.           }),
  61.         }),
  62.       },
  63.       vectorLayer: {},
  64.       distance: 0,
  65.       lastTime: 0,
  66.       speed: 0.1,
  67.     };
  68.   },
  69.   created() {},
  70.   mounted() {
  71.     this.initMap();
  72.   },
  73.   methods: {
  74.     initMap() {
  75.       this.geometryMove = new Point(this.route.getFirstCoordinate());
  76.  
  77.       this.featureMove = new Feature({
  78.         type: "featureMove",
  79.         geometry: this.geometryMove,
  80.       });
  81.       this.vectorLayer = new VectorLayer({
  82.         source: new VectorSource({
  83.           features: [
  84.             new Feature({
  85.               type: "route",
  86.               geometry: this.route,
  87.             }),
  88.             this.featureMove,
  89.             new Feature({
  90.               type: "icon",
  91.               geometry: new Point(this.route.getFirstCoordinate()),
  92.             }),
  93.             new Feature({
  94.               type: "icon",
  95.               geometry: new Point(this.route.getLastCoordinate()),
  96.             }),
  97.           ],
  98.         }),
  99.         style: (feature) => {
  100.           return this.styles[feature.get("type")];
  101.         },
  102.       });
  103.       this.map = new Map({
  104.         target: "map",
  105.         view: new View({
  106.           projection: "EPSG:4326",
  107.           center: [109.8, 18.4],
  108.           zoom: 7,
  109.         }),
  110.         layers: [
  111.           new TileLayer({
  112.             source: new OSM(),
  113.           }),
  114.         ],
  115.       });
  116.       this.map.addLayer(this.vectorLayer);
  117.     },
  118.     moveFeature(e) {
  119.       let time = e.frameState.time;
  120.       this.distance =
  121.         (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
  122.  
  123.       this.lastTime = time;
  124.  
  125.       const currentCoordinate = this.route.getCoordinateAt(
  126.         this.distance > 1 ? 2 - this.distance : this.distance
  127.       );
  128.       this.geometryMove.setCoordinates(currentCoordinate);
  129.       const vectorContext = getVectorContext(e);
  130.       vectorContext.setStyle(this.styles.featureMove);
  131.       vectorContext.drawGeometry(this.geometryMove);
  132.       this.map.render();
  133.     },
  134.     startAnimation() {
  135.       this.lastTime = Date.now();
  136.       this.vectorLayer.on("postrender", this.moveFeature);
  137.       this.featureMove.setGeometry(null); //必须用null，不能用{}
  138.     },
  139.  
  140.     stopAnimation() {
  141.       this.featureMove.setGeometry(this.geometryMove);
  142.       this.vectorLayer.un("postrender", this.moveFeature);
  143.     },
  144.   },
  145. };
  146. </script>
  147.  
  148.

使用：

  1. <template>
  2.   <div>
  3.     <div id="map" style="height: 100vh; width: 100vw"></div>
  4.     <div style="position: fixed; top: 100px; left: 200px">
  5.       <el-button @click="openAnimation()">打开动画</el-button>
  6.       <el-button @click="closeAnimation()">关闭动画</el-button>
  7.     </div>
  8.  
  9.     <LjOlCarRoute
  10.       ref="ref_LjOlCarRoute"
  11.       :map="map"
  12.       :coordinates="coordinates_route"
  13.       :speed="0.1"
  14.       v-if="showAnimation"
  15.     ></LjOlCarRoute>
  16.   </div>
  17. </template>
  18.  
  19. <script>
  20. import "ol/ol.css";
  21. import { Map, View } from "ol";
  22. import { OSM } from "ol/source";
  23. import { Tile as TileLayer } from "ol/layer";
  24. import LjOlCarRoute from "@/components/LjOlCarRoute/index.vue";
  25.  
  26. export default {
  27.   components: { LjOlCarRoute },
  28.   data() {
  29.     return {
  30.       map: {},
  31.       showAnimation: false,
  32.       coordinates_route: [
  33.         [104.2979180563, 30.528298024],
  34.         [104.2987389704, 30.527798338],
  35.         [104.2974397847, 30.5265062907],
  36.         [104.296943667091881, 30.52468992916009],
  37.       ],
  38.     };
  39.   },
  40.   created() {},
  41.   mounted() {
  42.     this.initMap();
  43.   },
  44.   computed: {},
  45.   methods: {
  46.     initMap() {
  47.       this.map = new Map({
  48.         target: "map",
  49.         layers: [
  50.           new TileLayer({
  51.             source: new OSM(),
  52.           }),
  53.         ],
  54.         view: new View({
  55.           projection: "EPSG:4326",
  56.           center: [104.2974397847, 30.5265062907],
  57.           zoom: 18,
  58.         }),
  59.       });
  60.     },
  61.     openAnimation() {
  62.       this.showAnimation = true;
  63.     },
  64.     closeAnimation() {
  65.       this.$refs.ref_LjOlCarRoute.removeLayer();
  66.       this.showAnimation = false;
  67.     },
  68.   },
  69. };
  70. </script>

组件：LjOlCarRoute/index.vue:

  1.  
  2. <template>
  3.   <div>
  4.     <div style="position: fixed; top: 200px; left: 200px">
  5.       <el-button @click="startAnimation()">开始</el-button>
  6.       <el-button @click="stopAnimation()">暂停</el-button>
  7.     </div>
  8.   </div>
  9. </template>
  10. <script>
  11. import "ol/ol.css";
  12. import { Map, View, Feature, Overlay } from "ol";
  13. import { Vector as VectorLayer } from "ol/layer";
  14. import { XYZ, OSM, Vector as VectorSource } from "ol/source";
  15.  
  16. import { Point, LineString } from "ol/geom.js";
  17.  
  18. import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
  19.  
  20. import TileLayer from "ol/layer/Tile";
  21.  
  22. import { getVectorContext } from "ol/render";
  23.  
  24. export default {
  25.   name: "LjOlCarRoute",
  26.   props: {
  27.     map: {
  28.       type: Object,
  29.       default: () => {},
  30.       required: true,
  31.     },
  32.     coordinates: {
  33.       type: Array,
  34.       default: () => [
  35.         [115.62, 14.82],
  36.         [112.79, 14.82],
  37.         [114.6636, 18.2977],
  38.         [111.687, 18.897],
  39.         [110.3014, 15.063],
  40.       ],
  41.     },
  42.     startPointImage: {
  43.       type: String,
  44.       default:
  45.         "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/position.png",
  46.     },
  47.     endPointImage: {
  48.       type: String,
  49.       default:
  50.         "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/position.png",
  51.     },
  52.     movePointImage: {
  53.       type: String,
  54.       default:
  55.         "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/xiaoche.png",
  56.     },
  57.     speed: {
  58.       type: Number,
  59.       default: 0.1,
  60.     },
  61.   },
  62.   data() {
  63.     return {
  64.       route: new LineString(this.coordinates),
  65.       geometryMove: {},
  66.       featureMove: {},
  67.       styles: {
  68.         route: new Style({
  69.           stroke: new Stroke({
  70.             width: 6,
  71.             color: [237, 212, 0, 0.8],
  72.           }),
  73.         }),
  74.         startIcon: new Style({
  75.           image: new Icon({
  76.             anchor: [0.5, 1],
  77.             src: this.startPointImage,
  78.             scale: 1, //设置大小
  79.           }),
  80.         }),
  81.         endIcon: new Style({
  82.           image: new Icon({
  83.             anchor: [0.5, 1],
  84.             src: this.endPointImage,
  85.             scale: 1, //设置大小
  86.           }),
  87.         }),
  88.         featureMove: new Style({
  89.           image: new Icon({
  90.             // anchor: [0.5, 1],
  91.             src: this.movePointImage,
  92.             scale: 0.2, //设置大小
  93.           }),
  94.         }),
  95.       },
  96.       vectorLayer: {},
  97.       distance: 0,
  98.       lastTime: 0,
  99.     };
  100.   },
  101.   created() {},
  102.   mounted() {
  103.     this.initMap();
  104.   },
  105.   methods: {
  106.     initMap() {
  107.       this.geometryMove = new Point(this.route.getFirstCoordinate());
  108.  
  109.       this.featureMove = new Feature({
  110.         type: "featureMove",
  111.         geometry: this.geometryMove,
  112.       });
  113.       this.vectorLayer = new VectorLayer({
  114.         source: new VectorSource({
  115.           features: [
  116.             new Feature({
  117.               type: "route",
  118.               geometry: this.route,
  119.             }),
  120.             this.featureMove,
  121.             new Feature({
  122.               type: "startIcon",
  123.               geometry: new Point(this.route.getFirstCoordinate()),
  124.             }),
  125.             new Feature({
  126.               type: "endIcon",
  127.               geometry: new Point(this.route.getLastCoordinate()),
  128.             }),
  129.           ],
  130.         }),
  131.         style: (feature) => {
  132.           return this.styles[feature.get("type")];
  133.         },
  134.       });
  135.       this.map.addLayer(this.vectorLayer);
  136.     },
  137.     moveFeature(e) {
  138.       let time = e.frameState.time;
  139.       this.distance =
  140.         (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
  141.  
  142.       this.lastTime = time;
  143.  
  144.       const currentCoordinate = this.route.getCoordinateAt(
  145.         this.distance > 1 ? 2 - this.distance : this.distance
  146.       );
  147.       this.geometryMove.setCoordinates(currentCoordinate);
  148.       const vectorContext = getVectorContext(e);
  149.       vectorContext.setStyle(this.styles.featureMove);
  150.       vectorContext.drawGeometry(this.geometryMove);
  151.       this.map.render();
  152.     },
  153.     startAnimation() {
  154.       this.lastTime = Date.now();
  155.       this.vectorLayer.on("postrender", this.moveFeature);
  156.       this.featureMove.setGeometry(null); //必须用null，不能用{}
  157.     },
  158.  
  159.     stopAnimation() {
  160.       this.featureMove.setGeometry(this.geometryMove);
  161.       this.vectorLayer.un("postrender", this.moveFeature);
  162.     },
  163.     removeLayer() {
  164.       this.map.removeLayer(this.vectorLayer);
  165.       this.vectorLayer.getSource().clear();
  166.       this.featureMove = {};
  167.       this.geometryMove = {};
  168.     },
  169.   },
  170. };
  171. </script>
  172.  
  173.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/607331
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号