Modifying the results of map.getStyle() modifies the style

[gavinr-maps]

maplibre-gl-js version: 3.0.0 and higher.

• More specifically, this issue was introduced in Lazy serialization of layers #2306

browser: all

Steps to Trigger Behavior

1. Call map.getStyle() and assign it to a variable.
2. Modify that variable in some way.
   • Expected: modifying that variable should not change style. Only calling map.setStyle() should do that.
   • Actual: modifying that variable does change style.

Link to Demonstration

1. Open https://jsbin.com/zeyusuf/4/edit?html,output , which is using [email protected]. Note that even though I'm modifying the variable like this:

     const newStyle = map.getStyle();
     
     newStyle.layers[0].paint = {
       "fill-color": '#AAAAAA',
     };

   ... calling map.getStyle() after I make that change still returns the original value. This is the correct behavior because I have not called map.setStyle().

2. Open https://jsbin.com/zeyusuf/6/edit?html,output , which is using [email protected] but otherwise the exact some code as above.

   • Expected: calling map.getStyle() after the variable is changed still returns the original value.
   • Actual: calling map.getStyle() after the variable is changed does not return the original value ❌.

Note

• I think this is the core issue causing the problems in Calling .setStyle() on modified object broken at v3 #4472.
• I think this issue was introduced in Lazy serialization of layers #2306

[HarelM]

Feel free to submit a PR to fix this.
Cc: @zhangyiatmicrosoft.