JavaScript ArcGIS TimeSlider.tickConfigs用法及代码示例

基本信息

以下是所在类或对象的基本信息。

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.tickConfigs函数(或属性)的定义如下：

tickConfigs TickConfig[]

自从：ArcGIS 适用于 JavaScript 4.16 的 API

设置后，覆盖默认的 TimeSlider 刻度标签系统。有关如何配置刻度位置、样式和行为的详细文档，请参阅TickConfig。

默认值：null

例子：

// By default in "en-US" the TimeSlider will display ticks with "2010, 2011, 2012, etc".
// Overwrite TimeSlider tick configuration so that labels display "'10, '12, '14, etc" in red.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2010, 0, 1),
    end: new Date(2020, 0, 1)
  },
  tickConfigs: [{
    mode: "position",
    values: [
      new Date(2010, 0, 1), new Date(2012, 0, 1), new Date(2014, 0, 1),
      new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2020, 0, 1)
    ].map((date) => date.getTime()),
    labelsVisible: true,
    labelFormatFunction: (value) => {
      const date = new Date(value);
      return `'${date.getUTCFullYear() - 2000}`;
    },
    tickCreatedFunction: (value, tickElement, labelElement) => {
      tickElement.classList.add("custom-ticks");
      labelElement.classList.add("custom-labels");
    }
  }]
};

// this CSS goes with the snippet above.
#timeSlider .custom-ticks {
  background-color: red;
  width: 1px;
  height: 8px;
}
#timeSlider .custom-labels {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
  color: red;
}

相关用法

注：本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 TimeSlider.tickConfigs。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。