JavaScript ArcGIS TimeSlider.actions用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

AMD: require(["esri/widgets/TimeSlider"], (TimeSlider) => { /* code goes here */ });

ESM: import TimeSlider from "@arcgis/core/widgets/TimeSlider";

類： esri/widgets/TimeSlider

繼承: TimeSlider > Widget > Accessor

自從：用於 JavaScript 4.12 的 ArcGIS API

用法說明

TimeSlider.actions函數(或屬性)的定義如下：

actions Collection<action> autocast 來自 Object []

自從：ArcGIS 適用於 JavaScript 4.21 的 API

定義當用戶單擊省略號按鈕時將出現在菜單中的操作 timeSlider-actions-menu 在小部件中。如果此屬性是，省略號按鈕將不會顯示null或者如果集合為空。每個行動用唯一的 id、標題和圖標定義。

每次單擊菜單中的操作時都會觸發 trigger-action 事件。此事件可用於執行自定義代碼，例如將 timeExtent 設置為特定日期或將 timeExtent 複製到瀏覽器的剪貼板。

例子：

// Create a TimeSlider with two actions to snap the thumb to
// two specific time extents.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2011, 0, 1),
    end: new Date(2012, 0, 1)
  },
  mode: "instant",
  actions: [
    {
      id: "quake",
      icon: "exclamation-mark-triangle",
      title: "Jump to Earthquake"
    },
    {
      id: "quake-plus-one-month",
      icon: "organization",
      title: "One month later"
    }
  ]
});

// listen to timeSlider's trigger-action event
// check what action user clicked on and respond accordingly.
timeSlider.on("trigger-action", (event) => {
  const quake = new Date(Date.UTC(2011, 3, 11, 8, 16, 12));
  const oneMonthLater = new Date(quake.getTime()).setMonth(quake.getMonth() + 1);
  switch(event.action.id) {
    case "quake":
      timeSlider.timeExtent = {
        start: quake,
        end: quake
      };
      break;
    case "quake-plus-one-month":
      timeSlider.timeExtent = {
        start: oneMonthLater,
        end: oneMonthLater
      };
      break;
  }
});

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 TimeSlider.actions。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。