arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）

前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

本篇主要讲述的是利用 arcgis api 3.x 实现风向流动图，效果图如下：

实现思路

在esri提供的开源github基础上进行修改的

修改之处

• esri 的效果是缩放地图时候，粒子数是不变的，即是不会随着地图的缩放而变动，导致地图放大的时候，效果很不好，看不出来风向流动的效果；修改为粒子数是根据地图当前范围 extent 而动态改变的。
• 修改 windy.js 文件的风向流动颜色带，esri 默认分级颜色，我这里统一一种颜色
• 修改 windy.js 文件部分因子值的设置，修改后如下

var VELOCITY_SCALE = 0.011;             // scale for wind velocity (completely arbitrary--this value looks nice)
  //MAX_WIND_INTENSITY 和 INTENSITY_SCALE_STEP用于计算设置各区间段的风速颜色，MAX_WIND_INTENSITY表示用于计算的风速最大值
  //统一白色后参数无效
  var INTENSITY_SCALE_STEP = 10;            // step size of particle intensity color scale
  var MAX_WIND_INTENSITY = 40;              // 40 wind velocity at which particle intensity is maximum (m/s)
  //用于控制离子的生命
  var MAX_PARTICLE_AGE = 100;                // 100  max number of frames a particle is drawn before regeneration
  //用于控制离子的宽度
  var PARTICLE_LINE_WIDTH = 2.3;              // line width of a drawn particle
  //用于控制粒子的密度，PARTICLE_MULTIPLIER值越大则粒子密度越大
  var PARTICLE_MULTIPLIER = 0.005;              // 1/30 particle count scalar (completely arbitrary--this values looks nice)
  //用于移动端减少粒子因子
  var PARTICLE_REDUCTION = 0.75;            // reduce particle count to this much of normal for mobile devices
  //用于控制地图放大缩小粒子个数
  var PARTICLE_FACTOR = 1;
  //用于控制帧的频率，越大，频率越快
  var FRAME_RATE = 30;                      // desired milliseconds per frame
  var BOUNDARY = 0.45;
  var NULL_WIND_VECTOR = [NaN, NaN, null];  // singleton for no wind in the form: [u, v, magnitude]
  var TRANSPARENT_BLACK = [255, 0, 0, 0];

源码分享

demo源码下载

标签：PARTICLE,particle,js,arcgis,INTENSITY,api,var,源码,esri
来源： https://blog.csdn.net/liguoweioo/article/details/122296983