arcgis api for js入门开发系列十八风向流动图

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

实现思路：

在esri提供的开源githunb基础上进行修改的：https://github.com/gishome/wind-js

修改之处：

1.esri的效果是缩放地图时候，粒子数是不变的，即是不会随着地图的缩放而变动，导致地图放大的时候，效果很不好，看不出来风向流动的效果；修改为粒子数是根据地图当前范围extent而动态改变的。

2.修改windy.js文件的风向流动颜色带，esri默认分级颜色，我这里统一一种颜色；

3.修改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 scalevar 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 framevar 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];

arcgis api for js入门开发系列十八风向流动图相关推荐

arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
arcgis api for js入门开发系列十七在线地图（天地图、百度地图、高德地图）
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
arcgis api for js入门开发系列十二地图打印（GP服务）
上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
arcgis api for js共享干货系列之一自写算法实现地图量算工具
众所周知,使用arcgis api for js实现地图的量算工具功能,无非是调用arcgisserver的Geometry服务(http://localhost:6080/arcgis/rest/s ...
arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

arcgis api for js入门开发系列十八风向流动图

arcgis api for js入门开发系列十八风向流动图相关推荐

最新文章

热门文章