update dependencies: maplibre-gl-js to 4.0.0

SUSTech-CRA · Feb 8, 2024 · 606fbb1 · 606fbb1
1 parent 930864c
commit 606fbb1
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 106 deletions.
diff --git a/docs/.vuepress/components/RealtimeMap.vue b/docs/.vuepress/components/RealtimeMap.vue
@@ -515,108 +515,117 @@ export default {
       });
 
       //add station
-
-      this.map.loadImage(
-          'https://bus.sustcra.com/station_icon.png',
-          (error, image) => {
-            if (error) throw error;
-            this.map.addImage('bus-station', image);
-
-
-            //image of buildings
-            this.map.loadImage(
-                'https://bus.sustcra.com/bldg_icon.png',
-                (error, image) => {
-                  this.map.addImage('bldg-icon', image)
-                });
-
-            //image of gates
-            this.map.loadImage(
-                'https://bus.sustcra.com/gate_icon.png',
-                (error, image) => {
-                  this.map.addImage('gate-icon', image)
-                });
-
-
-            this.map.addSource('stations', {
-              'type': 'geojson',
-              'data': this.stations_geojson
+      function loadLegendImage(url) {
+        return fetch(url)
+            .then(response => response.blob())
+            .then(blob => {
+              return new Promise((resolve, reject) => {
+                const image = new Image();
+                const url = URL.createObjectURL(blob);
+
+                image.onload = () => {
+                  URL.revokeObjectURL(url); // Clean up the URL object
+                  resolve(image);
+                };
+                image.onerror = () => {
+                  URL.revokeObjectURL(url);
+                  reject(new Error('Could not load image'));
+                };
+                image.src = url;
+              });
             });
+      }
 
-            this.map.addSource('bldgs', {
-              'type': 'geojson',
-              'data': this.bldg_geojson
-            });
+      Promise.all([
+        loadLegendImage('https://bus.sustcra.com/station_icon.png'),
+        loadLegendImage('https://bus.sustcra.com/bldg_icon.png'),
+        loadLegendImage('https://bus.sustcra.com/gate_icon.png')
+      ]).then(images => {
+        // All images have been loaded successfully
+        this.map.addImage('bus-station', images[0]);
+        this.map.addImage('bldg-icon', images[1]);
+        this.map.addImage('gate-icon', images[2]);
+
+        // Now add sources and layers
+        // Add sources and layers after loading images
+        this.map.addSource('stations', {
+          'type': 'geojson',
+          'data': this.stations_geojson
+        });
+
+        this.map.addSource('bldgs', {
+          'type': 'geojson',
+          'data': this.bldg_geojson
+        });
+
+        this.map.addSource('gates', {
+          'type': 'geojson',
+          'data': this.gate_geojson
+        });
+
+        this.map.addLayer({
+          'id': 'bus-station',
+          'type': 'symbol',
+          'source': 'stations',
+          'layout': {
+            'icon-size': 0.075,
+            'icon-image': 'bus-station',
+            'text-field': ['get', 'name'],
+            'text-size': 10,
+            'text-offset': [0, 1.25],
+            'text-anchor': 'top'
+          },
+          "paint": {
+            "text-color": this.map_text_colour
+          },
+          'filter': ['==', '$type', 'Point']
+        });
+
+        this.map.addLayer({
+          'id': 'bldgs',
+          'type': 'symbol',
+          'source': 'bldgs',
+          'layout': {
+            'icon-size': 0.02,
+            'icon-image': 'bldg-icon',
+            'text-field': ['get', 'name'],
+            'text-size': 9,
+            'text-offset': [0, 0.3],
+            'text-anchor': 'top'
+          },
+          "paint": {
+            "text-color": this.map_text_colour
+          },
+          'filter': ['==', '$type', 'Point']
+        });
+
+        this.map.addLayer({
+          'id': 'gates',
+          'type': 'symbol',
+          'source': 'gates',
+          'layout': {
+            'icon-size': 0.05,
+            'icon-image': 'gate-icon',
+            'text-field': ['get', 'name'],
+            'text-size': 10,
+            'text-offset': [0, 0.6],
+            'text-anchor': 'top'
+          },
+          "paint": {
+            "text-color": this.map_text_colour
+          },
+          'filter': ['==', '$type', 'Point']
+        });
 
-            this.map.addSource('gates', {
-              'type': 'geojson',
-              'data': this.gate_geojson
-            });
 
-            this.map.addLayer({
-              'id': 'bus-station',
-              'type': 'symbol',
-              'source': 'stations',
-              'layout': {
-                'icon-size': 0.075,
-                'icon-image': 'bus-station',
-                'text-field': ['get', 'name'],
-                // 'text-font': [
-                //   'Open Sans Semibold',
-                //   'Arial Unicode MS Bold'
-                // ],
-                'text-size': 10,
-                'text-offset': [0, 1.25],
-                'text-anchor': 'top'
-              },
-              "paint": {
-                "text-color": this.map_text_colour
-              },
-              // 'paint': {
-              //   'circle-radius': 6,
-              //   'circle-color': '#B42222'
-              // },
-              'filter': ['==', '$type', 'Point']
-            });
+      }).catch(error => {
+        // Handle any errors that occurred during image loading
+        console.error('Error loading images:', error);
+      });
 
-            this.map.addLayer({
-              'id': 'bldgs',
-              'type': 'symbol',
-              'source': 'bldgs',
-              'layout': {
-                'icon-size': 0.02,
-                'icon-image': 'bldg-icon',
-                'text-field': ['get', 'name'],
-                'text-size': 9,
-                'text-offset': [0, 0.3],
-                'text-anchor': 'top'
-              },
-              "paint": {
-                "text-color": this.map_text_colour
-              },
-              'filter': ['==', '$type', 'Point']
-            });
 
-            this.map.addLayer({
-              'id': 'gates',
-              'type': 'symbol',
-              'source': 'gates',
-              'layout': {
-                'icon-size': 0.05,
-                'icon-image': 'gate-icon',
-                'text-field': ['get', 'name'],
-                'text-size': 10,
-                'text-offset': [0, 0.6],
-                'text-anchor': 'top'
-              },
-              "paint": {
-                "text-color": this.map_text_colour
-              },
-              'filter': ['==', '$type', 'Point']
-            });
 
 
-          });
 
 
     });

diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "axios": "^1.6.0",
     "download": "^8.0.0",
     "echarts": "^5.4.0",
-    "maplibre-gl": "3.6.2",
+    "maplibre-gl": "4.0.0",
     "vue": "^3.4.15"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml