先上圖:更新之一是可以在要素圖層上設置時間“offset”的功能。
示例演示如何在利用FeatureLayer的timeOffset屬性的同時使用TimeSlider小部件。該屬性用於將圖層的timeInfo偏移一定的TimeInterval,以覆蓋來自兩個或多個具有不同時間範圍的時間感知圖層的要素。
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(function(definition){
return createLayer(definition)
});
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}"
}
});
}
此應用程序顯示五個具有時間意識的要素圖層,這些圖層顯示了2014年至2018年之間的加利福尼亞大火。初始化圖層後,timeOffset
將在每個圖層上設置屬性,如下所示。該timeOffset
屬性臨時將火災數據從其視角年份轉移到2018年。當TimeSlider的timeExtent更新時,所有要素圖層都將顯示當前時間範圍內的數據,就好像所有火災都發生在2018年的那個時期一樣。
// update the fire stats between 2014 - 2018 once timeExtent of
// the TimeSlider changes
timeSlider.watch("timeExtent", function(){
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(function(layerViewsResults) {
// query each and every fire layerviews for stats and process the results
queryFeaturesForStats(layerViewsResults).then(function(fireStatsQueryResults){
// fire stats query results are back. Loop through them and process.
fireStatsQueryResults.map(function(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>";
});
});
}
標籤