需求：

有时候当移动速度很慢，GPS定位的轨迹点就非常的多，这时候为了缩减数据量，需要将不突出的点去掉。

思路：

(1) 在曲线首尾两点间虚连一条直线,求出其余各点到该直线的距离。

（2）选其最大者与阈值相比较,若大于阈值,则离该直线距离最大的点保留,否则将直线两端点间各点全部舍去。
（3）依据所保留的点,将已知曲线分成两部分处理,重复第1、2步操作，迭代操作，即仍选距离最大者与阈值比较,依次取舍,直到无点可舍去，最后得到满足给定精度限差的曲线点坐标

这里使用道格拉斯-普克算法实现，易于理解。效果对比图如下：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <title>DouglasPeucker</title>

</head>

<body>

   <canvas id="drawing" style="height:300px;width:100%"></canvas>

    <canvas id="drawing2" style="height:300px;width:100%"></canvas>

</body>

<script type="text/javascript" >

    var points1=[];

    var pointsshao=[];

    var pts=[];

    var hval=30;//阈值

    //随机生成1000个点

    for(var i=0;i<1000;i++){

    var  oldx=i*10,oldy=Math.random()*150;

      points1.push([oldx,oldy,i]);

    }

    //求斜率

    function xielv(pt1,pt2)

    {

      var k,b;

      var canshu={};

      canshu.k=(pt1[1]-pt2[1])/(pt1[0]-pt2[0]);

      canshu.b=pt1[1]-canshu.k*pt1[0];

      return canshu;

    }

    //求点到直线的距离

    function distanceToline(pt,cs){

       return (Math.abs(cs.k*pt[0]-pt[1]+cs.b))/Math.sqrt(cs.k*cs.k+1);

    }

    //开始计算(道格拉斯普克算法)

    pts.push(points1[0]);

    countPoint(points1);

    pts.push(points1[points1.length-1]);

    //排序

    function sort(pts){

      for(var i=0;i<pts.length-1;i++)

      {

         var a=pts[i];

         var b=pts[i+1];

         if(b[2]>a[2]){

         pts[i]=b;

         pts[i+1]=a;

         for(var j=i;j>0;j--)

         {

             var c=pts[j-1];

             if(b[2]>c[2]){

               pts[j-1]=b;

               pts[j]=c;

             }

         }

         }

      }

    }

  //对坐标点进行取舍

 function countPoint(points){

       var maxD=0;

       var maxPoint=null;

       var maxindex=0;

       //大于2个点才开始计算

       if(points.length>2){

             var pt1=points[0];

           var pt2=points[points.length-1];

           var cs=xielv(pt1,pt2);

           for(var i=0;i<points.length;i++){

             var pt=points[i];

             var dis=distanceToline(pt,cs);

            //判断该线段中是否有点到由该线段端点组成的直线的距离大于限值

             if(dis>maxD)

             {

               maxD=dis;

               maxPoint=pt;

               maxindex=i;

             }

           }

               if(maxD>hval) //如果最大值就从该点位置将线段进行切分

             {

                 var pts1=points.slice(maxindex);//中分末尾数组

                 var pts2=points.slice(0,maxindex+1);//中分前面数组

                if(pts1.length>2 && pts2.length>2)

                {

                 if(!countPoint(pts1) && !countPoint(pts2)){  //如果两个线段都没有超过限制就结束计算

                   pts.push(maxPoint);

                 }

                }else if(pts1.length>2 && pts2.length<=2){ //计算pts1

                    if(!countPoint(pts1))pts.push(maxPoint);

                }else if(pts1.length<=2 && pts2.length>2){ //计算pts2

                   if(! countPoint(pts2))pts.push(maxPoint);

                }

             } return false;

       }

     }

    //由大到小

    sort(pts);

    drawWay("drawing2",pts);

    drawWay("drawing",points1)
    //绘制曲线

    function drawWay(name,points){

      var drawing=document.getElementById(name);

      if(drawing.getContext){

        var context=drawing.getContext("2d");

        context.beginPath();

        var oldx=points[0][0];

        var oldy=points[0][1];

        for(var i=0;i<points.length;i++){

          var p=points[i];

          context.moveTo(oldx,oldy);

          oldx=p[0];

          oldy=p[1];

          context.lineTo(oldx,oldy);

       }

       context.closePath();

       context.stroke();

    }

}

</script>

道格拉斯-普克算法（JavaScript实现）的更多相关文章

  1. OpenCV 学习笔记03 凸包convexHull、道格拉斯-普克算法Douglas-Peucker algorithm、approxPloyDP 函数

    凸形状内部的任意两点的连线都应该在形状里面. 1 道格拉斯-普克算法 Douglas-Peucker algorithm 这个算法在其他文章中讲述的非常详细,此处就详细撰述. 下图是引用维基百科的.ε ...

  2. GIS矢量数据化简：一种改进的道格拉斯-普克算法以及C++实现

    GIS领域的同志都知道,传统的道格拉斯-普克算法都是递归实现.然而有时候递归的层次太深的话会出现栈溢出的情况.在此,介绍一种非递归的算法. 要将递归算法改为非递归算法,一般情况下分为两种场景.第一种是 ...

  3. 道格拉斯—普克(Douglas一Peukcer)节点抽稀算法

    Douglas一Peukcer算法由D.Douglas和T.Peueker于1973年提出,简称D一P算法,是眼下公认的线状要素化简经典算法.现有的线化简算法中,有相当一部分都是在该算法基础上进行改进 ...

  4. .net中使用 道格拉斯-普特 抽希轨迹点

    Douglas一Peukcer算法由D.Douglas和T.Peueker于1973年提出,简称D一P算法,是目前公认的线状要素化简经典算法.现有的线化简算法中,有相当一部分都是在该算法基础上进行改进 ...

  5. 数据结构与算法JavaScript (一) 栈

    序 数据结构与算法JavaScript这本书算是讲解得比较浅显的,优点就是用javascript语言把常用的数据结构给描述了下,书中很多例子来源于常见的一些面试题目,算是与时俱进,业余看了下就顺便记录 ...

  6. 《数据结构与算法JavaScript描述》

    <数据结构与算法JavaScript描述> 基本信息 作者: (美)Michael McMillan 译者: 王群锋 杜欢 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:9 ...

  7. 翻阅《数据结构与算法javascript描述》--数组篇

    导读: 这篇文章比较长,介绍了数组常见的操作方法以及一些注意事项,最后还有几道经典的练习题(面试题). 数组的定义: JavaScript 中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性 ...

  8. 数据结构与算法javascript描述

    <数据结构与算法javascript描述>--数组篇 导读: 这篇文章比较长,介绍了数组常见的操作方法以及一些注意事项,最后还有几道经典的练习题(面试题). 数组的定义: JavaScri ...

  9. 列表的实现-----数据结构与算法JavaScript描述 第三章

    实现一个列表 script var booklist = new List(); booklist.append('jsbook'); booklist.append('cssbook'); book ...

随机推荐

  1. 阿里云ECS服务器活动99元一年，最高可买三年

    这几天阿里云 99一年.279三年的服务器活动如火如荼,和之前腾讯三年的服务器非常类似,非常低的价格换取非常高的价值,当然,通常情况下便宜没好货的,想要玩一下的老铁可以进阿里云去看看,阿里云270三年 ...

  2. git查看当前分支所属

    1.git branch -vv 2.git config --lis

  3. H3C PPP会话建立过程

  4. P1061 最长连号

    题目描述 输入n个正整数,(1<=n<=10000),要求输出最长的连号的长度.(连号指从小到大连续自然数) 输入格式 第一行,一个数n; 第二行,n个正整数,之间用空格隔开. 输出格式 ...

  5. jQuery验证码发送时间秒递减（刷新存储cookie）

    <input id="sendEmail" type="button" name="sendEmail" onclick=" ...

  6. js简单实现promise

    function myPromise(fn){ let status='pending',successCallback=[],failedCallback=[],data=null,reason=n ...

  7. 轮播图模块（vue）

    轮播图模块(vue) 通过属性方式传值 值为一个数组.每一项含有imgUrl(图片地址).link(跳转链接),link为可选属性 <template> <div class=&qu ...

  8. attr(),prop()二者区别和最佳实践

    attr(),prop()二者区别和最佳实践 最近使用到attr()来获取自定义属性值,我印象中是有一个方法可以获取到自定义属性值,进而我又想到了另一个方法prop().  查看了手册发现并没有对二者 ...

  9. 一目了然 | 数据库实例性能调优利器：Performance Insights

    Performance Insights是什么 阿里云RDS Performance Insights是RDS CloudDBA产品一项专注于用户数据库实例性能调优.负载监控和关联分析的利器,以简单直 ...

  10. POJ 2976 Dropping tests [二分]

    1.题意:同poj3111,给出一组N个有价值a,重量b的物品,问去除K个之后,剩下的物品的平均值最大能取到多少? 2.分析:二分平均值,注意是去除K个,也就是选取N-K个 3.代码: # inclu ...