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");
});