JavaScript ArcGIS TimeSlider用法及代码示例

通过这种方法，每当更新 TimeSlider 的 timeExtent 时，分配的视图的 timeExtent 也会更新。所有time-aware图层将自动更新以符合视图的timeExtent。查看 Set time properties on data (ArcGIS Pro) 和 Configure time settings on a layer (ArcGIS Online) 文档，了解如何启用服务时间。

// Create a TimeSlider for the first decade of the 21st century.
// set the TimeSlider's view property.
// Only show content for the 1st year of the decade for all
// time aware layers in the view.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  view: view,
  // show data within a given time range
  // in this case data within one year
  mode: "time-window",
  fullTimeExtent: { // entire extent of the timeSlider
    start: new Date(2000, 0, 1),
    end: new Date(2010, 0, 1)
  },
  timeExtent: { // location of timeSlider thumbs
    start: new Date(2000, 0, 1),
    end: new Date(2001, 1, 1)
  }
});
view.ui.add(timeSlider, "manual");

例如，当更新 TimeSlider 的 timeExtent 时，您可能需要更新 FeatureLayerView 、 CSVLayerView 、 GeoJSONLayerView 或 OGCFeatureLayerView 上客户端 filters 和 effects 的 timeExtent 属性。 FeatureFilter 可用于过滤掉当前 timeExtent 中不包含的数据，FeatureEffect 可用于对当前 timeExtent 中包含或排除的要素应用视觉效果。 FeatureEffect 只能在 2D MapView 中使用。

// Create a time slider to update layerView filter
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  mode: "cumulative-from-start",
});
view.ui.add(timeSlider, "manual");

// wait until the layer view is loaded
let timeLayerView;
view.whenLayerView(layer).then((layerView) => {
  timeLayerView = layerView;
  const fullTimeExtent = layer.timeInfo.fullTimeExtent;
  const end = fullTimeExtent.start;

  // set up time slider properties based on layer timeInfo
  timeSlider.fullTimeExtent = fullTimeExtent;
  timeSlider.timeExtent = {
    start: null,
    end: end
  };
  timeSlider.stops = {
    interval: layer.timeInfo.interval
  };
});

timeSlider.watch("timeExtent", (value) => {
  // update layer view filter to reflect current timeExtent
  timeLayerView.filter = {
    timeExtent: value
  };
});

例如，以下代码段显示了如何将带有时间滑块设置的 WebMap 加载到视图中。

// this webmap is saved with timeslider settings
const webmap = new WebMap({
  portalItem: {
    id: "your-webmap-id"
  }
});

// set the timeslider widget to honor the timeslider settings from the webmap.
TimeSlider.getPropertiesFromWebMap(webmap).then((timeSliderSettings) => {
  const timeSlider = new TimeSlider({
    ...timeSliderSettings,
    view
  });
});
const { unit, value } = timeSlider.stops.interval;
console.log(`The stop interval is every ${value} {$unit}.`); // output: "This stop interval is every 3 weeks."

请务必注意，您定义的任何设置都将优先于从可能与分配的视图相关联的网络Map导入的设置。在上面的示例中，webmap 中的 timeSlider 定义的播放速率(或 thumbMovingRate )为 2 秒。以下代码段会覆盖此设置。

const timeSlider = new TimeSlider({
  ...timeSliderSettings,
  view,
  playRate: 1000
});
console.log(`The playback rate is ${timeSlider.playRate} ms.`); // output: "The playback rate is 1000 ms."

从网络Map导入设置后，可能需要检查或调整设置。要确定导入何时完成，您可以观察 viewModel 的 ready state。从关联的 web Map计算属性后，该代码片段会展开或捕捉 fullTimeExtent。

watchUtils.whenEqualOnce(timeSlider.viewModel, "state", "ready", () => {
  timeSlider.fullTimeExtent = timeSlider.fullTimeExtent.expandTo("years");
});