具有 timeOffset 的 TimeSlider

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// create five new instances of feature layers
// based on the following definitions
const url = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/California_fires_since_2014/FeatureServer/"
const definitions = [
  { id: 0, year: 2014, offset: 4 },
  { id: 1, year: 2015, offset: 3 },
  { id: 2, year: 2016, offset: 2 },
  { id: 3, year: 2017, offset: 1 },
  { id: 4, year: 2018, offset: 0 }
];
const layers = definitions.map((definition) => {
  return createLayer(definition)
});

// Creates five instances of feature layers each representing
// fires for the given year (between 2014 - 2018)
function createLayer (definition) {
  const year = definition.year;

  return new FeatureLayer({
    url: url + definition.id,
    timeOffset: {
      value: definition.offset,
      unit: "years"
    },
    outFields: ["*"],
    popupTemplate: {
      title: "{ALARM_DATE}",
      content: "{YEAR_}, {ALARM_DATE}, {GIS_ACRES}"
    }
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// update the fire stats between 2014 - 2018 once timeExtent of
// the TimeSlider changes
timeSlider.watch("timeExtent", () =>{
  updateFiresStats();
});

// This function is called when the timeSlider's timeExtent changes
// It queries each layer view for fire stats and updates the chart
function updateFiresStats(){
  layerViewsEachAlways().then((layerViewsResults) => {
    // query each and every fire layerviews for stats and process the results
    queryFeaturesForStats(layerViewsResults).then((fireStatsQueryResults) => {
      monthDiv.innerHTML = "";
      let month;
      let acresBurntList = [];
      let chartLabels = [];
      // fire stats query results are back. Loop through them and process.
      fireStatsQueryResults.map((result) => {
        if (result.error) {
          return promiseUtils.resolve(result.error);
        }
        // The results of the Promise are returned in the value property
        else {
          // if the stats query returned a year for the given layerview
          // then process and update the chart
          if (result.value.year !== null){

            // extract the year and month from the date
            let date = new Date(result.value.year);
            let year = date.getFullYear();

            // array of burnt acres sum returned in the query results
            // for each layerview representing fires between 2014-2018
            acresBurntList.push(result.value.acres_sum.toFixed(2));

            //chart labels will show the year and count of fires for that year
            const label = year + ", " + result.value.fire_counts;
            chartLabels.push(label);
          }
        }
      });
      // query results have been processed. Update the fires chart to display
      // sum of acres burnt for the given month and year
      firesChart.data.datasets[0].data = acresBurntList;
      firesChart.data.labels = chartLabels;
      firesChart.update();
      startMonth = timeSlider.timeExtent.start.toLocaleString("default", { month: "long" });
      endMonth = timeSlider.timeExtent.end.toLocaleString("default", { month: "long" });
      monthDiv.innerHTML = "<b> Month: <span>" + startMonth + " - " + endMonth + "</span></b>";
    });
  });
}