可视化数据：地震图

总览

本教程介绍了如何在Google地图上可视化数据。例如，本教程中的地图将有关地震位置及其震级的数据可视化。学习与您自己的数据源结合使用的技术，并在Google地图上创建强大的故事，如下所示。

上方（从左到右）看到的前2帧显示带有基本标记和大小圆圈的地图 。最后一帧显示热图。

汇入资料

本教程使用 来自美国地质调查局（USGS）的实时地震数据。USGS网站以多种格式提供其数据，您可以将其复制到域中以供应用程序本地访问。本教程通过将标签附加到文档的开头，直接从USGS服务器请求 JSONPscript。

注意：由于加载跨域内容存在潜在的安全风险，因此只应从完全信任的服务器请求数据。

<span style="color:#37474f"><span style="color:#d81b60">// Create a script tag and set the USGS URL as the source.</span><span style="color:#3b78e7">var</span> script = document.createElement(<span style="color:#0d904f">'script'</span>);script.src = <span style="color:#0d904f">'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'</span>;document.getElementsByTagName(<span style="color:#0d904f">'head'</span>)[<span style="color:#c53929">0</span>].appendChild(script);
</span>

放置基本标记

现在，您已经从USGS提要中提取了有关地震位置的数据，然后可以在地图上显示它了。本节介绍如何创建使用导入的数据在每个地震位置的震中放置基本标记的地图。

以下部分显示了在本教程中创建地图所​​需的全部代码。

自己尝试

您可以通过单击<>代码窗口右上角的图标来在JSFiddle中尝试此代码。

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span><span style="color:#3b78e7"><head></span><span style="color:#3b78e7"><style></span><span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div* element that contains the map. */</span>#map {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;}<span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>html, body {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;<span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;<span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;}<span style="color:#3b78e7"></style></span><span style="color:#3b78e7"></head></span><span style="color:#3b78e7"><body></span><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span><span style="color:#3b78e7"><script></span><span style="color:#3b78e7">var</span> map;<span style="color:#3b78e7">function</span> initMap() {map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">2</span>,center: <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(<span style="color:#c53929">2.8</span>,-<span style="color:#c53929">187.3</span>),mapTypeId: <span style="color:#0d904f">'terrain'</span>});<span style="color:#d81b60">// Create a <script> tag and set the USGS URL as the source.</span><span style="color:#3b78e7">var</span> script = document.createElement(<span style="color:#0d904f">'script'</span>);<span style="color:#d81b60">// This example uses a local copy of the GeoJSON stored at</span><span style="color:#d81b60">// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp</span>script.src = <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'</span>;document.getElementsByTagName(<span style="color:#0d904f">'head'</span>)[<span style="color:#c53929">0</span>].appendChild(script);}<span style="color:#d81b60">// Loop through the results array and place a marker for each</span><span style="color:#d81b60">// set of coordinates.</span>window.eqfeed_callback = <span style="color:#3b78e7">function</span>(results) {<span style="color:#3b78e7">for</span> (<span style="color:#3b78e7">var</span> i = <span style="color:#c53929">0</span>; i < results.features.length; i++) {<span style="color:#3b78e7">var</span> coords = results.features[i].geometry.coordinates;<span style="color:#3b78e7">var</span> latLng = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(coords[<span style="color:#c53929">1</span>],coords[<span style="color:#c53929">0</span>]);<span style="color:#3b78e7">var</span> marker = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Marker</span>({position: latLng,map: map});}}<span style="color:#3b78e7"></script></span><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span><span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span><span style="color:#3b78e7"></script></span><span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>

使用形状和热图自定义地图

本节介绍了在地图上自定义丰富数据集的其他方法。考虑在本教程的上一部分中创建的地图，该地图显示每个地震位置上的标记。您可以自定义标记以可视化其他数据，例如地震最多的位置及其震级或深度。

以下是一些用于自定义基本标记的选项：

  • 使用圆形大小：
    您可以使用符号绘制大小（相对于地震的大小）的圆形（或其他形状） 。这样，强大的地震就被表示为地图上最大的圆圈。

  • 使用热图：
    可视化库中的热图层提供了一种简单而强大的方式来显示地震的分布。热图使用颜色表示点的密度，从而更容易挑选出活动频繁的区域。也可以使用WeightedLocations热图，以便例如在热图中更显眼地显示更大的地震。

圆圈大小

下面的地图使用圆圈显示了自定义标记。圆的大小随该特定位置的地震强度而增加。

以下部分显示了创建带有自定义圆圈标记的地图所需的全部代码。

自己尝试

您可以通过单击<>代码窗口右上角的图标来在JSFiddle中尝试此代码。

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span><span style="color:#3b78e7"><head></span><span style="color:#3b78e7"><style></span><span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div* element that contains the map. */</span>#map {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;}<span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>html, body {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;<span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;<span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;}<span style="color:#3b78e7"></style></span><span style="color:#3b78e7"></head></span><span style="color:#3b78e7"><body></span><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span><span style="color:#3b78e7"><script></span><span style="color:#3b78e7">var</span> map;<span style="color:#3b78e7">function</span> initMap() {map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">2</span>,center: {lat: -<span style="color:#c53929">33.865427</span>, lng: <span style="color:#c53929">151.196123</span>},mapTypeId: <span style="color:#0d904f">'terrain'</span>});<span style="color:#d81b60">// Create a <script> tag and set the USGS URL as the source.</span><span style="color:#3b78e7">var</span> script = document.createElement(<span style="color:#0d904f">'script'</span>);<span style="color:#d81b60">// This example uses a local copy of the GeoJSON stored at</span><span style="color:#d81b60">// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp</span>script.src = <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'</span>;document.getElementsByTagName(<span style="color:#0d904f">'head'</span>)[<span style="color:#c53929">0</span>].appendChild(script);map.data.setStyle(<span style="color:#3b78e7">function</span>(feature) {<span style="color:#3b78e7">var</span> magnitude = feature.getProperty(<span style="color:#0d904f">'mag'</span>);<span style="color:#3b78e7">return</span> {icon: getCircle(magnitude)};});}<span style="color:#3b78e7">function</span> getCircle(magnitude) {<span style="color:#3b78e7">return</span> {path: google.maps.<span style="color:#9c27b0">SymbolPath</span>.CIRCLE,fillColor: <span style="color:#0d904f">'red'</span>,fillOpacity: .<span style="color:#c53929">2</span>,scale: <span style="color:#9c27b0">Math</span>.pow(<span style="color:#c53929">2</span>, magnitude) / <span style="color:#c53929">2</span>,strokeColor: <span style="color:#0d904f">'white'</span>,strokeWeight: .<span style="color:#c53929">5</span>};}<span style="color:#3b78e7">function</span> eqfeed_callback(results) {map.data.addGeoJson(results);}<span style="color:#3b78e7"></script></span><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span><span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&callback=initMap"</span><span style="color:#3b78e7">></span><span style="color:#3b78e7"></script></span><span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span></span>

了解代码

下表说明了创建圆形标记的代码。

代码和说明 
<span style="color:#37474f">  map.data.setStyle(<span style="color:#3b78e7">function</span>(feature) {<span style="color:#3b78e7">var</span> magnitude = feature.getProperty(<span style="color:#0d904f">'mag'</span>);<span style="color:#3b78e7">return</span> {icon: getCircle(magnitude)};});
</span>
向调用getCircle() 函数的数据层添加样式。
为该点创建一个自定义图像，而不是默认的红色标记。 
<span style="color:#37474f"><span style="color:#3b78e7">function</span> getCircle(magnitude) {<span style="color:#3b78e7">var</span> circle = {path: google.maps.<span style="color:#9c27b0">SymbolPath</span>.CIRCLE,scale: magnitude};<span style="color:#3b78e7">return</span> circle;}
</span>
magnitude地震 的性质被传递给该函数。
getCircle()绘制一个圆，其大小由震级值定义，然后将该圆发回用作地震的自定义标记。

热图

根据USGS的报道，热图使观众更容易理解地震的分布。热图不是在每个震中放置标记，而是使用颜色和形状来表示数据的分布。在此示例中，红色表示高地震活动区域。

提示：您可以使用属性为热图设置自己的颜色 。 gradient

以下部分显示了创建此地图所需的全部代码。

自己尝试

您可以通过单击<>代码窗口右上角的图标来在JSFiddle中尝试此代码。

<span style="color:#37474f"><span style="color:#c53929"><!DOCTYPE html></span>
<span style="color:#3b78e7"><html></span><span style="color:#3b78e7"><head></span><span style="color:#3b78e7"><style></span><span style="color:#d81b60">/* Always set the map height explicitly to define the size of the div* element that contains the map. */</span>#map {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;}<span style="color:#d81b60">/* Optional: Makes the sample page fill the window. */</span>html, body {<span style="color:#3b78e7">height</span>: <span style="color:#c53929">100%</span>;<span style="color:#3b78e7">margin</span>: <span style="color:#c53929">0</span>;<span style="color:#3b78e7">padding</span>: <span style="color:#c53929">0</span>;}<span style="color:#3b78e7"></style></span><span style="color:#3b78e7"></head></span><span style="color:#3b78e7"><body></span><span style="color:#3b78e7"><div</span> <span style="color:#9c27b0">id</span>=<span style="color:#0d904f">"map"</span><span style="color:#3b78e7">></div></span><span style="color:#3b78e7"><script></span><span style="color:#3b78e7">var</span> map;<span style="color:#3b78e7">function</span> initMap() {map = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">Map</span>(document.getElementById(<span style="color:#0d904f">'map'</span>), {zoom: <span style="color:#c53929">2</span>,center: {lat: -<span style="color:#c53929">33.865427</span>, lng: <span style="color:#c53929">151.196123</span>},mapTypeId: <span style="color:#0d904f">'terrain'</span>});<span style="color:#d81b60">// Create a <script> tag and set the USGS URL as the source.</span><span style="color:#3b78e7">var</span> script = document.createElement(<span style="color:#0d904f">'script'</span>);<span style="color:#d81b60">// This example uses a local copy of the GeoJSON stored at</span><span style="color:#d81b60">// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp</span>script.src = <span style="color:#0d904f">'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'</span>;document.getElementsByTagName(<span style="color:#0d904f">'head'</span>)[<span style="color:#c53929">0</span>].appendChild(script);}<span style="color:#3b78e7">function</span> eqfeed_callback(results) {<span style="color:#3b78e7">var</span> heatmapData = [];<span style="color:#3b78e7">for</span> (<span style="color:#3b78e7">var</span> i = <span style="color:#c53929">0</span>; i < results.features.length; i++) {<span style="color:#3b78e7">var</span> coords = results.features[i].geometry.coordinates;<span style="color:#3b78e7">var</span> latLng = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(coords[<span style="color:#c53929">1</span>], coords[<span style="color:#c53929">0</span>]);heatmapData.push(latLng);}<span style="color:#3b78e7">var</span> heatmap = <span style="color:#3b78e7">new</span> google.maps.visualization.<span style="color:#9c27b0">HeatmapLayer</span>({data: heatmapData,dissipating: <span style="color:#3b78e7">false</span>,map: map});}<span style="color:#3b78e7"></script></span><span style="color:#3b78e7"><script</span> <span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span><span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key=</span>YOUR_API_KEY<span style="color:#0d904f">&libraries=visualization&callback=initMap"</span><span style="color:#3b78e7">></span><span style="color:#3b78e7"></script></span><span style="color:#3b78e7"></body></span>
<span style="color:#3b78e7"></html></span>
</span>

了解代码

下表说明了创建热图的代码。

代码和说明 
<span style="color:#37474f"><span style="color:#3b78e7"><script</span>
<span style="color:#9c27b0">async</span> <span style="color:#9c27b0">defer</span>
<span style="color:#9c27b0">src</span>=<span style="color:#0d904f">"https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap"</span><span style="color:#3b78e7">></span>
<span style="color:#3b78e7"></script></span>
</span>
该visualization库用于显示热图。
它包含一个 HeatmapLayer类。
使用库时，必须在调用Maps API JavaScript时加载。 
<span style="color:#37474f">  <span style="color:#3b78e7">function</span> eqfeed_callback(results) {<span style="color:#3b78e7">var</span> heatmapData = [];<span style="color:#3b78e7">for</span> (<span style="color:#3b78e7">var</span> i = <span style="color:#c53929">0</span>; i &lt; results.features.length; i++) {<span style="color:#3b78e7">var</span> coords = results.features[i].geometry.coordinates;<span style="color:#3b78e7">var</span> latLng = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(coords[<span style="color:#c53929">1</span>], coords[<span style="color:#c53929">0</span>]);heatmapData.push(latLng);}<span style="color:#3b78e7">var</span> heatmap = <span style="color:#3b78e7">new</span> google.maps.visualization.<span style="color:#9c27b0">HeatmapLayer</span>({data: heatmapData,dissipating: <span style="color:#3b78e7">false</span>,map: map});}
</span>
与前面的示例一样，USGS数据将传递给该 eqfeed_callback 函数。
这会将每个地震的坐标添加到 heatmapData数组中。
然后将该数组传递给 HeatmapLayer 构造函数，该构造函数创建热图并将其显示在地图上。 
<span style="color:#37474f">  <span style="color:#3b78e7">function</span> eqfeed_callback(results) {<span style="color:#3b78e7">var</span> heatmapData = [];<span style="color:#3b78e7">for</span> (<span style="color:#3b78e7">var</span> i = <span style="color:#c53929">0</span>; i &lt; results.features.length; i++) {<span style="color:#3b78e7">var</span> coords = results.features[i].geometry.coordinates;<span style="color:#3b78e7">var</span> latLng = <span style="color:#3b78e7">new</span> google.maps.<span style="color:#9c27b0">LatLng</span>(coords[<span style="color:#c53929">1</span>], coords[<span style="color:#c53929">0</span>]);<span style="color:#3b78e7">var</span> magnitude = results.features[i].properties.mag;<span style="color:#3b78e7">var</span> weightedLoc = {location: latLng,weight: <span style="color:#9c27b0">Math</span>.pow(<span style="color:#c53929">2</span>, magnitude)};heatmapData.push(weightedLoc);}<span style="color:#3b78e7">var</span> heatmap = <span style="color:#3b78e7">new</span> google.maps.visualization.<span style="color:#9c27b0">HeatmapLayer</span>({data: heatmapData,dissipating: <span style="color:#3b78e7">false</span>,map: map});}
</span>
要按幅度加权结果，可以将WeightedLocation 对象传递 给heatmapData

5、谷歌地图官方API-可视化数据：地震图相关推荐

  1. 谷歌地图JavaScript API第3版 地理编码服务

    地理编码服务 概观 地理编码请求 地理编码响应 地理编码结果 地址组件类型 状态代码 反向地理编码 视口偏置 区码偏置 概观 地理编码地址(如"1600剧场百汇,山景,CA")转换 ...

  2. 谷歌官方回应了，99 部手机行为艺术「捉弄」谷歌地图后续

    _ By 超神经 内容导读:谷歌地图对于交通是否拥堵的判断依据是什么?它存在缺陷吗?一位叫 Simon Weckert 的艺术家,通过一个简单的实验,成功欺骗了谷歌地图的路况判断,在空旷的大马路上,制 ...

  3. WIN10 3个手指拖动_老树谷歌地图数据采集大师下载-谷歌地图数据采集 v1.3.0.3 官方版...

    老树谷歌地图数据采集大师是一款体积轻量.简单实用的地图数据采集软件,该软件是专门为搞外贸的用户而开发,基于谷歌地图的数据采集的软件,通过该软件用户可以对客户公式的名称.联系方式和地址等信息进行采集:老 ...

  4. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 ...

  5. GoogleMap——谷歌地图Api的使用

    最近公司想要在国外也使用地图功能,而我们国内使用的是高德地图,国外客户需要用谷歌地图,所以去了解了一下谷歌地图的使用,这里记录一下. 准备工作 首先你得有一个谷歌账号,然后得用一点小魔法,去谷歌地图官 ...

  6. 高德地图加载谷歌地图瓦片

    简介 苦逼外业实验需要用到无人机采集数据,遂利用高德地图SDK和DJI Mobile SDK开发了一款无人机航线规划软件.当地也不算偏僻,然而高德卫星地图缩放等级约为16,无法满足作业需求.调查了其他 ...

  7. 谷歌地图开发：地理编码和反地理编码

    谷歌地图Geocoding说明:内容主要来自谷歌官网的文档,谷歌地图android api地理和反地理编码反应迟钝内容有时不准确,这里使用的googlemap的webapi接口.嗯,需要vpn这个不多 ...

  8. 【GIS教程】在谷歌地图中快速导出区域地形图

    在谷歌地图中快速导出区域地形图 0 前期准备 1 选取研究区域 2 路径绘制 3 文件格式转换 4 制作区域地形图 4.1 surfer制图 4.2 Quik Grid制图 0 前期准备 在进行操作之 ...

  9. 前端的百度地图的api的使用

    1.打开百度地图官方api网页 http://lbsyun.baidu.com/ 2.点击开发文档 3.选择对应的api 4.点击DEMO详情 5.得到源码复制到你的代码中 1 <!DOCTYP ...

最新文章

  1. Python脚本BUG引发学界震动，影响有多大？
  2. php正则过滤html标签_空格_换行符的代码,php正则过滤html标签、空格、换行符的代码(附说明)_php技巧...
  3. ajax is failed怎么办,我在AJAX中遇到了问题
  4. C语言中使用库函数解析命令行参数
  5. TF之LSTM：利用基于顺序的LSTM回归算法对DIY数据集sin曲线(蓝虚)预测cos(红实)(matplotlib动态演示)
  6. SmartFoxServer资料
  7. Xor sum HDU - 6955
  8. HTTP header location 重定向 URL
  9. 安装VISTA我们应该选择哪种
  10. Gnosis发起提案就是否推出Gnosis协议v2版本展开讨论
  11. Java入门第37课——猜字母游戏之设计数据结构
  12. WCP源码分析 与SpringMVC学习资料
  13. C语言必背100代码，C语言必会100代码大全
  14. LPC_2136 PLC,扩展方案，兼容西门子S7-200 CPU 224XP,兼容西门子软件
  15. GM8827C 多通道LVDS 串行发送器，27位CMOS/TTL信号转化为多路LVDS信号
  16. Android系统应用---SystemUI之三：状态栏电池图标的显示和Android电池管理的探讨
  17. 定制Android关机界面
  18. 深度自定义macOS邮件程序的个性签名内容
  19. React的非受控组件和受控组件
  20. V2X和D2D的链路级sidelink上的区别

热门文章

  1. JVM学习笔记（二）：垃圾回收、垃圾回收算法、垃圾回收器（Serial、Parallel、CMC、G1）、内存分配原则实战
  2. mov ah,4ch int 21的作用
  3. 一款Github工具包-快速下载网页上的视频
  4. 【Python游戏】咱就说Python实现一个蔡徐坤大战篮球的小游戏，可还行？ | 附带源码
  5. 持久化技术——游戏玩家信息管理（基于 SQLite）
  6. 为什么 application data文件夹是无限循环的
  7. win7计算机c盘搜索不到,Win7系统如何查找C盘中的ProgramData文件夹？
  8. 用ASP.NET建立一个在线RSS新闻聚合器
  9. 显示单月的日历c语言编程,显示单月的日历的C程序
  10. 您可能不知道WooCommerce可以做的10件事