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 实现风向流动图,效果图如下:
arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)

实现思路

在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源码下载

上一篇:ArcEngine编辑模块——将线段按距离、按比例分割成N条线段


下一篇:Arcgis for javascript 发布本地服务并显示