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

最新推荐文章于 2022-07-26 16:54:08 发布

原创最新推荐文章于 2022-07-26 16:54:08 发布 · 940 阅读

0 ·

CC 4.0 BY-SA版权

arcgis api for js 专栏收录该内容

8 篇文章

订阅专栏

该博客介绍如何根据点数据来创建并显示具有方向的线条。内容涉及到条件判断，当点被选中时，显示线条及其方向；反之，如果未选中，则清除线条，确保箭头和线可以同步消除和添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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} 船艏向: ${BEARING}度 航速: ${SPEED}节 " +
"<a href='javascript:void (0)' onclick='clickEquip_32()'>走航SBE21</a>"+
"<a href='javascript:void (0)' onclick='spsGPS()'style='margin-left: 50px' >Location GPS</a> "+
"<a href='javascript:void (0)' onclick='ekFish()'>EK60鱼探仪</a>"+
"<a href='javascript:void (0)' onclick='autoWeather()'style='margin-left: 45px' >自动气象观测站</a> "+
"<a href='javascript:void (0)' onclick='seaSpaceSys()'>seaSpace系统</a> "+
"<a href='javascript:void (0)' onclick='twoFre()'style='margin-left: 25px' >EA600型测深仪</a> "+
"<a href='javascript:void (0)' onclick='ADCPSys()'>船载ADCP系统</a>"+
"<a href='javascript:void (0)' onclick='temSaDepth()'style='margin-left: 30px' >seabird温盐深</a> " );
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();
}