npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gpspathtransfigure

v1.0.6

Published

Designed specifically for rendering trajectories of GPS points reported by devices. Optimize GPS coordinate trajectory. Calculate stop points, stay time, exercise time, mileage and other information.

Downloads

8

Readme

介绍

专为设备上报的GPS点渲染轨迹而设计。优化GPS坐标轨迹。包括计算停留点、降噪、停留时间、行驶里程、速度等信息

高德地图效果

Google地图效果

插件使用前提

您的GPS点必须是连续上报的。即便停止也要持续定时上报。足够多且连续的坐标点是轨迹渲染出色的前提。插件只是用来辅助解决精度和停留点数据问题

核心功能介绍

  • 自动识别停留点
  • 密集停留点降噪
  • 异常GPS噪点识别降噪
  • 卡片式信息展示
  • 轨迹补偿(需要配置高德密钥。国外需要配置Google Map密钥)
  • 使用门槛低
  • 支持国际化
  • 高灵活性(提供多达20+个参数根据需要自由调整)
  • 参数自动优化策略。(根据不同轨迹自适应调整部分参数)
  • 根据轨迹自动计算中心点和Zoom缩放比
  • 高性能。(异步架构)
  • 轨迹采样(为了让不同长度的轨迹渲染时长一致)
  • 随速自适应轨迹颜色(根据相对速度的不同,一段轨迹的快慢由蓝色到红色24种颜色标注出来)
  • 适配uniapp

停留点计算原理

理论依据

连续的GPS点中,静止不动的一段或者多段这样的点序列。把这些点序列处理成一个点,也就是拿这些序列的第一个点即可。理论依据如下:从第二个点开始,每个点都和第一个点进行距离计算和比较。至少比较N个点。当百分之M的点距离在X内的话,就继续计算比对。直到后面Z个连续点超出X,那么第一个点到超出X的第一个点,也就是Z的第一个点之前的点认为是静止状态。则这个序列被认为是静止的GPS序列,取停止点的中心点即可。后面从继续从Z的第一个点循环做这件事儿。若点不足N个,则不做任何处理

stoppoint.png 在连续的GPS序列中,假设前半段静止,后半段运动。则后序所有点和第一个点进行距离计算后和时间的关系图如上。静止的点拟合后的结果一定是平行于X轴的,后半段的拟合在匀速的情况下,是一个0<角度<90度的线(变速运动的话时拟合的是曲线)

停留中心点计算

识别出停留点轨迹序列后,需要计算这些点的中心点,当作停留点。算法如下: centerpoint.png

轨迹补偿原理

smoothness.png 图中绿色的段落会被识别出来,调用地图服务进行补点

  • 1、统计相邻两点之间的距离,去掉最大值和最小值(如果有相同的最大/小值一并去掉),统计出平均值。
  • 2、若超出平均值一定倍数smoothnessAvgThreshold,则判定点距离过远,需要轨迹补偿
  • 3、轨迹补偿的方式:国内使用高德地图步行路线规划功能补点;国外使用Google道路吸附功能补点
  • 4、性能方面也不必担心。插件整体架构使用了异步的方式并发处理这些补偿点。网络(客户端)正常情况下此功能会带来5%~30%的性能损耗。但它依然很快。

自动优化

什么是自动优化

在开启自动优化autoOptimize=true后,插件会根据轨迹的实际情况自动调整停留点的识别精度。避免过于密集的停留点影响查阅轨迹的效果。最终精度大小取决于你的GPS坐标上报的频率和平均误差(偏移)。理论上GPS点约密集且误差在35米内,则自动优化不会触发。

自动优化原理

autoOptimize.png 图中圈圈表示为停留点范围。

  • 1、统计停留点之间互相进行比对。计算相距最近的停留点距离(红色部分)是否小于等于distanceThreshold(绿色部分);
  • 2、若相距较近的点数量占总停留点数的比例超过20%,则扩大distanceThreshold参数和stationaryEndPoints参数重新进行评估计算;
  • 3、最大评估autoOptimizeMaxCount次;
  • 4、性能:评估过程不会进行多余的网路操作,仅带来极小的CPU计算开销

二次开发与测试

// TODO

插件使用

安装

npm install gpspathtransfigure

引用

import GpsPathTransfigure from "gpspathtransfigure"

配置

|配置|类型|默认值|自动优化|备注| |--|--|--|--|--| |minComparisonPoints |Number| 10|| 最少比较的点数 | |distanceThresholdPercentage |Number| 70|| 距离阈值内的点的百分比 | |distanceThreshold |Number| 35|| 距离阈值,单位为 | |stationaryEndPoints |Number| 10|| 判断静止状态结束的连续点数 | |autoOptimize |Boolean| true|| 是否开启参数自动优化 | |autoOptimizeMaxCount |Number| 10||自动优化调整次数上限| |proximityStopThreshold|Number|35|| 近距离停留点距离阈值。此值通常要大于等于distanceThreshold| |proximityStopTimeInterval|Number|60||近距离停留点时间间隔阈值。单位分钟| |proximityStopMerge|Boolean|true|| 近距离停留点合并。建议默认开启| |smoothness|Boolean|true||是否开启停留点前后点位的轨迹补偿。你必须配置对应的地图密钥。否则无效。开启此项会额外消耗移动端流量,并且轨迹渲染速度也会降低| |smoothnessAvgThreshold|Number|1.6||轨迹补偿距离倍数阈值。点之间的距离超过平均值的这个倍数后,才会被捕捉到进行轨迹补偿| |smoothnessLimitAvgSpeed|Number|20||开启轨迹补偿的最高平均速度。轨迹平均速度必须低于此值才会启用轨迹补偿.单位是km/h| |aMapKey|String||| 配置高德地图可以调用路线规划的Web服务密钥。轨迹补偿时使用| |gMapKey|String||| 配置google地图密钥。轨迹补偿时使用| |defaultMapService|String||| 默认地图服务。枚举值【amap】【gmap】。配置后将会强制使用相应的地图服务。不配置,则默认语言是zh时使用amap。其它语言都使用googleMap| |format |Boolean| true||是否格式化数据内容。如里程、时间信息。若开启则根据locale配置输出对应国家语言的信息的内容| |locale |String| zh||设置语言| |timeformat|String|yyyy-MM-dd HH mm:ss||指定时间格式化方式| |mapWidth|Number|1024||地图容器的宽度。单位px。zoom计算时使用| |mapHeight|Number|768||地图容器的高度。单位px。zoom计算时使用| |defaultZoom|Number|16||默认地图缩放比。如果无法根据轨迹计算出缩放比,则使用此值| |pathColorOptimize|Boolean|true||是否开启轨迹颜色美化| |speedColors|Array| ["#3366FF", "#3369FF", "#336CFF", "#336FFF", "#3372FF", "#3375FF","#3399FF", "#33A3FF", "#33ADFF", "#33B7FF", "#33C1FF", "#33CCFF", "#66FF00", "#7FFF00", "#99FF00", "#B2FF00", "#CCFF00", "#E6FF00", "#FFCC00", "#FF9933", "#FF9966", "#FF6633", "#FF3300", "#FF0000"]||速度由慢到快的24级颜色代码| |samplePointsNum|Number|200||轨迹采样数。用于控制返回值samplePoints的长度。samplePoints用于渲染轨迹使用| |useUniApp|Boolean|false||此处如果为true,则代表使用uniapp环境,一些网络请求会以uniapp的方式进行调用|

使用案例(Vue3)

<script setup>
  import { onMounted } from "vue";
  import GpsPathTransfigure from "gpspathtransfigure"
......

onMounted(async ()=>{
    var gpsPoint =[
    ......
    {lon: 14.3908478, lat: 38.3038816, currentTime: '2024-06-27 01:43:36'},
    {lon: 114.3908478, lat: 38.3038816, currentTime: '2024-06-27 01:46:35'},
    {lon: 114.3906792, lat: 38.3037608, currentTime: '2024-06-27 01:47:50'},
    {lon: 114.3906634, lat: 38.3037528, currentTime: '2024-06-27 01:47:55'},
    ......
    ]

    GpsPathTransfigure.conf({
      locale:'zh',
      aMapKey:webApiKey,
      defaultMapService:'amap',
      openDebug:false,
      pathColorOptimize:true,
      samplePointsNum:300
    })

  const staticPoints = await GpsPathTransfigure.optimize(pathParam);
    const { finalPoints, stopPoints,trajectoryPoints, center, zoom ,segmentInfo,startPoint,endPoint,samplePoints} = staticPoints;

    ......
}
......
</script>

请注意,在使用此插件时需要异步引用。代码中直接使用finalPoints渲染轨迹即可。若想要渲染停留点标注效果,则渲染所有的stopPoints。渲染带颜色的轨迹请使用trajectoryPoints渲染。高德地图和Google地图的渲染案例请查阅Amap.vue/Gmap.vue源码

进度条使用方法

<template>
......
<ProgressChart :data="playPoints" :onMove="handleMove" :setPosition="playPosition" sliderImage="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAASBJREFUaEPtltENgkAQRO/q0H6oRNsQ29BK6EfrwGBi4gey9zIsCXH85bG3s7NyU8vOf3Xn/RcLOJ6HfhzLZXKy1nJ93Lp+yVXKRxsiOfDdzOegJRGUj5p/D60F+sUcTsM49+x572brUr6lt/8WQFeC8ukOTAfQPyXlIxHSCkXFt3huAVtMeekMO2AHxAnIK0Q/i5SP9EkC6MVE+ah5ZyEaziif7gBdCcqnC3AWahlxwEhfoRXOl0tYgDxCsYAdEAcovy47QLMN5SOFkgB6MVE+at5ZiGYbyqc7QFeC8ukCnIVaRuwstMKUMktI90BmY621LaB1Ulmc7ADNNpSPhEsC6MVE+ah5ZyGabSif7gBdCcqnC3AWahmxs9AKU8os8QK/SiBAyMIBIAAAAABJRU5ErkJggg==" />
......
</template>
<script setup>
import ProgressChart from 'gpspathtransfigure/src/component/ProgressChart.vue';

  //用于可播放的轨迹点
  let playPoints = []
  //播放位置。这里是轨迹点的下标。修改后可反响控制进度条进度
  let playPosition = ref(0)

  /**
   * 拖动进度条时的回调。
   * @param {*} index 轨迹下标
   */
  const handleMove = (index) => {
  //在这里处理回调。index是轨迹数据下标
  };

</script>

项目中Amap.vue有完整的使用案例

返回值说明

|返回值|含义| |--|--| |finalPoints|轨迹。格式[{lon: xx, lat: xx, currentTime: xx}],若坐标点中出现type: 'add'则代表此点是噪点轨迹补偿处理时的补点| |stopPoints|停留点。格式[{lon: xx, lat: xx, currentTime: xx}]| |trajectoryPoints|颜色渲染后的轨迹信息| |center|中心点。格式{lon: xx, lat: xx, currentTime: xx}| |zoom|缩放比| |segmentInfo|分段信息| |startPoint|开始点| |endPoint|结束点| |samplePoints|轨迹抽样数据(固定数量)| |avgSpeed|平均速度(去掉最小值和最大值)| |totalMileage|总里程|

问题交流反馈或issues

QQ:914245697