From 1980e2359664b4052716ecb7ab9747600fe5e0ea Mon Sep 17 00:00:00 2001
From: zhouxhere <zhouxhere@qq.com>
Date: Fri, 27 Jun 2025 18:20:54 +0800
Subject: [PATCH] =?UTF-8?q?fix&feat:=20maplibre=E5=A2=9E=E5=8A=A0level?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=9Bmbtiles=E3=80=81pmtiles=E7=9A=84tile?=
 =?UTF-8?q?json=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 service/mbtiles.go                            |  2 +-
 service/pmtiles.go                            |  2 +-
 .../maplibre/CustomNavigationControl.ts       | 47 +++++++++++++++++++
 web/components/maplibre/editor.vue            |  1 +
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 web/components/maplibre/CustomNavigationControl.ts

diff --git a/service/mbtiles.go b/service/mbtiles.go
index 3dff532..d7eeb77 100644
--- a/service/mbtiles.go
+++ b/service/mbtiles.go
@@ -30,7 +30,7 @@ func (s *MapService) GetMBTilesByName(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
 
-	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/api/v1/mbtiles/%s/{z}/{x}/{y}", name)}
+	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/map/mbtiles/%s/{z}/{x}/{y}", name)}
 
 	return c.JSON(http.StatusOK, data)
 }
diff --git a/service/pmtiles.go b/service/pmtiles.go
index 880d5d6..7c759d1 100644
--- a/service/pmtiles.go
+++ b/service/pmtiles.go
@@ -30,7 +30,7 @@ func (s *MapService) GetPMTilesByName(c echo.Context) error {
 		return c.String(http.StatusBadRequest, "Failed to get metadata")
 	}
 
-	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/api/v1/pmtiles/%s/{z}/{x}/{y}", name)}
+	data.Tiles = []string{fmt.Sprintf("http://localhost:8080/map/pmtiles/%s/{z}/{x}/{y}", name)}
 
 	return c.JSON(http.StatusOK, data)
 }
diff --git a/web/components/maplibre/CustomNavigationControl.ts b/web/components/maplibre/CustomNavigationControl.ts
new file mode 100644
index 0000000..661241e
--- /dev/null
+++ b/web/components/maplibre/CustomNavigationControl.ts
@@ -0,0 +1,47 @@
+import {
+  Map,
+  NavigationControl,
+  type NavigationControlOptions,
+} from "maplibre-gl";
+
+export class CustomNavigationControl extends NavigationControl {
+  _zoomLevel: HTMLButtonElement | undefined;
+
+  constructor(options: NavigationControlOptions) {
+    super(options);
+
+    if (this.options.showZoom) {
+      this._zoomLevel = document.createElement("button");
+      this._zoomLevel.textContent = "0.0";
+      this._zoomLevel.setAttribute("aria-label", "Zoom level");
+      this._zoomLevel.setAttribute("title", "Zoom level");
+      this._zoomLevel.setAttribute("aria-disabled", "false");
+      this._container.insertBefore(this._zoomLevel, this._zoomInButton);
+    }
+  }
+
+  override onAdd(map: Map) {
+    super.onAdd(map);
+
+    if (this.options.showZoom) {
+      this._updateZoomLevel();
+      this._map.on("zoom", () => this._updateZoomLevel());
+    }
+
+    return this._container;
+  }
+
+  override onRemove() {
+    if (this.options.showZoom) {
+      this._map.off("zoom", () => this._updateZoomLevel());
+    }
+
+    super.onRemove();
+  }
+
+  _updateZoomLevel() {
+    if (this._zoomLevel && this._map) {
+      this._zoomLevel.textContent = this._map.getZoom().toFixed(1);
+    }
+  }
+}
diff --git a/web/components/maplibre/editor.vue b/web/components/maplibre/editor.vue
index edcdb0f..bf224c9 100644
--- a/web/components/maplibre/editor.vue
+++ b/web/components/maplibre/editor.vue
@@ -41,6 +41,7 @@ const sprite = computed(() => {
         </div>
       </div>
     </div>
+    <div class="divider"></div>
     <div v-for="(layer, name) in layers" class="flex flex-col">
       <h4>{{ name.toString() }}-{{ layer.type }}</h4>
       <div class="flex flex-col" v-for="(value, key) in layer">