arcgis for js 3.x 绘制海流

秒速五厘米 2023-02-18 11:51 9阅读 0赞

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

绘制思路：

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

其中，

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]

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

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

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

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

参考文章：  
[制作风或水流速流向图][Link 1]  
[arcgis for js 3.X利用symbol设置svgpath绘制符号][arcgis for js 3.X_symbol_svgpath]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617164427200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061717204945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200617175431890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[Link 1]: http://blog.sciencenet.cn/blog-916405-746913.html
[arcgis for js 3.X_symbol_svgpath]: https://leftfist.blog.csdn.net/article/details/106437160