arcgis for js 3.x 绘制海流

118 阅读 0 评论 78 点赞

我是靠谱客的博主繁荣蜜蜂，这篇文章主要介绍arcgis for js 3.x 绘制海流，现在分享给大家，希望可以做个参考。

如图所示
在这里插入图片描述
箭头方向代表海流方向，箭头大小代表流速大小。其中海流方向以正北方向为0度，顺时针起算。但如果是风场就不一样。风的方向与我们的普遍认知刚好相反，箭头指向来风的方向。想想也有道理，我们常说喝西北风，是吹向西北方向的风还是从大西北刮过来的风？当然是从大西北过来的啊。每当我们肚子饿得受不了的时候，就可以跑到外面，迎着西北方向张大嘴巴可矣。有分教：
在这里插入图片描述
言归正传，本文例子，根据雷达测量的海流数据绘制，数据包括经纬度、流向、流速4个数值。

绘制思路：

复制代码

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

其中，

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var _sr4326 = new SpatialReference({wkid: 4326 });
//最后的0.0代表完全透明;
//不清楚如何去掉填充色，只好用透明处理
var _cbg = new Color([255, 255, 255, 0.0]);
var _cbd = new Color([0, 0, 0, 1]);
function arrow(target){
	/*
	 * target数据结构。一个target代表一个点
	 * lng
	 * lat
	 * speed
	 * deg
	 */
	var d = getDirection(target.deg);//方向
	var s = getSize(target.speed);//箭头大小由速度决定
	var symbol = 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 = new Point(target.lng, target.lat,_sr4326);
	var g = new Graphic(point, symbol);
	setTip(target,g);
	return g;
}
function setTip(t,g){//气泡
	var st = "";
	for (var a in t) {
	  g.attr(a, t[a]);//设置属性
	  st += a + ": " + t[a] + "<br/>";
	}
	g.infoTemplate = new InfoTemplate("信息", st);
}

在这里插入图片描述

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

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
function getSize(speed){
	/*
		speed，速度，米/秒，值通常在 0.6 ~ 0.01 之间
		用此值 * 10 后向上取整，例如5.* --> 6
	 */
	var level = Math.ceil(speed * 10);
	return level * 2 + 4;
}