中国历史地震分析，你的家乡发生过5级以上地震吗？

1.背景

         【四川九寨沟7.0级地震 最新消息】截至今天中午13时10分，地震已致19人死亡，247人受伤，其中40人重伤；【新疆精河6.6级地震 最新汇总】8月9日7时27分在新疆博尔塔拉州精河县境内发生6.6级地震，截至11时，地震共造成32人受伤（2人重伤），106间房屋受损。九寨沟、新疆地震，牵动千万人心，让我们一起为震区人民祈福！在悲痛之余我们也会想我们所在的地区历史上发送过较大的地震吗？我们所在的地区是地震高发区吗？

2.数据获取

        我从中国地震信息网http://www.csi.ac.cn/publish/main/813/2/index.html，获取了中国从公元前780年到现在有据可考的6444条5级以上的地震数据。对这些数据做了一些数据转换和存储，分别制作了历史地震展示、历史地震分布统计、历史地震热力图等。下面我把分析的结果展示给大家。

3.历史地震展示

      首先将处理好的数据存储在百度地图免费的LBS云上，具体的存储方案请查看百度地图API，这里不多叙述。存储的字段如下：

 

 

       将LBS云上的地理数据展示到地图上，并提供城市切换按钮来方便大家查看：访问连接：http://test.sharegis.cn/showeq.html，实现效果和代码如下：

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }
        .anchorBL {
            display: none;
        }
        #l-map {
            width: 100%;
            height: 630px;
            overflow: hidden;
        }

        #result {
            width: 100%;
        }

        li {
            line-height: 28px;
        }

        .cityList {
            height: 320px;
            width: 372px;
            overflow-y: auto;
        }

        .sel_container {
            z-index: 9999;
            font-size: 12px;
            position: absolute;
            right: 0px;
            top: 0px;
            width: 140px;
            background: rgba(255,255,255,0.8);
            height: 30px;
            line-height: 30px;
            padding: 5px;
        }

        .map_popup {
            position: absolute;
            z-index: 200000;
            width: 382px;
            height: 344px;
            right: 0px;
            top: 40px;
        }

            .map_popup .popup_main {
                background: #fff;
                border: 1px solid #8BA4D8;
                height: 100%;
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 2;
            }

            .map_popup .title {
                background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
                color: #6688CC;
                font-weight: bold;
                height: 24px;
                line-height: 25px;
                padding-left: 7px;
            }

            .map_popup button {
                background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
                cursor: pointer;
                height: 12px;
                position: absolute;
                right: 4px;
                top: 6px;
                width: 12px;
            }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8xoEYkEG7Qexkb5d2ehu0OypBeLbk4SU"></script>
    <!-- 加载城市列表 -->
    <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
    <title>中国五级以上地震-ATtuing</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="result">
        <button id="open">打开</button><button id="close">关闭</button>
    </div>
    <!--城市列表-->
    <div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
    <div class="map_popup" id="cityList" style="display:none;">
        <div class="popup_main">
            <div class="title">城市列表</div>
            <div class="cityList" id="citylist_container"></div>
            <button id="popup_close"></button>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");          // 创建地图实例
    var point = new BMap.Point(102.14004, 32.427558);  // 创建点坐标
    map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom();
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    var customLayer;
    function addCustomLayer(keyword) {
        if (customLayer) {
            map.removeTileLayer(customLayer);
        }
        customLayer = new BMap.CustomLayer({
            geotableId: 173917,
            q: '', //检索关键字
            tags: '', //空格分隔的多字符串
            filter: '' //过滤条件,参考http://lbsyun.baidu.com/lbs-geosearch.htm#.search.nearby
        });
        map.addTileLayer(customLayer);
        customLayer.addEventListener('hotspotclick', callback);
    }
    function callback(e)//单击热点图层
    {
        var customPoi = e.customPoi;//poi的默认字段
        var contentPoi = e.content;//poi的自定义字段
        var opts = {
            width: 290, //宽度
            height: 120, //高度
            title: "中国历史地震", // 信息窗口标题
        }
        var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
        var content = '';
        if (contentPoi.depth == "0") {
            contentPoi.depth = "无数据";
        }
        var infoWindow = new BMap.InfoWindow("地址：" + contentPoi.address + "<br />时间：" + contentPoi.datetime
            + "<br />深度：" + contentPoi.depth + "<br />震级：" + contentPoi.magnitude, opts);
        map.openInfoWindow(infoWindow, point);
    }
    document.getElementById("open").onclick = function () {
        addCustomLayer();
    };
    document.getElementById("open").click();
    document.getElementById("close").onclick = function () {
        if (customLayer) {
            map.removeTileLayer(customLayer);
        }
    };
    // 创建CityList对象，并放在citylist_container节点内
    var myCl = new BMapLib.CityList({ container: "citylist_container", map: map });

    // 给城市点击时，添加相关操作
    myCl.addEventListener("cityclick", function (e) {
        // 修改当前城市显示
        document.getElementById("curCity").innerHTML = e.name;

        // 点击后隐藏城市列表
        document.getElementById("cityList").style.display = "none";
    });
    // 给“更换城市”链接添加点击操作
    document.getElementById("curCityText").onclick = function () {
        var cl = document.getElementById("cityList");
        if (cl.style.display == "none") {
            cl.style.display = "";
        } else {
            cl.style.display = "none";
        }
    };
    // 给城市列表上的关闭按钮添加点击操作
    document.getElementById("popup_close").onclick = function () {
        var cl = document.getElementById("cityList");
        if (cl.style.display == "none") {
            cl.style.display = "";
        } else {
            cl.style.display = "none";
        }
    };
</script>
View Code

 

 

4.历史地震分布统计

      我这里将数据库中的数据按省份进行统计，结合百度echarts制作出历史地震分布统计，访问连接：http://test.sharegis.cn/EQStatistics.html，实现效果和代码如下：

 

 

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title>全国地震统计</title>
  6     <script src="echarts/echarts.js"></script>
  7     <script src="echarts/china.js"></script>
  8 </head>
  9 <body>
 10     <div id="main"  style="width: 1200px;height:630px;"></div>
 11     <script type="text/javascript">
 12         var myChart = echarts.init(document.getElementById('main'));
 13         myChart.setOption({
 14             title: {
 15                 text: '全国地震分布地图',
 16                 subtext: '基础数据来源于中国地震信息网',
 17                 left: 'center'
 18             },
 19             tooltip: {
 20                 trigger: 'item'
 21             },
 22             legend: {
 23                 orient: 'vertical',
 24                 left: 'left',
 25                 data: ['中国地震']
 26             },
 27             visualMap: {
 28                 min: 0,
 29                 max: 2500,
 30                 left: 'left',
 31                 top: 'bottom',
 32                 text: ['高', '低'],           // 文本，默认为数值文本
 33                 calculable: true
 34             },
 35             toolbox: {
 36                 show: true,
 37                 orient: 'vertical',
 38                 left: 'right',
 39                 top: 'center',
 40                 feature: {
 41                     dataView: { readOnly: false },
 42                     restore: {},
 43                     saveAsImage: {}
 44                 }
 45             },
 46             series: [
 47                 {
 48                     name: '中国地震',
 49                     type: 'map',
 50                     mapType: 'china',
 51                     roam: false,
 52                     label: {
 53                         normal: {
 54                             show: true
 55                         },
 56                         emphasis: {
 57                             show: true
 58                         }
 59                     },
 60                     data: [
 61  { name: '北京', value: 22 },
 62  { name: '天津', value: 7 },
 63  { name: '上海', value: 3 },
 64  { name: '重庆', value: 6 },
 65  { name: '河北', value: 211 },
 66  { name: '河南', value: 46 },
 67  { name: '云南', value: 595 },
 68  { name: '辽宁', value: 41 },
 69  { name: '黑龙江', value: 26 },
 70  { name: '湖南', value: 20 },
 71  { name: '安徽', value: 31 },
 72  { name: '山东', value: 73 },
 73  { name: '新疆', value: 806 },
 74  { name: '江苏', value: 31 },
 75  { name: '浙江', value: 8 },
 76  { name: '江西', value: 25 },
 77  { name: '湖北', value: 37 },
 78  { name: '广西', value: 35 },
 79  { name: '甘肃', value: 158 },
 80  { name: '山西', value: 121 },
 81  { name: '内蒙古', value: 63 },
 82  { name: '陕西', value: 50 },
 83  { name: '吉林', value: 45 },
 84  { name: '福建', value: 33 },
 85  { name: '贵州', value: 12 },
 86  { name: '广东', value: 54 },
 87  { name: '青海', value: 287 },
 88  { name: '西藏', value: 808 },
 89  { name: '四川', value: 385 },
 90  { name: '宁夏', value: 56 },
 91  { name: '海南', value: 17 },
 92  { name: '台湾', value: 2015 },
 93  { name: '香港', value: 0 },
 94  { name: '澳门', value: 1 }
 95                     ]
 96                 }
 97             ]
 98         });
 99     </script>
100 </body>
101 </html>
View Code

 

 

 

5.历史地震热力图

     我这里将数据库中的数据全部显示在地图中以热力图的形式展示，可以更直观的查看那个地区在历史上是否是地震高发区。访问连接：http://test.sharegis.cn/Heatmap.html，实现效果和代码如下：

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 6     <script src="data.js"></script>
 7     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8xoEYkEG7Qexkb5d2ehu0OypBeLbk4SU"></script>
 8     <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
 9     <title>中国历史地震热力图</title>
10     <style type="text/css">
11         ul,li{list-style: none;margin:0;padding:0;float:left;}
12         html{height:100%}
13         body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
14         #container{height:600px;width:100%;}
15         #r-result{width:100%;}
16     </style>    
17 </head>
18 <body>
19     <div id="container"></div>
20     <div id="r-result">
21         <input type="button"  onclick="openHeatmap();" value="显示热力图"/><input type="button"  onclick="    closeHeatmap();" value="关闭热力图"/>
22     </div>
23 </body>
24 </html>
25 <script type="text/javascript">
26     var map = new BMap.Map("container");          // 创建地图实例
27     var point = new BMap.Point(102.14004, 32.427558);  // 创建点坐标
28     map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别
29     map.enableScrollWheelZoom(); // 允许滚轮缩放
30     if (!isSupportCanvas()) {
31         alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~');
32     }
33     //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
34     //参数说明如下:
35     /* visible 热力图是否显示,默认为true
36      * opacity 热力的透明度,1-100
37      * radius 势力图的每个点的半径大小   
38      * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
39      *    {
40             .2:'rgb(0, 255, 255)',
41             .5:'rgb(0, 110, 255)',
42             .8:'rgb(100, 0, 255)'
43         }
44         其中 key 表示插值的位置, 0~1. 
45             value 为颜色值. 
46      */
47     heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
48     map.addOverlay(heatmapOverlay);
49     heatmapOverlay.setDataSet({ data: points, max: 50 });
50     //是否显示热力图
51     function openHeatmap() {
52         heatmapOverlay.show();
53     }
54     function closeHeatmap() {
55         heatmapOverlay.hide();
56     }
57     closeHeatmap();
58     function setGradient() {
59         /*格式如下所示:
60         {
61               0:'rgb(102, 255, 0)',
62               .5:'rgb(255, 170, 0)',
63               1:'rgb(255, 0, 0)'
64         }*/
65         var gradient = {};
66         var colors = document.querySelectorAll("input[type='color']");
67         colors = [].slice.call(colors, 0);
68         colors.forEach(function (ele) {
69             gradient[ele.getAttribute("data-key")] = ele.value;
70         });
71         heatmapOverlay.setOptions({ "gradient": gradient });
72     }
73     //判断浏览区是否支持canvas
74     function isSupportCanvas() {
75         var elem = document.createElement('canvas');
76         return !!(elem.getContext && elem.getContext('2d'));
77     }
78 </script>
View Code

 

 

6.关于中国地震带

      我国位于世界两大地震带――环太平洋地震带与欧亚地震带之间，受太平洋板块、印度板块和菲律宾海板块的挤压，地震断裂带十分活跃。中国地震主要分布在五个区域：台湾省、西南地区、西北地区、华北地区、东南沿海地区和23条地震带上。下面是我在网络上找的图片。可以对比一下上面热力图得到的结果，是不是比较吻合地震带呢。

 

7.尾声

    这两天频繁的地震让我们感觉到无论社会如何发展人在自然灾害面前也是非常的脆弱，大家要珍惜眼前的生活，努力奋斗吧。最后附上我整理的历史地震数据，有excel、sql脚本、和shp格式的地理空间数据，百度云链接：http://pan.baidu.com/s/1eS3WfGu

 

作者：ATtuing

出处：http://www.cnblogs.com/ATtuing

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

 

 

posted @ 2017-08-09 23:50  ATtuing  阅读(4432)  评论(12)  编辑  收藏  举报