具有动态 URL 的 GeoJSONLayer

此示例演示如何从 USGS 地震目录中添加 GeoJSONLayer 实例，并在加载该图层后获取一组新数据。

工作原理

USGS 地震目录接受各种查询参数，以缩小您请求的地震范围。当应用程序加载时，它会请求日本自 1905 年以来发生的所有红色警报级别的地震。可以通过设置 GeoJSONLayer 的 customParameters 属性来指定查询参数，如下所示。

const layer = new GeoJSONLayer({
  url: "https://earthquake.usgs.gov/fdsnws/event/1/query",
  copyright: "USGS - Japan earthquakes since 1905",
  // Use customParameters to set the query parameters
  // get the all red alert level earthquakes in Japan since 1905 as geojson
  customParameters: {
    format: "geojson",
    starttime: "1905-01-01",
    endtime: new Date().toISOString().split("T")[0],
    minlatitude: 24,
    maxlatitude: 46,
    minlongitude: 123,
    maxlongitude: 145,
    orderby: "magnitude",
    minmagnitude: 1,
    alertlevel: "red"
  },
  // set rest of the properties
  ...
});

加载应用程序后，我们可以更改图层的 customParameters，以请求具有不同查询需求的地震。在运行时更新 customParameters 属性后，必须调用图层上的 refresh() 方法。refresh 方法将获取带有指定参数的 geojson 数据，并在地图上刷新图层数据。在本示例中，用户可以通过从应用程序右侧显示的单选按钮中选择警报级别来请求具有不同警报级别的地震数据。当用户做出选择时，将运行以下逻辑。

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>GeoJSONLayer with dynamic URL | Sample | GeoScene API for JavaScript 4.22</title>

  <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.esm.js"></script>
  <script nomodule="" src="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.js"></script>
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.69/calcite.css"/>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
  <script src="https://js.geoscene.cn/4.23/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infoDiv {
      padding: 6px;
      width: 370px;
      height: 96%;
      position: absolute;
      top: 5px;
      right: 10px;
      --calcite-ui-brand: #71C96E;
      --calcite-ui-brand-hover: #67B564;
    }

    #resultsDiv {
      overflow: auto;
    }
  </style>

  <script>
    require([
      "geoscene/WebMap",
      "geoscene/views/MapView",
      "geoscene/layers/GeoJSONLayer",
      "geoscene/layers/TileLayer",
      "geoscene/layers/FeatureLayer",
      "geoscene/layers/GroupLayer",
      "geoscene/widgets/Expand",
      "geoscene/widgets/Legend"
    ], function(
      WebMap,
      MapView,
      GeoJSONLayer,
      TileLayer,
      FeatureLayer,
      GroupLayer,
      Expand,
      Legend
    ) {

      const layer = new GeoJSONLayer({
        url: "https://earthquake.usgs.gov/fdsnws/event/1/query",
        copyright: "USGS - Japan earthquakes since 1905",
        // Use customParameters to set the query parameters
        // get the all red alert Japan earthquakes since 1905
        // order the results by magnitude
        customParameters: {
          format: "geojson",
          starttime: "1905-01-01",
          endtime: new Date().toISOString().split("T")[0],
          minlatitude: 24,
          maxlatitude: 46,
          minlongitude: 123,
          maxlongitude: 145,
          orderby: "magnitude",
          minmagnitude: 1,
          alertlevel: "red"
        },
        // only show earthquakes that mentions japan
        definitionExpression: "place LIKE '%Japan'",
        effect: "bloom(2 1px 0)",
        title: "USGS Earthquakes",
        renderer: { // apply unique values to alert levels
          type: "unique-value",
          field: "alert",
          uniqueValueInfos: [{
              value: "red",
              symbol: createQuakeSymbol("red")
            },
            {
              value: "orange",
              symbol: createQuakeSymbol("orange")
            },
            {
              value: "yellow",
              symbol: createQuakeSymbol("yellow")
            },
            {
              value: "green",
              symbol: createQuakeSymbol("#136d15")
            }
          ],
          visualVariables: [{
            type: "size",
            field: "mag",
            stops: [{
                value: 4.5,
                size: "1px"
              },
              {
                value: 6,
                size: "20px"
              },
              {
                value: 8,
                size: "60px"
              }
            ]
          }]
        },
        popupTemplate: {
          title: "Earthquake Info",
          content: "Magnitude <b>{mag}</b> {type} hit {place} on <b>{time}</b> <br/><br/>  <a href={url}>More info</a>",
          fieldInfos: [{
            fieldName: "time",
            format: {
              dateFormat: "short-date-short-time"
            }
          }]
        }
      });

      const map = new WebMap({
        // Basemap with blurred world imagery, and highlighted Japan
        basemap: {
          baseLayers: [
            new TileLayer({
              url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
              effect: "blur(8px) brightness(1.2) grayscale(0.8)"
            }),
            new GroupLayer({
              effect: "brightness(150%)",
              layers: [
                new TileLayer({
                  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
                }),
                new FeatureLayer({
                  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer",
                  definitionExpression: "ISO='JP'",
                  renderer: {
                    type: "simple",
                    symbol: {
                      type: "simple-fill",
                      color: "white"
                    }
                  },
                  effect: "bloom(4 0 0)",
                  blendMode: "destination-in"
                })
              ]
            })
          ]
        },
        layers: [layer]
      });

      const view = new MapView({
        map: map,
        container: "viewDiv",
        constraints: {
          minScale: 18489297.737236
        },
        zoom: 4,
        center: [144.701, 34.956]
      });


      layer.load()
        .then(() => {
          // Update the layer custom parameters with the selected alert level on user select
          // fetch the data from the feed by calling refresh method.
          document.getElementById("selectTopEarthquakes").addEventListener(
            "calciteRadioButtonGroupChange",
            (event) => {
              const alertlevel = event.detail;
              layer.customParameters.alertlevel = alertlevel;
              layer.refresh();
              updateQuakeList();
            }
          );
          updateQuakeList();
        });


      async function updateQuakeList() {
        const query = layer.createQuery().set({
          outFields: ["mag", "title", "time", layer.objectIdField],
          returnGeometry: true
        });
        const { features, fields } = await layer.queryFeatures(query);

        document.getElementById("results").innerHTML = "";
        for (const feature of features) {
          const { mag, title, time } = feature.attributes;
          const item = document.createElement("calcite-pick-list-item");
          const date = new Date(time).toLocaleString();
          const description = `Magnitude: ${mag} - Date: ${date}`;
          item.setAttribute("label", title);
          item.setAttribute("description", description);
          item.addEventListener("click", () => {
            view.popup.open({
              features: [feature],
              location: feature.geometry
            })
          });
          document.getElementById("results").appendChild(item);
        }
        document.getElementById(
          "resultsHeading"
        ).innerHTML = `<b>${features.length}</b> ${layer.customParameters.alertlevel} alert level earthquakes.`;
      }

      // add a legend for the earthquakes layer
      const legendExpand = new Expand({
        expandTooltip: "图例",
        view,
        content: new Legend({
          view
        }),
        expanded: false
      });
      view.ui.add(legendExpand, "top-left");

      // assign symbols to earthquakes matching their alert level.
      function createQuakeSymbol(color) {
        return {
          type: "simple-marker",
          color: null,
          outline: {
            color: color,
            width: "2px"
          }
        };
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <calcite-panel id="infoDiv" class="calcite-theme-dark">
    <h3 class="heading" slot="header-content">Earthquakes since 1905</h3>
    <div id="content" style="padding: 5px">
      <calcite-label>
        <b>View earthquakes with:</b>
      </calcite-label>
      <calcite-radio-button-group name="selectTopEarthquakes" layout="vertical" id="selectTopEarthquakes" scale="s">
        <calcite-label layout="inline">
          <calcite-radio-button value="red" checked></calcite-radio-button>
          Red alert level
        </calcite-label>
        <calcite-label layout="inline">
          <calcite-radio-button value="orange"></calcite-radio-button>
          Orange alert level
        </calcite-label>
        <calcite-label layout="inline">
          <calcite-radio-button value="yellow"></calcite-radio-button>
          Yellow alert level
        </calcite-label>
        <calcite-label layout="inline">
          <calcite-radio-button value="green"></calcite-radio-button>
          Green alert level
        </calcite-label>
      </calcite-radio-button-group>
    </div>
    <calcite-panel id="resultsDiv">
      <p class="heading" id="resultsHeading" slot="header-content"></p>
      <div id="results"></div>
    </calcite-panel>
  </calcite-panel>
</body>

</html>