一次数据可视化的实践:台风预警系统2018/09

九月份比较火的新闻就是山竹来袭，所以花了十几天时间做了一个台风预警系统，这个软件需要解决的问题有三个:第一是地图的绘制,第二是台风路径的实时跟踪与预警,第三是海上低压气旋的引力模拟,由于1500块的笔记本配置实在太渣,无法同时完成海量的计算,所以我就把这三个问题抽象成了三个独立的程序:字符点亮中国、台风预警系统和黑洞引力模拟器,然后用vue-router和vuex连接起来,就成了一个单页面程序。

预览地址：台风预警系统
下载地址：台风预警系统

技术栈：vue + vuex + vue-router + iview + webpack + async/await + canvas + less+ flex + echarts

一、地图绘制问题
主要是使用json数据拼凑的方法在echarts中生成定制地图，这个例子中使用字符点亮中国来模拟，思路是先绘出地图轮廓，然后再用字符把轮廓填充满

字符点亮中国

点击刷新，字符的内容、颜色和位置发生随机变化

二、台风预警系统
之前解决了地图绘制问题，此处使用json数据拼凑出两广地图。当点击生成台风时，启动异步函数以模拟时间流逝，同时为台风赋予速度与加速度，并根据台风等级与城市距离，实时计算每个城市的预警状态，而真实的台风等级是与海上低气压气旋密切相关的，我们在第三个模型中将予以解决。

初始状态下程序会绘出两广地区的地图

点击生成台风

一个随机强度的台风会出现在东海或者南海,各城市根据台风强度和位置启动预警,同时系统开始计时,每隔两秒度过一天

台风在海上受低压影响而不断增强，登陆之后，因摩擦而不断减弱，减弱到6级以下时消亡，台风警报解除

台风预警的逻辑图

三、黑洞引力模拟器
在海面上，受季风洋流影响形成气压差，从而形成气旋，通过计算等压线的方法可以计算出气旋形状，这里我们采用引力线的方式来模拟等压线，原理都是一样的，为了cpu的健康考虑，我采取的是julia分形算法，这样在缩放，拖拽和漫游时不至于出现卡顿现象。

初始值为（0,0）

此时出现了曼德博特分形，可以认为曼德博特为julia的一个特殊解，这里不同的颜色代表不同的引力等高线，黑色为引力黑洞，

点击随机黑洞按钮，出现不同形状的分形

逃逸极值代表递归次数，数值越大，图案越复杂，同时cpu负担越重

鼠标滚轮放大缩小

理论上，可以无穷的放大，不会有一幅图案重复

不断放大

不断放大，图形将从新绘制

不断放大

期间遇上比较棘手的问题主要是
一、子组件中props和v-model的双向绑定问题，由于props是只读的，要通过在子组件中watch监视props，将更改的值与v-model建立联系来解决绑定问题

二、组件中v-model和vuex中state的双向绑定问题，要通过computed计算从新定义v-model的get和set值来解决，在set中进行commit和dispatch操作，参见header>VAbout中的computed项

三、iview默认样式的修改方法,是使用不带scope的style来完成，参考header>VLogin中的style项

四、async中的await实际上是生成了一个异步函数链，普通判断无法截获链中的回调消息，只有通过try-catch才能正确返回，参考fractal>VFractal中的animateGoOn函数和sleep函数

五、数据与组件剥离时，由于对路径要进行运算，同时要保证路径为静态以适应webpack的图片兼容，此处不应使用json而是使用js，参考pageData.js、另外Validate中判断数字的问题是一个坑点，由于iview的input默认为text，不提供数字型的type，必须编写函数进行强制转换来判断，参考fractal>ruleInline.js

六、在分形计算中最好手工编写缓存，实现计算集和显示组件分离，极大的解决了延迟和掉帧现象，我赛扬的cpu，绘出的图形，甚至可以在缩放，拖拽和漫游时实现实时刷新，参见fractal>VFractal中的initData函数和canvasCtl.js中的initData函数

七、即使没有用到，echarts的数据项也要设置默认的name和value值，否则会报错，这是echarts的坑点，参考fontChina>chinaTag.js

八、iview中当Submenu和MenuItem权重相同时，判断当前的展开值并触发事件和反向事件,由于iview也于此封装了大量状态和方法，所以面对多重嵌套时，判断逻辑会极其复杂，参见VSide中的tapMenu函数和card>VSubSide中的watch,建议把Submenu和MenuItem各自设置权重，问题可迎刃而解，但由于此方法十分不便，这也是我抛弃iview转而使用element的主要原因