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

459人阅读 评论(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",
function (Map, Color,
GraphicsLayer, Graphic,
InfoTemplate,
Point,
Polyline, Polygon, DirectionalLineSymbol,
SpatialReference,
ArcGISTiledMapServiceLayer,
SimpleMarkerSymbol, PictureMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol,
Draw, Print, config, request,
arrayUtils,

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

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 mapMaxScale=map.getMaxScale();
var mapMinScale=map.getMinScale();
var graphicsLayer = new GraphicsLayer({
minScale:mapMinScale,
maxScale:mapMaxScale
});

//最后一个点用船,闪烁显示
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);

/*最后一个点。点击弹窗*/
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='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);

});

if(index>-1){