diff --git a/package-lock.json b/package-lock.json
index 3f2c6b9ad9..ce8251e0f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "bbox": "0.4.0",
         "clsx": "2.1.1",
         "immer": "10.0.4",
-        "mapbox-gl": "2.15.0",
+        "mapbox-gl": "3.4.0",
         "react": "18.3.1",
         "react-custom-scrollbars-2": "4.5.0",
         "react-dom": "18.3.1",
@@ -37,7 +37,7 @@
       },
       "devDependencies": {
         "@types/geojson": "7946.0.14",
-        "@types/mapbox-gl": "2.7.21",
+        "@types/mapbox-gl": "3.1.0",
         "@types/react": "18.3.3",
         "@types/react-dom": "18.3.0",
         "@types/react-virtualized": "9.21.30",
@@ -1816,18 +1816,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mapbox/geojson-rewind": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
-      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
-      "dependencies": {
-        "get-stream": "^6.0.1",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "geojson-rewind": "geojson-rewind"
-      }
-    },
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -1837,9 +1825,10 @@
       }
     },
     "node_modules/@mapbox/mapbox-gl-supported": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
-      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz",
+      "integrity": "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/@mapbox/point-geometry": {
       "version": "0.1.0",
@@ -2867,9 +2856,10 @@
       "dev": true
     },
     "node_modules/@types/mapbox-gl": {
-      "version": "2.7.21",
-      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.7.21.tgz",
-      "integrity": "sha512-Dx9MuF2kKgT/N22LsMUB4b3acFZh9clVqz9zv1fomoiPoBrJolwYxpWA/9LPO/2N0xWbKi4V+pkjTaFkkx/4wA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.1.0.tgz",
+      "integrity": "sha512-hI6cQDjw1bkJw7MC/eHMqq5TWUamLwsujnUUeiIX2KDRjxRNSYMjnHz07+LATz9I9XIsKumOtUz4gRYnZOJ/FA==",
+      "license": "MIT",
       "dependencies": {
         "@types/geojson": "*"
       }
@@ -3798,6 +3788,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/cheap-ruler": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-3.0.2.tgz",
+      "integrity": "sha512-02T332h1/HTN6cDSufLP8x4JzDs2+VC+8qZ/N0kWIVPyc2xUkWwWh3B2fJxR7raXkL4Mq7k554mfuM9ofv/vGg==",
+      "license": "ISC"
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -5097,6 +5093,12 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5327,6 +5329,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6857,6 +6860,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6913,31 +6922,37 @@
       }
     },
     "node_modules/mapbox-gl": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
-      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.4.0.tgz",
+      "integrity": "sha512-QWgL28zg/zuIOHeF8DXPvHy1UHTgO5p4Oy6ifCAHwI9/hoI9/Fruya0yI4HkDtX1OgzTLO6SHO13A781BGJvyw==",
+      "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
-        "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
-        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/mapbox-gl-supported": "^3.0.0",
         "@mapbox/point-geometry": "^0.1.0",
         "@mapbox/tiny-sdf": "^2.0.6",
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
+        "cheap-ruler": "^3.0.1",
         "csscolorparser": "~1.0.3",
         "earcut": "^2.2.4",
+        "fflate": "^0.8.1",
         "geojson-vt": "^3.2.1",
         "gl-matrix": "^3.4.3",
         "grid-index": "^1.1.0",
         "kdbush": "^4.0.1",
+        "lodash.clonedeep": "^4.5.0",
         "murmurhash-js": "^1.0.0",
         "pbf": "^3.2.1",
         "potpack": "^2.0.0",
         "quickselect": "^2.0.0",
         "rw": "^1.3.3",
+        "serialize-to-js": "^3.1.2",
         "supercluster": "^8.0.0",
+        "tiny-lru": "^11.2.6",
         "tinyqueue": "^2.0.3",
+        "tweakpane": "^4.0.3",
         "vt-pbf": "^3.1.3"
       }
     },
@@ -8292,6 +8307,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/serialize-to-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
+      "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
@@ -9004,6 +9028,15 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "dev": true
     },
+    "node_modules/tiny-lru": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/tiny-lru/-/tiny-lru-11.2.6.tgz",
+      "integrity": "sha512-0PU3c9PjMnltZaFo2sGYv/nnJsMjG0Cxx8X6FXHPPGjFyoo1SJDxvUXW1207rdiSxYizf31roo+GrkIByQeZoA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -9126,6 +9159,15 @@
       "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz",
       "integrity": "sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA=="
     },
+    "node_modules/tweakpane": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-4.0.3.tgz",
+      "integrity": "sha512-BlcWOAe8oe4c+k9pmLBARGdWB6MVZMszayekkixQXTgkxTaYoTUpHpwVEp+3HkoamZkomodpbBf0CkguIHTgLg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/cocopon"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 14c5259a24..b3a7ff577f 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   "homepage": "https://github.com/OTrainFans/OTrainMap#readme",
   "devDependencies": {
     "@types/geojson": "7946.0.14",
-    "@types/mapbox-gl": "2.7.21",
+    "@types/mapbox-gl": "3.1.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-virtualized": "9.21.30",
@@ -57,7 +57,7 @@
     "bbox": "0.4.0",
     "clsx": "2.1.1",
     "immer": "10.0.4",
-    "mapbox-gl": "2.15.0",
+    "mapbox-gl": "3.4.0",
     "react": "18.3.1",
     "react-custom-scrollbars-2": "4.5.0",
     "react-dom": "18.3.1",