arcgisforjs3.x绘制海流

如图所示

箭头方向代表海流方向&＃xff0c;箭头大小代表流速大小。其中海流方向以正北方向为0度&＃xff0c;顺时针起算。但如果是风场就不一样。风的方向与我们的普遍认知刚好相反&＃xff0c;箭头指向来风的方向。想想也有道理&＃xff0c;我们常说喝西北风&＃xff0c;是吹向西北方向的风还是从大西北刮过来的风&＃xff1f;当然是从大西北过来的啊。每当我们肚子饿得受不了的时候&＃xff0c;就可以跑到外面&＃xff0c;迎着西北方向张大嘴巴可矣。有分教&＃xff1a;

言归正传&＃xff0c;本文例子&＃xff0c;根据雷达测量的海流数据绘制&＃xff0c;数据包括经纬度、流向、流速4个数值。

绘制思路&＃xff1a;

1、用SimpleMarkerSymbol 结合 svg path 绘制箭头
2、根据海流流向旋转箭头
3、根据海流流速设置箭头大小


其中&＃xff0c;

1、用SimpleMarkerSymbol 结合 svg path 绘制箭头

var _sr4326 &＃61; new SpatialReference({wkid: 4326 });
//最后的0.0代表完全透明;
//不清楚如何去掉填充色&＃xff0c;只好用透明处理
var _cbg &＃61; new Color([255, 255, 255, 0.0]);
var _cbd &＃61; new Color([0, 0, 0, 1]);
function arrow(target){/** target数据结构。一个target代表一个点* lng* lat* speed* deg*/var d &＃61; getDirection(target.deg);//方向var s &＃61; getSize(target.speed);//箭头大小由速度决定var symbol &＃61; new SimpleMarkerSymbol({"style": "esriSMSPath","color": _cbg,"angle": d, "size": s,"path": "M 10 40 l 23 -40 l 0 100 m 0 -100 l 23 40 z","outline": {style: "esriSLSSolid",color: _cbd,width: 2}});var point &＃61; new Point(target.lng, target.lat,_sr4326);var g &＃61; new Graphic(point, symbol);setTip(target,g);return g;
}
function setTip(t,g){//气泡var st &＃61; "";for (var a in t) {g.attr(a, t[a]);//设置属性st &＃43;&＃61; a &＃43; ": " &＃43; t[a] &＃43; "
";}g.infoTemplate &＃61; new InfoTemplate("信息", st);
}


2、根据海流流向旋转箭头

function getDirection(direction){
/*
这个原理&＃xff0c;我至今不是很明白。
也许SVG的以垂直向下为正向&＃xff0c;而海流惯用法以正北方向&＃xff0c;即垂直向上为正向&＃xff0c;故而相反吧
*/return (isNaN(direction) &＃61;&＃61; true) ? 0 : direction * -1;
}


3、根据海流流速设置箭头大小

function getSize(speed){/*speed&＃xff0c;速度&＃xff0c;米/秒&＃xff0c;值通常在 0.6 ~ 0.01 之间用此值 * 10 后向上取整&＃xff0c;例如5.* --> 6*/var level &＃61; Math.ceil(speed * 10);return level * 2 &＃43; 4;
}


参考文章&＃xff1a;
制作风或水流速流向图
arcgis for js 3.X利用symbol设置svgpath绘制符号