From 5e5aadb2da5c787ecec4c888886d5ce47bcd8c75 Mon Sep 17 00:00:00 2001
From: chenxianhui <chenxianhui@supermap.com>
Date: Wed, 27 Nov 2024 10:29:43 +0800
Subject: [PATCH] =?UTF-8?q?[fix]=E4=BF=AE=E6=94=B9=E5=A4=9A=E6=97=B6?=
 =?UTF-8?q?=E7=9B=B8=E4=BE=8B=E5=AD=90=E6=97=B6=E9=97=B4=E8=BD=B4=E6=B2=A1?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/leaflet/multiphaseplay.html    |  4 ++--
 examples/mapboxgl/multiphaseplay.html   | 13 ++++++++++---
 examples/maplibregl/multiphaseplay.html | 11 +++++++++--
 examples/openlayers/multiphaseplay.html |  2 +-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/examples/leaflet/multiphaseplay.html b/examples/leaflet/multiphaseplay.html
index 3ec45dfcb..7fc0a68bb 100644
--- a/examples/leaflet/multiphaseplay.html
+++ b/examples/leaflet/multiphaseplay.html
@@ -116,7 +116,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {
@@ -149,8 +149,8 @@
       myChart.on('timelinechanged', function (params) {
         var url = wmsUrlCache[params.currentIndex];
         layer.setUrl(url);
-        changeTimelinePlay(false);
         layer.once("load", changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/mapboxgl/multiphaseplay.html b/examples/mapboxgl/multiphaseplay.html
index 5a00dd681..f62b1bd9d 100644
--- a/examples/mapboxgl/multiphaseplay.html
+++ b/examples/mapboxgl/multiphaseplay.html
@@ -122,8 +122,15 @@
     }
 
     function start() {
+      map.on('sourcedata', onSourceData);
       addStaticImageLayer();
-      map.on('load', addTimeLine);
+    }
+
+    function onSourceData(e) {
+      if (e.sourceId === 'static-image-layer' && e.isSourceLoaded) {
+        map.off('sourcedata', onSourceData);
+        addTimeLine();
+      }
     }
 
     function addStaticImageLayer() {
@@ -142,7 +149,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {
@@ -177,8 +184,8 @@
         map.getSource('static-image-layer').updateImage({
           url: url
         });
-        changeTimelinePlay(false);
         map.once('idle', changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/maplibregl/multiphaseplay.html b/examples/maplibregl/multiphaseplay.html
index 5c4ef453e..00b210bc9 100644
--- a/examples/maplibregl/multiphaseplay.html
+++ b/examples/maplibregl/multiphaseplay.html
@@ -122,8 +122,15 @@
     }
 
     function start() {
+      map.on('sourcedata', onSourceData); 
       addStaticImageLayer();
-      map.on('load', addTimeLine)
+    }
+
+    function onSourceData(e) {
+      if (e.sourceId === 'static-image-layer' && e.isSourceLoaded) {
+        map.off('sourcedata', onSourceData);
+        addTimeLine();
+      }
     }
 
     function addStaticImageLayer() {
@@ -177,8 +184,8 @@
         map.getSource('static-image-layer').updateImage({
           url: url
         });
-        changeTimelinePlay(false);
         map.once('idle', changeTimelinePlay);
+        changeTimelinePlay(false);
       });
     }
 
diff --git a/examples/openlayers/multiphaseplay.html b/examples/openlayers/multiphaseplay.html
index ebf7e6588..3e2d42c92 100644
--- a/examples/openlayers/multiphaseplay.html
+++ b/examples/openlayers/multiphaseplay.html
@@ -135,7 +135,7 @@
     }
 
     function addTimeLine() {
-      var allTime = allFeatures.map(feature => feature.time.split('/')[0]);
+      var allTime = ['2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];
       myChart = echarts.init(document.getElementById('timeline'));
       var option = {
         timeline: {