[example] 修改maplibregl例子中loadImage逻辑

Author: chenxianhuii

examples/maplibregl/01_chartService.html

@@ -643,11 +643,16 @@ <h5 class='panel-title text-center'>
           }
       }
 
-      map.loadImage(
-        '../img/point2.png', 
-        function(error, image) {
-        if (error) throw error;
-          map.addImage('icon_name', image);
+      // maplibre-gl v3版本用法：
+      // map.loadImage(
+      //   '../img/point2.png', 
+      //   function(error, image) {
+      //   if (error) throw error;
+      //     map.addImage('icon_name', image);
+      // });
+      // maplibre-gl v4版本用法：
+      map.loadImage('../img/point2.png').then(function(image) {
+        map.addImage('icon_name', image.data);
       });
       function sqlQuery() { 
         var chartLayerNames = document.getElementById("chartLayers").value;

examples/maplibregl/mvtVectorTile_poi_highlight.html

@@ -47,17 +47,27 @@
                         maxZoom:12,
                         crs: maplibregl.CRS.EPSG4326
                     });
-                    map.on('load', function () {
-                        map.loadImage('../img/poi-bg.png', function (error, image) {
-                            if (error) throw error;
-                            if (!map.hasImage('poi-bg')) {
-                                map.addImage('poi-bg', image, {
-                                    stretchX: [[14, 190]],
-                                    stretchY: [[14, 90]],
-                                    content: [14, 14, 190, 90],
-                                    pixelRatio: 1
-                                });
-                            }
+                    map.on('load', async function () {
+                        // maplibre-gl v3版本用法：
+                        // map.loadImage('../img/poi-bg.png', function (error, image) {
+                        //     if (error) throw error;
+                        //     if (!map.hasImage('poi-bg')) {
+                        //         map.addImage('poi-bg', image, {
+                        //             stretchX: [[14, 190]],
+                        //             stretchY: [[14, 90]],
+                        //             content: [14, 14, 190, 90],
+                        //             pixelRatio: 1
+                        //         });
+                        //     }
+                        // });
+
+                        // maplibre-gl v4版本用法：
+                        const image = await map.loadImage('../img/poi-bg.png');
+                        map.addImage('poi-bg', image.data,{
+                            stretchX: [[14, 190]],
+                            stretchY: [[14, 90]],
+                            content: [14, 14, 190, 90],
+                            pixelRatio: 1
                         });
                         map.addLayer(
                             {