如何基于WebGIS与高德地图API构建全球地震热力图

文摘   科学   2024-03-04 09:00   重庆  

|本文共629字,阅读约需2分钟

1

项目展示

基于WebGIS与高德地图API构建过去一个月的全球地震热力图展示,数据源于USGS,可以清地看到全球哪些地方地震发生的较为密集,灾害较为严重。

2

开发准备

1.申请高德Web服务
登录高德开放平台控制台(https://lbs.amap.com/?ref=https://console.amap.com/dev/index),如果没有开发者账号,请注册成为开发者。
2.创建并获取key
进入【应用管理】,点击页面右上角【创建新应用】,填写表单即可创建新的应用。
随后,进入【应用管理】,在我的应用中选择需要创建 Key 的应用,点击【添加 Key】,表单中的服务平台选择【Web 服务】。
创建成功后,可获取Key和安全密钥。记住自己的key和密钥,代码中会要求使用。
3.全球地震数据
这里采用的是USGS的过去一个月的全球发生的地震数据集合,包含了经纬度及震级等信息,格式为geojson,数据地址为:
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson


3

项目代码

1.引入高德地图
将你的安全密钥「您申请的安全密钥」替换为你的安全密钥,将你申请的key 值替换为 key,并在<head>元素中添加如下代码。
<script type="text/javascript">        window._AMapSecurityConfig = {            securityJsCode:'您申请的安全密钥',        }</script><script type="text/javascript" lay-src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
2.热力图构建
(1)使用fetch API发起GET请求,获取地震数据。请求成功后,使用response.json()返回一个Promise,并执行回调函数。
(2)在回调函数中,遍历(map)接收到的GeoJSON数据的features属性,提取每条地震记录的经纬度坐标(coordinates)和震级(mag),并将它们转换为数组格式。
(3)初始化高德地图的HeatMap插件。当HeatMap插件加载完成后,创建一个新的AMap.HeatMap对象,并设置其半径、透明度和最大热度值等参数。
(4)最后,将之前处理过的heatmapData作为热力图的数据集传递进去,从而在地图上展示过去一个月全球地震的热力分布情况。
    fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson")    .then(function (response) {        return response.json();    })    .then(function (data) {        // 转换数据        heatmapData = data.features.map(function (feature) {            return {                lng: feature.geometry.coordinates[0],                lat: feature.geometry.coordinates[1],                count: feature.properties.mag            }        });
           var heatmap;        map.plugin(["AMap.HeatMap"], function () {            //初始化heatmap对象            heatmap = new AMap.HeatMap(map, {                radius: 13, //给定半径                opacity: [0, 0.8],                max:10            });            //设置数据集:该数据为北京部分“公园”数据            heatmap.setDataSet({                data: heatmapData,            });        });    });

    4

    代码获取

    公众号后台回复【240304】,即可获取代码文档,记得修改key和安全密钥哟!


    喜欢也行,不喜欢也行;如果觉得有用处的话,还请点点右下角的赞/在看,记得关注我哟!!!

    遥感地理阁
    专注于地理学、遥感科学、人工智能等领域,合作交流、成果分享等事宜请加Y2theK