Leaflet 实现路径轨迹回放 轨迹播放 运行轨迹

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量2.2k 收藏 5
点赞数 2
文章标签： javascript html5 gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jcm_zz/article/details/119926746
版权

Leaflet 实现路径轨迹回放 轨迹播放 运行轨迹

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>路径轨迹回放</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
  <!-- <link rel="stylesheet" href="./node_modules/leafvar/dist/leafvar.css" /> -->
  <!-- <script src="./node_modules/leafvar/dist/leafvar.js"></script> -->

</head>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    height: 100%;
  }

  #mapid {
    width: 100%;
    height: 100%;
  }

  .input-card {
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 8rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
</style>

<body>

  <div id="mapid" style="z-index: 10"></div>
  <div class="input-card">
    <button id="run" onclick="start()">run</button>
    <button id="stop" onclick="stop()">stop</button>
    <button id="pause" onclick="pause()">pause</button>
  </div>


  <script>
    /**
     * 为Marker类添加方法
     */
    (function () {
      // save these original methods before they are overwritten
      var proto_initIcon = L.Marker.prototype._initIcon;
      var proto_setPos = L.Marker.prototype._setPos;

      var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');

      L.Marker.addInitHook(function () {
        var iconOptions = this.options.icon && this.options.icon.options;
        var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
        if (iconAnchor) {
          iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
        }
        this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center center';
        this.options.rotationAngle = this.options.rotationAngle || 0;

        // Ensure marker keeps rotated during dragging
        this.on('drag', function (e) { e.target._applyRotation(); });
      });

      L.Marker.include({
        _initIcon: function () {
          proto_initIcon.call(this);
        },

        _setPos: function (pos) {
          proto_setPos.call(this, pos);
          this._applyRotation();
        },

        _applyRotation: function () {
          if (this.options.rotationAngle) {
            this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin;

            if (oldIE) {
              // for IE 9, use the 2D rotation
              this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
            } else {
              // for modern browsers, prefer the 3D accelerated version
              this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
            }
          }
        },

        setRotationAngle: function (angle) {
          this.options.rotationAngle = angle;
          this.update();
          return this;
        },

        setRotationOrigin: function (origin) {
          this.options.rotationOrigin = origin;
          this.update();
          return this;
        }
      });
    })();


    var map = L.map('mapid', {
      center: [38.8631169, 2.3708919],
      zoom: 5,
      crs: L.CRS.EPSG3857,
      layers: [
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        })
      ]
    });
    var _opts = {
      icon: null,
      enableRotation: true //允许小车旋转
    };
    //移动到当前点的索引
    this.i = 0;

    var latlngs = [
      [45.51, 2.3708919],
      [37.77, 8.54235],
      [34.04, 9.52532],
      [36.04, 10.52532],
      [40.04, 14.52532],
      [47.04, 15.52532]
    ];
    var _path = latlngs;
    /* 运行轨迹 */
    var polyline = L.polyline([], { color: 'red' }).addTo(map);
    _initPolyline(_path[i], _path[i + 1], _tween)
    var latlngsPass = polyline.getLatLngs
    var polylinePass = L.polyline([], { color: 'green' }).addTo(map);



    function start() {
      var me = this,
        len = me._path.length;
      //不是第一次点击开始,并且小车还没到达终点
      if (me.i && me.i < len - 1) {
        //没按pause再按start不做处理
        if (!me._fromPause) {
          return;
        } else if (!me._fromStop) {
          //按了pause按钮,并且再按start，直接移动到下一点
          //并且此过程中，没有按stop按钮
          //防止先stop，再pause，然后连续不停的start的异常
          me._moveNext(++me.i);
        }
      } else {
        //第一次点击开始，或者点了stop之后点开始
        polylinePass.setLatLngs([])
        me._addMarker();
        me._moveNext(me.i);
      }
      //重置状态
      this._fromPause = false;
      this._fromStop = false;
    }


    function _addMarker(callback) {
      if (this._marker) {
        this.stop();
        this._marker.remove();
      }
      var marker = new L.Marker(_path[0]).addTo(map)
      this._marker = marker;
    }

    /**
     * 移动到下一个点
     */
    function _moveNext(index) {
      var me = this;
      if (index < this._path.length - 1) {
        this._move(me._path[index], me._path[index + 1], me._tween);
      }
    }

    /**
     * 画路线
     */
    function _initPolyline(initPos, targetPos, effect) {
      var me = this,
        //当前的帧数
        currentCount = -1,
        //步长
        step = 0.01,
        //总步数
        count = Math.round(me._getDistance(initPos[0], initPos[1], targetPos[0], targetPos[1]) / step);

      //如果小于1直接移动到下一点
      if (count < 1) {
        ++me.i
        if (me.i < me._path.length - 1) {
          _initPolyline(me._path[me.i], me._path[me.i + 1], me._tween);
        }
        return;
      }

      //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
      var loop = true
      while (loop) {
        if (currentCount >= count) {
          loop = false
          //移动的点已经超过总的长度
          if (me.i > me._path.length) {
            me.i = 0
            return;
          }
          //运行下一个点
          ++me.i;
          if (me.i < me._path.length - 1) {
            _initPolyline(me._path[me.i], me._path[me.i + 1], me._tween);
            me.i = 0
          }
        } else {
          currentCount++;
          var x = effect(initPos[0], targetPos[0], currentCount, count),
            y = effect(initPos[1], targetPos[1], currentCount, count);
          var pos = L.latLng(x, y);
          polyline.addLatLng(pos)
        }
      }
    }

    /**
     * 移动小车
     * @param {Number} poi 当前的步长.
     * @param {Point} initPos 经纬度坐标初始点.
     * @param {Point} targetPos 经纬度坐标目标点.
     * @param {Function} effect 缓动效果，实现插值
     * @return 无返回值.
     */
    function _move(initPos, targetPos, effect) {
      var me = this,
        //当前的帧数
        currentCount = -1,
        //步长
        timer = 10, //10毫秒为一步
        step = 0.01,
        //总步数
        count = Math.round(me._getDistance(initPos[0], initPos[1], targetPos[0], targetPos[1]) / step);

      //如果小于1直接移动到下一点
      if (count < 1) {
        this._moveNext(++me.i);
        return;
      }
      //两点之间匀速移动
      var angle;
      me._intervalFlag = setInterval(function () {
        //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
        if (currentCount >= count) {
          clearInterval(me._intervalFlag);
          //移动的点已经超过总的长度
          ++me.i
          if (me.i >= me._path.length - 1) {
            console.log('move done')
            return;
          }
          //运行下一个点
          me._moveNext(me.i);
        } else {
          currentCount++;
          var x = effect(initPos[0], targetPos[0], currentCount, count),
            y = effect(initPos[1], targetPos[1], currentCount, count);
          var pos = L.latLng(x, y);

          //设置marker
          if (currentCount == 1) {
            if (me._opts.enableRotation == true) {
              //initPos=[lat,lng],leafvar中坐标对的格式为(纬度，经度)，因此要计算角度的话，X对应经度,即initPos[1]
              // angle = me._getAngle(initPos[1], initPos[0], targetPos[1], targetPos[0]);
            }
          }
          //正在移动
          me._marker.remove();//先删除
          me._marker.setRotationAngle(angle);
          me._marker._latlng = pos;//设置图标位置
          me._marker.addTo(map);
          polylinePass.addLatLng(pos)
        }
      }, timer);
    }

    /**
     * 缓动效果
     * 初始坐标，目标坐标，当前的步长，总的步长
     * @private
     */
    function _tween(initPos, targetPos, currentCount, count) {
      var b = initPos, c = targetPos - initPos, t = currentCount,
        d = count;
      return c * t / d + b;
    }

    /**
     * 计算两点间的距离
     */
    function _getDistance(pxA, pyA, pxB, pyB) {
      return Math.sqrt(Math.pow(pxA - pxB, 2) + Math.pow(pyA - pyB, 2));
    }

    /**
     * 计算角度
     * @param startx
     * @param starty
     * @param endx
     * @param endy
     * @returns {number}
     */
    function _getAngle(startx, starty, endx, endy) {
      var tan = 0
      if (endx == startx) {
        tan = 90;
      } else {
        tan = Math.atan(Math.abs((endy - starty) / (endx - startx))) * 180 / Math.PI;
      }

      if (endx >= startx && endy >= starty)//第一象限
      {
        return -tan;
      } else if (endx > startx && endy < starty)//第四象限
      {
        return tan;
      } else if (endx < startx && endy > starty)//第二象限
      {
        return tan - 180;
      } else {
        return 180 - tan;  //第三象限
      }
    }

    /**
     * 停止
     */
    function stop() {
      this.i = 0;
      this._fromStop = true;
      clearInterval(this._intervalFlag);
    }

    /**
     * 暂停
     */
    function pause() {
      clearInterval(this._intervalFlag);
      //标识是否是按过pause按钮
      this._fromPause = true;
    }

  </script>
</body>

</html>

Leaflet-polyline 官方文档

Faith-J
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
109.（leaflet篇）leaflet实现沿轨迹线播放
GIS之家家长
11-07 663
109.（leaflet篇）leaflet实现沿轨迹线播放
Leaflet实现路径轨迹回放
11-07
基于Leaflet实现路径轨迹回放功能，另外对Leaflet.Marker类进行扩展，支持设置图标旋转角度
leaflet快速实现精美的轨迹回放功能
beforeSend的博客
02-29 1172
本文介绍如何通过插件Leaflet.TrackPlayer来简洁高效的在leaflet上实现轨迹回放功能。
使用百度地图实现车辆轨迹回放
格物穷理
11-02 8137
最近在做的项目有个车辆轨迹回放需求，查资料看到可以使用百度地图的路书功能实现,百度路书功能如下。 点击开始按钮，小车会在地图上移动还原历史轨迹。 具体需求就是通过调用后台接口获取到指定车辆的指定时间段的位置信息，将位置信息还原到地图上，点击开始按钮，小车开始在地图上移动，同时添加开始、暂停、停止，地图缩放和速度调整功能。功能按键悬浮在地图左上角。 添加申请到的应用秘钥和路书js文件 <script src="http://api.map.baidu.com/api?v=2.0&amp.
arcgis js 轨迹播放
qq_39963187的博客
10-23 882
arcgis js 轨迹播放 因为项目需求需要，一开始是用高德地图做的轨迹播放，但是因为经纬度间存在的差异，转化又不在考虑范围，所以才有这篇文章。 arcgis for javascript 做轨迹播放，本人艰苦探索终于有了些许眉目 ...
04-SuperMap iClient for Leaflet 动态轨迹展示
03-05
04-SuperMap iClient for Leaflet 动态轨迹展示
vue+leaflet添加polyline轨迹
qq_40920553的博客
07-30 2535
这一节将为大家描述如何在vue中使用leaflet添加polyline轨迹。
leaflet-线的绘制与带箭头的线
s_9527_s的博客
03-15 5710
1.创建空的图层组 this.xiangroup = L.featureGroup([]) //创建图层 this.map.addLayer(this.xiangroup) 2.绘制,使用L.polyline（记住两点一线，如果只有一个点的经纬度，是没有线的） var latlngs = [ //线中点的经纬度点 [38, 0], [38, 180], [0, 0] ] this.polyline = L.polyline(latlngs, { color: 'r...
基于Leaflet开发库的飞行路径、飞行动画、轨迹回放、路径坐标等功能案例的实现(附源代码下载)
liu2004051957的博客
11-29 1901
本文详细介绍基于Leaflet开发库的飞行路径、飞行动画、轨迹回放、路径坐标等功能案例的实现，通过本案例可快速掌握Leaflet开发的许多常用开发功能及技巧，案例代码涉及到包括底图加载、基本控件、图形标注、数据动态加载与解析、图层绘制与控制、动画展示、插件使用等多方面的知识。
leaflet地图轨迹回放，实时改变角度与速度
水壶要大的博客
02-21 4663
leaflet地图实现飞机轨迹回放，实现点位之间不同速度回放，飞机角度切换。
58.（leaflet篇）leaflet轨迹线.zip
12-23
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122099223
基于Leaflet开发库的飞行路径、飞行动画、轨迹回放、路径坐标等功能案例的实现源代码
11-29
内容摘要：本资源为基于Leaflet开发库的飞行路径、飞行动画、轨迹回放、路径坐标等功能案例的实现源代码，通过本案例可快速掌握Leaflet开发的许多常用开发功能及技巧，案例代码涉及到包括底图加载、基本控件、图形...
SuperMap IClient车辆轨迹回放
08-21
根据点生成线，车辆根据轨迹进行动画播放效果，涉及animatorVector
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 561
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 918
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 988
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
cesium轨迹回放
08-05
在Cesium中，实现轨迹回放的方法如下： 1. 首先，你需要定义一个路径，可以通过设置一系列的坐标点来表示路径。这个路径可以是直线、曲线或者其他形状。 2. 然后，你需要定义一个模型，可以是一个三维模型或者一个图标。这个模型将会跟随路径进行移动。 3. 接下来，你需要将时间与位置进行关联。你可以使用Cesium中的`new Cesium.SampledPositionProperty()`来构造位置与时间的关系。 4. 最后，将路径和模型结合起来，通过时间轴来控制模型的移动。在不同的时间点，模型将会根据预先定义的路径进行移动，并且路径的走过的轨迹会被绘制出来。 在webgis项目中，轨迹回放是一个常用的功能。在Cesium中，虽然相比于Leaflet，相关的实例较少，但你可以通过自己编写代码来实现轨迹回放的功能。在实现过程中，你需要定义路径、模型，并且将它们与时间进行关联，最后通过时间轴来控制模型的移动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值