使用 TimeSlider 过滤要素

尝试一下在线预览

此示例演示如何使用 TimeSlider 微件过滤 GeoJSONLayer 中的时态数据。这可以通过创建新的 FeatureFilter 并通过观察对 TimeSlider 的 timeExtent 的更改来更新过滤器的 timeExtent 属性来完成。

初始化 GeoJSONLayer 时，将指定图层的 timeInfo 属性，如下所示：

 const layer = new GeoJSONLayer({
  ...
  // specify timeInfo for the layer
  timeInfo: {
    startField: "time", // name of the date field
    interval: { // specify time interval for
      unit: "days",
      value: 1
    }
  }
  ...
 });

然后，创建 TimeSlider 微件的实例并将其添加到视图中。加载图层后，将从图层的 timeInfo 信息设置 TimeSlider 的其他属性。

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

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

      #timeSlider {
        width: 400px;
      }

      #infoDiv {
        height: 200px;
        padding: 10px;
        width: 280px;
      }

      #infoDiv span {
        color: #F9C653;
        font-size: 12pt;
        font-weight: bolder;
      }
    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/dark/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/Map",
        "geoscene/views/MapView",
        "geoscene/layers/GeoJSONLayer",
        "geoscene/widgets/TimeSlider",
        "geoscene/widgets/Expand",
        "geoscene/widgets/Legend"
      ], (Map, MapView, GeoJSONLayer, TimeSlider, Expand, Legend) => {
        let layerView;

        // set the timeInfo on GeoJSONLayer at the time initialization
        const layer = new GeoJSONLayer({
          url: "https://bsvensson.github.io/various-tests/geojson/usgs-earthquakes-06182019.geojson",
          copyright: "USGS Earthquakes",
          title: "USGS Earthquakes",
          // set the CSVLayer's timeInfo based on the date field
          timeInfo: {
            startField: "time", // name of the date field
            interval: {
              // set time interval to one day
              unit: "days",
              value: 1
            }
          },
          orderBy: {
            field: "mag"
          },
          renderer: {
            type: "simple",
            field: "mag",
            symbol: {
              type: "simple-marker",
              color: "orange",
              outline: null
            },
            visualVariables: [
              {
                type: "size",
                field: "mag",
                stops: [
                  {
                    value: 1,
                    size: "5px"
                  },
                  {
                    value: 2,
                    size: "15"
                  },
                  {
                    value: 3,
                    size: "35"
                  }
                ]
              },
              {
                type: "color",
                field: "depth",
                stops: [
                  {
                    value: 2.5,
                    color: "#F9C653",
                    label: "<2km"
                  },
                  {
                    value: 3.5,
                    color: "#F8864D",
                    label: "3km"
                  },
                  {
                    value: 4,
                    color: "#C53C06",
                    label: ">4km"
                  }
                ]
              }
            ]
          },
          popupTemplate: {
            title: "{title}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "place",
                    label: "Location",
                    visible: true
                  },
                  {
                    fieldName: "mag",
                    label: "Magnitude",
                    visible: true
                  },
                  {
                    fieldName: "depth",
                    label: "Depth",
                    visible: true
                  }
                ]
              }
            ]
          }
        });

        const map = new Map({
          basemap: "geoscene-blue",
          layers: [layer]
        });

        const view = new MapView({
          map: map,
          container: "viewDiv",
          zoom: 13,
          center: [-117.512764, 34.04355]
        });


        // create a new time slider widget
        // set other properties when the layer view is loaded
        // by default timeSlider.mode is "time-window" - shows
        // data falls within time range
        const timeSlider = new TimeSlider({
          container: "timeSlider",
          playRate: 50,
          stops: {
            interval: {
              value: 1,
              unit: "hours"
            }
          }
        });
        view.ui.add(timeSlider, "bottom-left");

        // wait till the layer view is loaded
        view.whenLayerView(layer).then((lv) => {
          layerView = lv;

          // start time of the time slider - 5/25/2019
          const start = new Date(2019, 4, 25);
          // set time slider's full extent to
          // 5/25/5019 - until end date of layer's fullTimeExtent
          timeSlider.fullTimeExtent = {
            start: start,
            end: layer.timeInfo.fullTimeExtent.end
          };

          // We will be showing earthquakes with one day interval
          // when the app is loaded we will show earthquakes that
          // happened between 5/25 - 5/26.
          let end = new Date(start);
          // end of current time extent for time slider
          // showing earthquakes with one day interval
          end.setDate(end.getDate() + 1);

          // timeExtent property is set so that timeslider
          // widget show the first day. We are setting
          // the thumbs positions.
          timeSlider.timeExtent = {start, end};
        });


        // watch for time slider timeExtent change
        timeSlider.watch("timeExtent", () => {
          // only show earthquakes happened up until the end of
          // timeSlider's current time extent.
          layer.definitionExpression =
            "time <= " + timeSlider.timeExtent.end.getTime();

          // now gray out earthquakes that happened before the time slider's current
          // timeExtent... leaving footprint of earthquakes that already happened
          layerView.featureEffect = {
            filter: {
              timeExtent: timeSlider.timeExtent,
              geometry: view.extent
            },
            excludedEffect: "grayscale(20%) opacity(12%)"
          };

          // run statistics on earthquakes fall within the current time extent
          const statQuery = layerView.featureEffect.filter.createQuery();
          statQuery.outStatistics = [
            magMax,
            magAvg,
            magMin,
            tremorCount,
            avgDepth
          ];

          layer.queryFeatures(statQuery).then((result) => {
              let htmls = [];
              statsDiv.innerHTML = "";
              if (result.error) {
                return result.error;
              } else {
                if (result.features.length >= 1) {
                  const attributes = result.features[0].attributes;
                  for (name in statsFields) {
                    if (attributes[name] && attributes[name] != null) {
                      const html =
                        "<br/>" +
                        statsFields[name] +
                        ": <b><span> " +
                        attributes[name].toFixed(2) +
                        "</span></b>";
                      htmls.push(html);
                    }
                  }
                  const yearHtml =
                    "<span>" +
                    result.features[0].attributes["tremor_count"] +
                    "</span> earthquakes were recorded between " +
                    timeSlider.timeExtent.start.toLocaleDateString() +
                    " - " +
                    timeSlider.timeExtent.end.toLocaleDateString() +
                    ".<br/>";

                  if (htmls[0] == undefined) {
                    statsDiv.innerHTML = yearHtml;
                  } else {
                    statsDiv.innerHTML =
                      yearHtml + htmls[0] + htmls[1] + htmls[2] + htmls[3];
                  }
                }
              }
            })
            .catch((error) => {
              console.log(error);
            });
        });

        const avgDepth = {
          onStatisticField: "depth",
          outStatisticFieldName: "Average_depth",
          statisticType: "avg"
        };

        const magMax = {
          onStatisticField: "mag",
          outStatisticFieldName: "Max_magnitude",
          statisticType: "max"
        };

        const magAvg = {
          onStatisticField: "mag",
          outStatisticFieldName: "Average_magnitude",
          statisticType: "avg"
        };

        const magMin = {
          onStatisticField: "mag",
          outStatisticFieldName: "Min_magnitude",
          statisticType: "min"
        };

        const tremorCount = {
          onStatisticField: "mag",
          outStatisticFieldName: "tremor_count",
          statisticType: "count"
        };

        const statsFields = {
          Max_magnitude: "Max magnitude",
          Average_magnitude: "Average magnitude",
          Min_magnitude: "Min magnitude",
          Average_depth: "Average Depth"
        };

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

        const statsDiv = document.getElementById("statsDiv");
        const infoDiv = document.getElementById("infoDiv");
        const infoDivExpand = new Expand({
          collapsedIconClass: "esri-icon-collapse",
          expandIconClass: "esri-icon-expand",
          expandTooltip: "Expand earthquakes info",
          view: view,
          content: infoDiv,
          expanded: true
        });
        view.ui.add(infoDivExpand, "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="timeSlider"></div>
    <div id="infoDiv" class="geoscene-widget">
      <div> <b>USGS Earthquakes</b></div><br/>
      <div id="statsDiv" class="geoscene-widget"></div>
    </div>
  </body>
</html>

最后，应用程序将监视 TimeSlider 的 timeExtent 属性，并更新图层的特征效果以显示微件的当前 timeExtent 内记录的地震。应用特征效果后，应用程序还会对当天的地震进行统计查询。

// watch for TimeSlider timeExtent change
timeSlider.watch("timeExtent", () => {
  // gray out earthquakes that are outside of the current timeExtent
  layerView.featureEffect = {
    filter: {
      timeExtent: timeSlider.timeExtent,
      geometry: view.extent
    },
    excludedEffect: "grayscale(20%) opacity(12%)"
  };
});