openlayers小车按坐标点循环匀速移动（配自动转向功能）_openlayers 小车匀速行驶

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
代码如下：

data.js
let dataArr =[
  [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],
export default{
  dataArr
<template>
    <div id="Map" ref="map"></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 CAR from '../../assets/car.svg';
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";
import dataArr from './data'
export default {
  data() {
    return {
      map: this.$route.params.map,
      layer: null,
      interaction: null,
      source: null,
      feature: null,
      coors: [],//路的转折点
      carPoint: [],//车还要走的点
      index: 0,//当前小车所在的路段
      timer: null,
      follow: false,  //默认不聚焦
  methods: {
    //初始化地图
    initMap(){
      this.map = new Map({
          target: "Map",
          controls: defaultControls({
              zoom: false
          }).extend([]),
          layers: [
              new TileLayer(
                      source: new XYZ({
                              "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                              // "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
                  { zoomOffset: 1 }
          view: new View({
              center: fromLonLat([108.522097, 37.272848]),
              zoom: 4.7,
              maxZoom: 4.7,
              minZoom: 4.7
      });
    //添加矢量图层
    async open() {
      //画轨迹线
      await this.drawLine()
      //开始动
      this.moveStart();
    //轨迹线  把每个点连起来
    drawLine(){
      this.lineLayer = new VectorLayer({
        source: new VectorSource({
          features: []
      });
      this.map.addLayer(this.lineLayer);
      let comDots = []
      let wireFeature = null
      dataArr.dataArr.forEach((item,index)=>{
        comDots.push(item)
        wireFeature = new Feature({
          geometry:new LineString(comDots)
        wireFeature.setStyle(
          new Style({
            stroke: new Stroke({ // 设置边的样式
              color: 'rgb(21, 106, 158)',
              width: 1
            }),
          }),
        this.lineLayer.getSource().addFeatures([wireFeature]);
    //创建小车这个要素
    moveStart() {
      //坐标转换
      this.dotsData = dataArr.dataArr.map(item => {
        return transform(
          item,
          'EPSG:3857',
          'EPSG:4326',
      });
      //深复制车的位置，不在原数组改变，方便重新播放
      this.carPoint = JSON.parse(JSON.stringify(this.dotsData));
      //小车最初位置在第一个坐标点
      this.feature = new Feature({
        geometry: new Point(this.carPoint[0]),
      this.feature.setStyle(new Style({
        image: new Icon({
          src: CAR,
          scale:0.25,
          anchor: [0.5, 0.5],
          rotation: this.countRotate(),
      }));
      //添加车辆元素到图层
      this.lineLayer.getSource().addFeature(this.feature);
      this.timeStart();
    //计时器开始
    timeStart() {
      this.timer = setInterval(() => {
        if(this.index + 1 >= this.carPoint.length) {
          //重头开始
          this.index = 0;
          //移除要素
          this.lineLayer.getSource().removeFeature(this.feature);
          clearInterval(this.timer);
          //重复运动
          this.open() //自动开启功能
          return ;
        //到转折点旋转角度
        if(this.nextPoint() === this.carPoint[this.index + 1]) {
          this.index++;
          this.feature.getStyle().getImage().setRotation(this.countRotate());
        //改变坐标点
        this.feature.getGeometry().setCoordinates(fromLonLat(this.carPoint[this.index]));
      }, 10);
    //计算下一个点的位置  
    //这里的算法是计算了两点之间的点   两点之间的连线可能存在很多个计算出来的点
    nextPoint() {
      let index = this.index;
      let p1 = this.map.getPixelFromCoordinate(fromLonLat(this.carPoint[index]));    //获取在屏幕的像素位置
      let p2 = this.map.getPixelFromCoordinate(fromLonLat(this.carPoint[index + 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.carPoint[index + 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.carPoint[index] = coor;   //这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
        return this.carPoint[index];
    //计算两点之间的角度  算旋转角度
    countRotate() {
      let i = this.index, j = i + 1;
      if(j === this.carPoint.length) {
        i--;
        j--;
      let p1 = this.carPoint[i];
      let p2 = this.carPoint[j];
      return Math.atan2( p2[0] - p1[0],p2[1] - p1[1]);
  mounted(){
    this.initMap();//初始化地图方法
    this.open() //自动开启功能
</script>
<style lang="scss" scoped>
  #Map{
    width: 70vw;
    height:100vh;
    background: rgb(0,21,48);
  .open-btn{
    margin:10px;
  .el-button{
    position: relative;
    z-index: 99;
</style>
                                    1.环境1.1. openalyer 版本6.3.11.2. jquery 版本3.1.12.逻辑描述2.1 首先根据点位划线。2.2 坐标点位之间计算距离。2.4 距离根据一个默认间距计算每个间距下的坐标进行保存。2.5 创建图标。2.6 创建定时器，进行图标位置设置，这样就出现一种移动的效果了。3.效果4.代码：//地图服务var mapServer;//移动车辆图标layervar car...
                                    要解决这个问题，你可以尝试使用一个更适合的地图投影，例如使用球面墨卡托投影。球面墨卡托投影是一种常见的投影方式，它可以在保持形状不变的同时，将地球表面展示在平面上。地图投影的目的是将球形地球表面展示在二维平面上，但由于地球的形状是椭球形的，所以无法完美地展示。记住，在地图展示上，我们无法完美地呈现地球的真实形状，追求完美的圆形可能并不现实。在球形地球上，绘制的圆会是一个完美的圆形，但当我们在地图上使用椭球形投影时，圆形会变得扁扁的。确保设置正确的投影参数和地理坐标系，以及正确的单位，以获得更准确的圆形。
                                    本章作为OpenLayers入门文章《OpenLayers入门，OpenLayers动画效果实现，OpenLayers实现轨迹运动动画》的的增强进阶篇章，实现了入门教程中没有实现的小车车头方向根据运动方向自动转向的功能。本章代码不使用任何setTimeout和setInterval定时器。
                                    关于数据渲染的问题：这里前端采用的是获取左下角和右上角经纬度作为参数传递给后台获取当前屏幕显示的区域的数据。利用滑动地图区域来请求接口渲染数据，这样就很好的解决了一次性加载很多的数据的问题。............
Vue+Openlayer使用overlay实现弹窗弹出显示与关闭：
Vue+Openlayer使用overlay实现弹窗弹出显示与关闭_BADAO_LIUMANG_QIZHI的博客-CSDN博客
实现弹窗的效果可以参考上面。
要实现的效果是点击某个元素弹窗显示，并且弹窗随着元素的移动而移动。
实现元素移动的效果可以参考如下：
Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)：
Openlayers中使用Image的rotation实现
                                    要求：在地图上展示用户工作时，所经过的轨迹。
参考 ：https://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim
在要求不是很高的时候，官网的例子已经可以满足轨迹回放的需求了，但是现在要求，轨迹回放的时候，图标运动要连贯，不能出现跳跃的现象，于是，只好修改官网的例子了。
1）任意两点间距离过长，在...
                                    我在使用matplotlib绘制某个东西的路径时遇到了一些问题。这是我正在做的事情的基本版本。在本质上，我在看这个值是否在路径中的任何一点突破了某个阈值（在本例中是6），然后在以后对它做些什么。在现在，我设置了3个列表。结束向量将基于另外两个列表。如果在一次模拟过程中，值超过2，我将把对象的最后一个位置添加到我的end_vectortrajectories_vect是我希望通过保留列表列表来跟踪所...