制作一个疫情地图(html+node)

最终代码在这里可以找到

https://github.com/SunIBAS/kaoyan/blob/master/bilibili_coding/boring/illMap.md

  1. 用到的技术

    html+css+js:做一个前端页面

    node:赋值爬取网页,为什么不用 python,我不会 python

  2. 用到的第三方支持

    阿里的地图选择器:http://datav.aliyun.com/tools/atlas,可以提供一个地图边界

    leaflet:https://leafletjs.com/examples.html,可以做一个可视化地图

    request:一个 node 的库,负责获取网页内容

  3. 爬取网页

    1、爬取百度的全国疫情地图 https://voice.baidu.com/act/newpneumonia/newpneumonia,看到网页中的数字是可以被直接选取的,说明这个数字是从某一个位置获取来的,不是直接渲染成图片的。

    可以直接在 network 中ctrl+f 直接搜一个特殊的数字,看来源,我发现是页面本身。

    页面本身代码通过在网页上直接右键查看源码可得,也可以在开发者工具中的source中获得,记得不是 Elements,Elements 是经过渲染的结果和源码不一样。通过源码搜索可以得到数字来源,如下图。

在源码中搜索特定的数字可以确定位置

可以发现1423是出现在 141 行,其实接下来就是分析一下怎么锁定这一行以及里面的内容,因为他没做反爬,所以分析起来也很简单。

1)首先我发现这个代码中只有两处出现 require.config ,而141恰好出现一次,且和另一处区别是这一行很长,另一处极短,用以下代码直接拿到这一行内容。

o=res.body.split(/[\r\n]+/).filter(_ => _.indexOf('require.config') + 1).filter(_ => _.length > 100);

2)接下来,单独看这一行的信息怎么拿出来。其实还是很简单,这一回从 require.config 开始,是一个 对象,直接挖出来即可,然后因为我是在 node 中执行,可以直接如下

           eval('out = {"page":' + o[0].split('{"page":')[1].split('V.bsData')[0]);

然后拿到对象后直接看一下这个对象的样子,然后将数据转存出来就完成了。

2、爬取广东疫情的比较复杂(麻烦)

1)首先要去 http://wsjkw.gd.gov.cn/zwyw_yqxx/ 获取一个列表,依旧利用源码分析

2)可以将title中带疫情情况的直接拿出来,然后取第一条,因为这是最新消息(这个比百度容易多了)。

3)请求刚刚获取的这个网页,依旧源码分析,但是这次很简单了,只要将【XXnn例】的字样提取出来,然后将相同地区数字最大的部分保存出来就可以了。

4.最后是将所有信息在一个页面中展现出来,呃,太懒,我就不写了,哈哈哈。

本文为我原创

本文禁止转载或摘编

-- --
  • 投诉或建议
评论