fix&feat: maplibre增加level展示；mbtiles、pmtiles的tilejson修改

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)
 }

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)
 }

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);
+    }
+  }
+}

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">