zoukankan      html  css  js  c++  java
  • 利用javascript实现二维数组的筛选

      背景:

    在项目中,我需要对解析后的nc文件数据进行筛选,选出符合要求的点,绘制相应的polygon。

    代码:ajax获取某一时刻的数据

    var url ="/api/config/PostCoordinates/"+times+"/0";
    $.ajax({
    type:"GET",
    url:url,
    success:function(data){
    //画polygon
    createPolygon(data);
    },
    error:function(data){
    console.log(data);
    }
    });

    绘制polygon的方法,数据解析完成后,发现数据的是有规则的,每一行的维度都是一样的,那么为了筛选出边界点,我需要将维度不一样的第一个点拿到,并将其push到数组中。同时,在实际的效果中,我发现生成的polygon并不是我想要的。这样我发现利用arcgis绘制polygon的过程是按照点的添加顺序来绘制的,因而我不能只接将符合要求的点push到数组中,我还需要做进一步的操作,将同一行的最后一个点的数据放在另一个数组中,并倒叙取出,再push到最终的数组中。代码如下:

    //画polygon
    function createPolygon(data){

    //设置polygon的颜色填充
    var polySymbolRed = new esri.symbol.SimpleFillSymbol(
    esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new Color([0, 0, 0, 0]),3),
    new Color([255, 106, 106,0.3])
    );


    var polygon = new Polygon(new SpatialReference({wkid:4326}));

    //定义数组
    var ring = new Array();var pts,pts2;
    var result = new Array();
    for(var i=0;i<data.length-1;i++){

    //数据点的第一个和最后一个点push到数组中
    if(i==0||i==data.length-1){
    pts = new Point(data[i].winddir,data[i].windspeed,sr);
    ring.push(pts);
    }

    //将维度不一样的第一个点,和前一个点push到不同的数组中
    if(data[i].windspeed!=data[i+1].windspeed){
    pts2 = new Point(data[i+1].winddir,data[i+1].windspeed,sr);
    ring.push(pts2);
    pts = new Point(data[i].winddir,data[i].windspeed,sr);
    result.push(pts);
    }
    }

    //倒叙取出同一行的最后一个点的数据
    for(var j=result.length-1;j>0;j--){
    console.log("result is "+result[j]);
    ring.push(result[j]);
    }
    //绘制polygon
    polygon.addRing(ring);
    var gra = new esri.Graphic(polygon,polySymbolRed);
    map.graphics.add(gra);
    }

    部分数据如下,windspeed是维度,winddir为经度,数组长度580:

    最终的效果如下,粉红色的部分就是从nc文件中解析出来的数据绘制的polygon:

  • 相关阅读:
    开发工具 编程风格
    WinServer2003 Computer Browser服务每隔一段时间自动关闭问题解决方法
    VSS 无法与服务器建立连接 以及与服务器断开连接
    VSS 部署
    db2 服务器启动项目
    Sublime Text 2 编辑器实用技巧
    WdatePicker日历控件使用方法
    02.微博账号注册
    01.微博三方登录原理讲解
    3.celery发送短信接口
  • 原文地址:https://www.cnblogs.com/Allen-node/p/5443635.html
Copyright © 2011-2022 走看看