专栏首页跟牛老师一起学WEBGISGPX数据在mapboxGL中轨迹动画

GPX数据在mapboxGL中轨迹动画

概述

喜欢跑步的人都会选择一款APP来自己跑步的,常用的有keep、悦跑圈、华为健康等等,每次跑完步,会根据跑步的轨迹绘制轨迹动画。今天咱们讲讲技术,不扯淡,讲一下在mapboxGL中如何实现类似的效果。

效果

数据

本文中的数据是我跑步的实测数据,数据导出于Garmin运动手表,格式为GPX。

实现

1.解析处理数据

gpx数据解析用到了gpxparse.js,具体请移步GPXParser.js

loadPgxData() {
  $.get('../data/route.gpx', function (res) {
    res = res.firstChild;
    var dom = $('<div/>');
    dom.html(res);
    var gpx = new gpxParser();
    gpx.parse(dom.html());
    that.points = gpx.tracks[0].points;
    var geojson = {
      'type': 'FeatureCollection',
      'features': []
    };
    var points = [[that.points[0].lon, that.points[0].lat]];
    for(var i = 1;i<that.points.length;i++) {
      var p = [that.points[i].lon, that.points[i].lat];
      var _points = points.concat([p]);
      geojson.features.push({
        type: 'Feature',
        geometry: {
          type: 'LineString',
          coordinates: _points
        },
        properties: {
          index: i
        }
      });
      points.push(p);
    }
    // var geojson = gpx.toGeoJSON();
    map.addSource('track-line', {
      type: 'geojson',
      data: geojson
    });
    map.addLayer({
      id: 'track-line',
      type: 'line',
      source: 'track-line',
      paint: {
        'line-color': '#ff0000',
        'line-width': 6
      }
    });

    that.play();

    that.playFlag = setInterval(function () {
      that.index++;
      if(that.index === that.points.length) {
        window.clearInterval(that.playFlag);
      } else {
        that.play();
      }
    }, 30);
  })
}

2.轨迹动画

play() {
  if(that.marker) that.marker.remove();
  switch (that.index) {
    case 0: {
      var img = $('<img>').attr('src', '../css/start.png');
      var dom = $('<div/>').append(img);
      const option = {
        element: dom[0],
        anchor: 'bottom',
        offset: [0, 10]
      };
      new mapboxgl.Marker(option)
              .setLngLat([that.points[0].lon, that.points[0].lat])
              .addTo(map);
      break;
    }
    case that.points.length -1: {
      var img = $('<img>').attr('src', '../css/end.png');
      var dom = $('<div/>').append(img);
      const option = {
        element: dom[0],
        anchor: 'bottom',
        offset: [0, 10]
      };
      new mapboxgl.Marker(option)
              .setLngLat([that.points[that.points.length - 1].lon,
                that.points[that.points.length - 1].lat])
              .addTo(map);
      break;
    }
    default: {
      var img = $('<img>').attr('src', '../css/loc.png');
      var dom = $('<div/>').append(img);
      const option = {
        element: dom[0],
        anchor: 'bottom',
        offset: [0, 10]
      };
      that.marker = new mapboxgl.Marker(option)
              .setLngLat([that.points[that.index].lon,
                that.points[that.index].lat])
              .addTo(map);
      break;
    }
  }
  map.setFilter('track-line', ['==', 'index', that.index]);
  if(that.index === that.points.length - 2) {
    var pt0 = [that.points[that.index].lon,
      that.points[that.index].lat];
    var pt1 = [that.points[that.index + 1].lon,
      that.points[that.index + 1].lat];
    map.flyTo({
      center: pt0,
      zoom: 17.7
    });
    map.setPitch(60);
    var angle = that.getAngle(pt0, pt1);
    map.setBearing(angle);
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 地图上覆盖物压盖的优化

    在做webgis的时候,会经常性的碰到地图覆盖物压盖的情况。本文讲述一种基于聚类思路的解决办法,实现使用的是openlayers4+。

    lzugis
  • OL4中styleFunction的妙用

    越用越觉得styleFunction是一个好东西,爱不释手啊,今天分享一个简单的memo。

    lzugis
  • OL4结合turf.js实现等值线

    本文分享一个结合turf.js实现前端等值线的生成,并对结果做了圆滑处理,并在OL4中进行展示。

    lzugis
  • WordPress删除头部wp_head()多余代码

    如果你有查看过你的WordPress博客的“查看源代码”的话,你会发现头部的html代码非常多,而且是密密麻麻,有些像meta name="generator"...

    Jeff
  • C++11:MinGW当指定-std=c++11选项时 默认定义了__STRICT_ANSI__

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • 百度地图在Android中的使用

    有关百度地图的使用,(http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download)...

    提莫队长
  • 运维系统性能优化后思考,除了避免懒惰的麻木,还需要了解系统的“脾性”

    很多业务系统在发生问题的时候感觉是突然发生的,但是按照分析问题的思路查下去却发现是这样那样的原因,毫无疑问大多是一些很小的问题逐步放大之后看到的。

    jeanron100
  • Shader-基础纹理-凹凸映射

    基础纹理: 美术人员通常在建模软件中利用纹理展开技术,将纹理映射坐标存储在每个顶点上。纹理映射坐标定义了该点在纹理中对应的2D坐标。这个坐标通常被称为UV坐标...

    祝你万事顺利
  • 如何让你的问题不再有去无回?

    加了很多技术交流群,自己也组织有技术群,这种技术群,除了聊天抢红包,我们对它们最大的期许就是在某个真正需要的时候,能解决我的实际问题。我个人其实是非常乐意尽力帮...

    一斤代码
  • JavaScript 变量 作用域 内存

    知识点 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别。JavaScript变量是松散型的(不强制类型)本质,决定...

    汤高

扫码关注云+社区

领取腾讯云代金券