关闭

根据点数据,绘制具有方向的线

383人阅读 评论(0) 收藏 举报
分类:

    require([
            "esri/map", "esri/Color",
            "esri/layers/GraphicsLayer", "esri/graphic",
            "esri/InfoTemplate",
            "esri/geometry/Point",
            "esri/geometry/Polyline", "esri/geometry/Polygon", "ncam/DirectionalLineSymbol",
            "esri/SpatialReference",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
            "esri/toolbars/draw", "esri/dijit/Print", "esri/config", "esri/request",
            "dojo/_base/array",
            "dojo/ready", "dojo/dom", "dojo/on"],
        function (Map, Color,
                  GraphicsLayer, Graphic,
                  InfoTemplate,
                  Point,
                  Polyline, Polygon, DirectionalLineSymbol,
                  SpatialReference,
                  ArcGISTiledMapServiceLayer,
                  SimpleMarkerSymbol, PictureMarkerSymbol,
                  SimpleLineSymbol, SimpleFillSymbol,
                  Draw, Print, config, request,
                  arrayUtils,
                  ready, dom, on) {

            /*航迹线中的箭头*/
            var picSymbol = new PictureMarkerSymbol();
            picSymbol.setUrl("ncam/filled-arrow.png");
            picSymbol.setHeight(12);
            picSymbol.setWidth(12);
            /*航迹线的颜色,及样式*/
            var advOptions = {
                style: SimpleLineSymbol.STYLE_SOLID,
                color: new Color([0,255,255]),          /*线的颜色*/
                width: 2,
                directionSymbol: "arrow2",
                directionPixelBuffer: 40,
                directionColor: new Color([252,218 ,252]),
                directionSize: 16
            };
            var advSymbol = new DirectionalLineSymbol(advOptions);




            Proj4js.defs["ESRI:102021"]="+proj=stere +lat_0=-90 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs";
            /*原始点坐标*/
            var source = new Proj4js.Proj("EPSG:4326");
            /*点投影的目标坐标*/
            var dest = new Proj4js.Proj("ESRI:102021");
            /* 获取的数据,转换成我要的ponit格式,再投影转换*/
            var trackDataInfo = {};


            trackDataInfo.data = arrayUtils.map(trackData, function(p) {
                /*点坐标格式转换*/
                var pointX=parseFloat(p.LONGITUDE);
                var pointY=parseFloat(p.LATITUDE);
                var dataTime= p.UTC;  //获取时间UTC
                var BEARING= p.BEARING;
                var SPEED= p.SPEED;
                var T_LOG= p.T_LOG;


                var myPoint = new Proj4js.Point(pointX,pointY);
                /* 转换后,point 和afePro 一样了*/
                var afePro=Proj4js.transform(source, dest, myPoint);


                var pointAttr={
                    "x": afePro.x,
                    "y": afePro.y,
                    "dataTime":dataTime,
                    "BEARING": BEARING,
                    "SPEED": SPEED,
                    "T_LOG": T_LOG,
                    "spatialReference": {"wkid": 102021 }


                };
                return {
                    "point": pointAttr
                };
            });
            /*转换数据为我需要的json格式,用以化路径*/
            var len=trackDataInfo.data.length;
            //polyLineJson是为了画线的
            var polylineJson = {
                "paths":[[]],
                "attr":[[]],
                "spatialReference":{"wkid":102021}
            };
            /*从数据库中获取的数据添加到ploylineJson里*/
            arrayUtils.forEach(trackDataInfo.data, function(p) {
                var pl=[p.point.x,p.point.y];
                polylineJson.paths[0].push(pl);
                var a=[p.point.dataTime,p.point.BEARING,p.point.SPEED,p.point.T_LOG];
                polylineJson.attr[0].push(a);
            });
            var advPolyline = new Polyline(polylineJson);


            var ag = new Graphic(advPolyline, advSymbol, {}, null);
            var mapMaxScale=map.getMaxScale();
            var mapMinScale=map.getMinScale();
            var graphicsLayer = new GraphicsLayer({
                minScale:mapMinScale,
                maxScale:mapMaxScale
            });
            map.addLayer(graphicsLayer);
            graphicsLayer.add(ag);


          //最后一个点用船,闪烁显示
            var ship =  new PictureMarkerSymbol({
                "url":"/img/ship.png",
                "height":30,
                "width":30,
                "xoffset": 0,
                "yoffset": 0
            });
            /*最后一个点叠加到地图上*/
            var shipPoint=polylineJson.paths[0][polylineJson.paths[0].length-1];
            var shipGraphic = new Graphic(new Point(shipPoint), ship);
            graphicsLayer.add(shipGraphic);


            /*最后一个点。点击弹窗*/
            var shipX=shipPoint[0];    //找到最后一点的x数据中对应点的x值
            var shipY=shipPoint[1];    //找到最后一点的y值


            var lastAttr=trackData[trackData.length-1];
            var shipAttr = {"dataTime": lastAttr.UTC,"BEARING":  lastAttr.BEARING,
                "SPEED": lastAttr.SPEED};
            var shipInfoTemplate = new InfoTemplate("数据","时间: ${dataTime}<br/>船艏向: ${BEARING}度<br/>航速: ${SPEED}节<br/>" +
                "<a href='javascript:void (0)' onclick='clickEquip_32()'>走航SBE21</a>"+
                "<a href='javascript:void (0)' onclick='spsGPS()'style='margin-left: 50px' >Location GPS</a><br/>"+
                "<a href='javascript:void (0)' onclick='ekFish()'>EK60鱼探仪</a>"+
                "<a href='javascript:void (0)' onclick='autoWeather()'style='margin-left: 45px' >自动气象观测站</a><br/>"+
                "<a href='javascript:void (0)' onclick='seaSpaceSys()'>seaSpace系统</a> "+
                "<a href='javascript:void (0)' onclick='twoFre()'style='margin-left: 25px' >EA600型测深仪</a><br/>"+
                "<a href='javascript:void (0)' onclick='ADCPSys()'>船载ADCP系统</a>"+
                "<a href='javascript:void (0)' onclick='temSaDepth()'style='margin-left: 30px' >seabird温盐深</a><br/>" );
            shipGraphic.setAttributes(shipAttr);
            shipGraphic.setInfoTemplate(shipInfoTemplate);
          /*封装,以便后用*/
            var trackObj={
                "trackId":trackId,
                "graphic":ag,
                "endGraphic":shipGraphic,
                "direcLine":graphicsLayer
            };
            realTrack.push(trackObj);
   

        });


判断有没有被选中,如果以前有选中,就展示出来,没有就clear,这样就不会导致,箭头和线 不能同时消除和添加

  if(index>-1){
            realTrack[index].direcLine.add(realTrack[index].graphic);
            realTrack[index].direcLine.add(realTrack[index].endGraphic);       

        }else{
        if(index>-1){
            realTrack[index].direcLine.clear();
        }

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:60858次
    • 积分:1172
    • 等级:
    • 排名:千里之外
    • 原创:59篇
    • 转载:2篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论