From 7ab3917e25ac69882cf2004b1c0fac1007012241 Mon Sep 17 00:00:00 2001
From: qiwei <qiwei@supermap.com>
Date: Tue, 19 Nov 2024 14:47:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=9B=E5=BB=BA=E4=B8=B4?=
 =?UTF-8?q?=E6=97=B6=E5=9B=BE=E5=B1=82=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/leaflet/createTempLayer.html    | 63 +++++++++++++++---------
 examples/mapboxgl/createTempLayer.html   | 44 +++++++++++------
 examples/maplibregl/createTempLayer.html | 49 ++++++++++++------
 examples/openlayers/createTempLayer.html | 42 +++++++++++-----
 4 files changed, 134 insertions(+), 64 deletions(-)

diff --git a/examples/leaflet/createTempLayer.html b/examples/leaflet/createTempLayer.html
index 5bb4406b7..33e56ba23 100644
--- a/examples/leaflet/createTempLayer.html
+++ b/examples/leaflet/createTempLayer.html
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
           type="button"
           class="btn btn-default"
           data-i18n="[value]resources.text_create"
-          onclick="createTempLayer()"
+          onclick="updateTempLayer()"
         />
       </div>
     </div>
@@ -47,8 +47,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
     <script type="text/javascript">
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
       var map,
+        layerInfoService,
         tempLayer,
-        url = host + '/iserver/services/map-World/rest/maps/World';
+        newResourceID,
+        result,
+        url = host + '/iserver/services/map-world/rest/maps/World';
       map = L.map('map', {
         preferCanvas: true,
         crs: L.CRS.EPSG4326,
@@ -60,30 +63,44 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
 
       function createTempLayer() {
         new L.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
-          var result = serviceResult.result;
-          result.subLayers.layers.map(function (layer, index) {
-            if (index === 15) {
-              layer.gamma = document.getElementById("gammaParam").value || 1;
-              result.subLayers.layers = [layer];
-              new L.supermap.LayerInfoService(url)
-                .setLayersInfo(
+          result = serviceResult.result;
+          var layer = result.subLayers.layers[15];
+          layer.gamma = document.getElementById("gammaParam").value || 1;
+          result.subLayers.layers = [layer];
+          layerInfoService = new L.supermap.LayerInfoService(url);
+          layerInfoService.setLayersInfo(
+              new L.supermap.SetLayersInfoParameters({
+                layersInfo: result
+              })
+            )
+            .then((res) => {
+              newResourceID = res.result.newResourceID;
+              tempLayer = new L.supermap.TiledMapLayer(url, {
+                noWrap: true,
+                cacheEnabled: false,
+                transparent: true,
+                layersID: res.result.newResourceID
+              })
+              tempLayer.addTo(map);
+            });
+        });
+      }
+
+      function updateTempLayer() {
+        if (!newResourceID) {
+          return;
+        }
+        var layer = result.subLayers.layers[0];
+        layer.gamma = document.getElementById("gammaParam").value || 1;
+        layerInfoService.setLayersInfo(
                   new L.supermap.SetLayersInfoParameters({
-                    layersInfo: result
+                    layersInfo: result,
+                    resourceID: newResourceID,
+                    isTempLayers: true
                   })
-                )
-                .then((res) => {
-                  tempLayer && tempLayer.remove();
-                  tempLayer = new L.supermap.TiledMapLayer(url, {
-                    noWrap: true,
-                    cacheEnabled: false,
-                    transparent: true,
-                    layersID: res.result.newResourceID
-                  })
-                  tempLayer.addTo(map);
+                ).then((res) => {
+                  tempLayer.updateParams();
                 });
-            }
-          });
-        });
       }
     </script>
   </body>
diff --git a/examples/mapboxgl/createTempLayer.html b/examples/mapboxgl/createTempLayer.html
index f547f34f5..474e4ecc1 100644
--- a/examples/mapboxgl/createTempLayer.html
+++ b/examples/mapboxgl/createTempLayer.html
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
           type="button"
           class="btn btn-default"
           data-i18n="[value]resources.text_create"
-          onclick="createTempLayer()"
+          onclick="updateTempLayer()"
         />
       </div>
     </div>
@@ -47,8 +47,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
     <span id="show"></span>
     <script type="text/javascript">
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
-      var infowin,
-        url = host + '/iserver/services/map-World/rest/maps/World';
+      var layerInfoService,
+        tempLayer,
+        newResourceID,
+        result,
+        url = host + '/iserver/services/map-world/rest/maps/World';
       var map = new mapboxgl.Map({
         container: 'map',
         style: {
@@ -65,24 +68,20 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
 
       function createTempLayer() {
         new mapboxgl.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
-          var result = serviceResult.result;
-          result.subLayers.layers.map(function (layer, index) {
-            if (index === 15) {
+          result = serviceResult.result;
+          layer = result.subLayers.layers[15]
               layer.gamma = document.getElementById('gammaParam').value || 1;
               result.subLayers.layers = [layer];
-              new mapboxgl.supermap.LayerInfoService(url)
-                .setLayersInfo(
+              layerInfoService = new mapboxgl.supermap.LayerInfoService(url)
+              layerInfoService.setLayersInfo(
                   new mapboxgl.supermap.SetLayersInfoParameters({
                     layersInfo: result
                   })
                 )
                 .then((res) => {
                   var result = res.result;
+                  newResourceID = result.newResourceID;
                   if (result && result.newResourceID) {
-                    if (map.getLayer('layer')) {
-                      map.removeLayer('layer');
-                      map.removeSource('layer');
-                    }
                     map.addLayer({
                       id: 'layer',
                       type: 'raster',
@@ -97,10 +96,27 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
                     });
                   }
                 });
-            }
-          });
         });
       }
+
+      function updateTempLayer() {
+        if (!newResourceID) {
+          return;
+        }
+        var layer = result.subLayers.layers[0];
+        layer.gamma = document.getElementById("gammaParam").value || 1;
+        layerInfoService.setLayersInfo(
+                  new mapboxgl.supermap.SetLayersInfoParameters({
+                    layersInfo: result,
+                    resourceID: newResourceID,
+                    isTempLayers: true
+                  })
+                ).then((res) => {
+                  map.style.sourceCaches['layer'].clearTiles();
+                  map.style.sourceCaches['layer'].update(map.transform);
+                  map.triggerRepaint();
+                });
+      }
     </script>
   </body>
 </html>
diff --git a/examples/maplibregl/createTempLayer.html b/examples/maplibregl/createTempLayer.html
index 8085eecfe..318e13718 100644
--- a/examples/maplibregl/createTempLayer.html
+++ b/examples/maplibregl/createTempLayer.html
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
           type="button"
           class="btn btn-default"
           data-i18n="[value]resources.text_create"
-          onclick="createTempLayer()"
+          onclick="updateTempLayer()"
         />
       </div>
     </div>
@@ -46,7 +46,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
     <script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
     <script type="text/javascript">
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
-      var url = host + '/iserver/services/map-World/rest/maps/World';
+      var layerInfoService,
+        tempLayer,
+        newResourceID,
+        result,
+        url = host + '/iserver/services/map-world/rest/maps/World';
       var map = new maplibregl.Map({
         container: 'map',
         style: {
@@ -57,28 +61,26 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
         center: [0, 0],
         zoom: 2
       });
-      createTempLayer();
+      map.on('load', function () {
+        createTempLayer();
+      });
 
       function createTempLayer() {
         new maplibregl.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
-          var result = serviceResult.result;
-          result.subLayers.layers.map(function (layer, index) {
-            if (index === 15) {
-              layer.gamma = document.getElementById("gammaParam").value || 1;
+          result = serviceResult.result;
+          layer = result.subLayers.layers[15]
+              layer.gamma = document.getElementById('gammaParam').value || 1;
               result.subLayers.layers = [layer];
-              new maplibregl.supermap.LayerInfoService(url)
-                .setLayersInfo(
+              layerInfoService = new maplibregl.supermap.LayerInfoService(url)
+              layerInfoService.setLayersInfo(
                   new maplibregl.supermap.SetLayersInfoParameters({
                     layersInfo: result
                   })
                 )
                 .then((res) => {
                   var result = res.result;
+                  newResourceID = result.newResourceID;
                   if (result && result.newResourceID) {
-                    if (map.getLayer('layer')) {
-                      map.removeLayer('layer');
-                      map.removeSource('layer');
-                    }
                     map.addLayer({
                       id: 'layer',
                       type: 'raster',
@@ -93,10 +95,27 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
                     });
                   }
                 });
-            }
-          });
         });
       }
+
+      function updateTempLayer() {
+        if (!newResourceID) {
+          return;
+        }
+        var layer = result.subLayers.layers[0];
+        layer.gamma = document.getElementById("gammaParam").value || 1;
+        layerInfoService.setLayersInfo(
+                  new maplibregl.supermap.SetLayersInfoParameters({
+                    layersInfo: result,
+                    resourceID: newResourceID,
+                    isTempLayers: true
+                  })
+                ).then((res) => {
+                  map.style.sourceCaches['layer'].clearTiles();
+                  map.style.sourceCaches['layer'].update(map.transform);
+                  map.triggerRepaint();
+                });
+      }
     </script>
   </body>
 </html>
diff --git a/examples/openlayers/createTempLayer.html b/examples/openlayers/createTempLayer.html
index 774058de8..25c9fd6a6 100644
--- a/examples/openlayers/createTempLayer.html
+++ b/examples/openlayers/createTempLayer.html
@@ -38,7 +38,7 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
           type="button"
           class="btn btn-default"
           data-i18n="[value]resources.text_create"
-          onclick="createTempLayer()"
+          onclick="updateTempLayer()"
         />
       </div>
     </div>
@@ -49,8 +49,11 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
     <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
     <script type="text/javascript">
       var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
-      var tempLayer;
-      var url = host + '/iserver/services/map-World/rest/maps/World';
+      var tempLayer,
+      layerInfoService,
+        newResourceID,
+        result;
+      var url = host + '/iserver/services/map-world/rest/maps/World';
       var map = new ol.Map({
         target: 'map',
         controls: ol.control.defaults
@@ -67,19 +70,19 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
 
       function createTempLayer() {
         new ol.supermap.LayerInfoService(url).getLayersInfo().then((serviceResult) => {
-          serviceResult.result.subLayers.layers.map(function (layer, index) {
-            if (index === 15) {
+          result = serviceResult.result;
+          layer = serviceResult.result.subLayers.layers[15];
               layer.gamma = document.getElementById("gammaParam").value || 1;
-              serviceResult.result.subLayers.layers = [layer];
-              new ol.supermap.LayerInfoService(url)
-                .setLayersInfo(
+              result.subLayers.layers = [layer];
+              layerInfoService = new ol.supermap.LayerInfoService(url);
+              layerInfoService.setLayersInfo(
                   new ol.supermap.SetLayersInfoParameters({
-                    layersInfo: serviceResult.result
+                    layersInfo: result
                   })
                 )
                 .then((res) => {
                   if (res.result && res.result.newResourceID) {
-                    map.removeLayer(tempLayer);
+                    newResourceID = res.result.newResourceID;
                     tempLayer = new ol.layer.Tile({
                       source: new ol.source.TileSuperMapRest({
                         url: url,
@@ -93,10 +96,25 @@ <h5 class="panel-title text-center" data-i18n="resources.title_createTempLayer">
                     map.addLayer(tempLayer);
                   }
                 });
-            }
-          });
         });
       }
+
+      function updateTempLayer() {
+        if (!newResourceID) {
+          return;
+        }
+        var layer = result.subLayers.layers[0];
+        layer.gamma = document.getElementById("gammaParam").value || 1;
+        layerInfoService.setLayersInfo(
+                  new ol.supermap.SetLayersInfoParameters({
+                    layersInfo: result,
+                    resourceID: newResourceID,
+                    isTempLayers: true
+                  })
+                ).then((res) => {
+                  tempLayer.getSource().updateParams();
+                });
+      }
     </script>
   </body>
 </html>