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

下载地址:

 

字符点亮中国：思路是先绘出地图轮廓，然后再用字符把轮廓填充满

图一，字符点亮中国

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

 

 

台风预警系统:

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

 

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

 

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

 

视频一,台风预警系统

图四，台风预警的逻辑图

 

图五，由于台风经常登陆的地区集中在几个城市，所以后续我准备加入一些机器学习的内容：根据城市的经济水平和受台风侵袭频率划分区域，繁华的沿海地区设立预警系统，贫穷的内陆地区则不断学习自己和哪些城市的情况相似，然后通过人工智能给出相应措施

 

 

黑洞引力模拟器：为了cpu的健康考虑，我采取的是julia分形算法，这样在缩放，拖拽和漫游时不至于出现卡顿现象。

 

图六：初始值为（0,0），出现的是曼德博特分形，不同的颜色代表不同的引力等高线，黑色为黑洞

 

 

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

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

 

图九，鼠标滚轮放大缩小

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

图十一，不断放大

图十二，不断放大

图十三，不断放大

 

视频三,不断放大漫游视频,左上为实时计算的fps数

 

图十四:最后,加上了注册登录功能,成为了一个完整的程序

 

 

期间遇上比较棘手的问题主要是

一、父子组件中props和v-modal的双向绑定问题，通过在子组件中watch监视props和v-modal来解决

二、组件中v-modal和vuex中state的双向绑定问题，通过computed计算v-modal的get和set值来解决，参见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值，否则会报错，参考fontChina>chinaTag.js

 

八、iview中当Submenu和MenuItem权重相同时，判断当前的展开值并触发事件和反向事件,由于iview也于此封装了大量状态和方法，所以面对海量数据，判断逻辑会极其复杂，参见VSide中的tapMenu函数和card>VSubSide中的watch,建议把Submenu和MenuItem各自设置权重，问题可迎刃而解

 

 

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

下载地址: