前言

关于本篇功能实现用到的 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 文件部分因子值的设置，修改后如下

更多的详情见：GIS之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）的更多相关文章

  1. arcgis api 3.x for js 入门开发系列十叠加 SHP 图层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. arcgis api 3.x for js 入门开发系列十六迁徙流动图

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. openlayers4 入门开发系列结合 echarts4 实现散点图（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. arcgis api for js入门开发系列十六迁徙流动图

    最近公司有个arcgis api for js的项目,需要用到百度echarts迁徙图效果,而百度那个效果实现是结合百度地图的,怎么才能跟arcgis api结合呢,网上搜索,终于在github找到了 ...

  6. arcgis api 3.x for js 入门开发系列十五台风轨迹

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列十四最近设施点路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 热力图优化篇-不依赖地图服务（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. openlayers4 入门开发系列之地图展示篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

随机推荐

  1. javascript入门篇（六、正则表达式）

    JavaScript 正则表达式 正则表达式是由一个字符序列形成的搜索模式.当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容. 正则表达式可以是一个简单的字符,或一个更复杂的模式.正则表达 ...

  2. ajax调用WebAPI添加数据

    //获取账号名 var Name = document.getElementById("Text1").value;//获取密码 var Pass = document.getEl ...

  3. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第一天

    文章大纲 一.课程介绍二.淘淘商城基本介绍三.后台管理系统工程结构与搭建四.svn代码管理五.项目源码与资料下载六.参考文章   一.课程介绍 1. 课程大纲 一共14天课程(1)第一天:电商行业的背 ...

  4. 从On-Premise本地到On-Cloud云上运维的演进

    摘要: 从用户的声音中,我们听到用户对稳定.弹性.透明的诉求,我们也在不断升级ECS的运维能力和体验,助力用户建立主动运维体系,赋能业务永续运行.为了让大家更好的了解和用好ECS弹性计算服务,从本期开 ...

  5. 使用Fiddler获取OAuth2认证的access token时候返回502

    微软动态CRM专家罗勇 ,回复322或者20190402可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 我这里Fiddler的Composer功能来获取OAuth2 认 ...

  6. canvas百分比加载动画

    window.onload = function(){ var canvas = document.getElementById('canvas'), //获取canvas元素 context = c ...

  7. Math类中round、ceil和floor方法的功能

    Java中的Math工具类用来完成除+.-.*./.%等基本运算以外的复杂运算,位于java.lang包下,Math类的构造器全是私有的(private),因此无法创建Math类的对象,Math类的方 ...

  8. PHP全栈学习笔记4

    php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...

  9. python --- 二分查找算法

    二分查找法:在我的理解中这个查找方法为什么会叫二分呢,我认为是将要查询的一个列表分成了两份,然后在利用某个值来进行比较,在一个不断循环的过程中来找出我们要找的某一个值. 废话不多说,先上代码: def ...

  10. Kubernetes 笔记 012 Pod 的自动扩容与缩容

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...