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

最新推荐文章于 2024-11-21 23:28:09 发布

lwbsleep

最新推荐文章于 2024-11-21 23:28:09 发布

阅读量1.3k

点赞数

分类专栏： JS

原文链接：https://developers.google.com/maps/documentation/javascript/earthquakes?hl=zh-cn

版权

JS 专栏收录该内容

8 篇文章

订阅专栏

可视化数据：地震图

总览

本教程介绍了如何在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()`绘制一个圆，其大小由震级值定义，然后将该圆发回用作地震的自定义标记。

代码和说明

<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 < 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 < 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`

代码和说明

<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