fix&feat: pmtile问题修复、地图style手动切换试用osm-bright-gl-style

util/maptool/tileReader.go

@@ -377,23 +377,26 @@ func (t *TileReader) getPMTilesHeader(name, key string) (*pmtiles.HeaderV3, erro
 	return &pmtilesheader, nil
 }
 
-func (t *TileReader) getPMTilesEntries(name, key string) ([]pmtiles.EntryV3, error) {
-	cacheKey := PMTilesEntries + key
-	if pmtilesentries, ok := t.tileCache.Get(cacheKey); ok {
-		return pmtilesentries.([]pmtiles.EntryV3), nil
-	}
+func (t *TileReader) getPMTilesEntries(name, key string, offset, length uint64) ([]pmtiles.EntryV3, error) {
 
 	pmtilesheader, err := t.getPMTilesHeader(name, key)
 	if err != nil {
 		return nil, err
 	}
 
+	if offset == pmtilesheader.RootOffset && length == pmtilesheader.RootLength {
+		cacheKey := PMTilesEntries + key
+		if pmtilesentries, ok := t.tileCache.Get(cacheKey); ok {
+			return pmtilesentries.([]pmtiles.EntryV3), nil
+		}
+	}
+
 	bucket, err := t.loadPMTiles(name)
 	if err != nil {
 		return nil, err
 	}
 
-	entriesReader, err := bucket.NewRangeReader(context.Background(), key+".pmtiles", int64(pmtilesheader.LeafDirectoryOffset), int64(pmtilesheader.LeafDirectoryLength))
+	entriesReader, err := bucket.NewRangeReader(context.Background(), key+".pmtiles", int64(offset), int64(length))
 	if err != nil {
 		return nil, err
 	}
@@ -405,9 +408,12 @@ func (t *TileReader) getPMTilesEntries(name, key string) ([]pmtiles.EntryV3, err
 	}
 	pmtilesentries := pmtiles.DeserializeEntries(bytes.NewBuffer(entriesData), pmtilesheader.InternalCompression)
 
-	t.cacheLock.Lock()
-	defer t.cacheLock.Unlock()
-	t.tileCache.Add(cacheKey, pmtilesentries)
+	if offset == pmtilesheader.RootOffset && length == pmtilesheader.RootLength {
+		cacheKey := PMTilesEntries + key
+		t.cacheLock.Lock()
+		defer t.cacheLock.Unlock()
+		t.tileCache.Add(cacheKey, pmtilesentries)
+	}
 
 	return pmtilesentries, nil
 }
@@ -453,39 +459,60 @@ func (t *TileReader) getPMTilesTile(name, key string, z, x, y int) ([]byte, erro
 		return tileData.([]byte), nil
 	}
 
+	pmtilesheader, err := t.getPMTilesHeader(name, key)
+	if err != nil {
+		return nil, err
+	}
+
 	bucket, err := t.loadPMTiles(name)
 	if err != nil {
 		return nil, err
 	}
 
-	pmtilesentries, err := t.getPMTilesEntries(name, key)
-	if err != nil {
-		return nil, err
+	zValue, _ := strconv.ParseUint(strconv.Itoa(z), 10, 8)
+	xValue, _ := strconv.ParseUint(strconv.Itoa(x), 10, 32)
+	yValue, _ := strconv.ParseUint(strconv.Itoa(y), 10, 32)
+
+	keyID := pmtiles.ZxyToID(uint8(zValue), uint32(xValue), uint32(yValue))
+
+	offset := pmtilesheader.RootOffset
+	length := pmtilesheader.RootLength
+
+	for depth := 0; depth <= 3; depth++ {
+		entries, err := t.getPMTilesEntries(name, key, offset, length)
+		if err != nil {
+			return nil, err
+		}
+
+		entry, ok := pmtiles.FindTile(entries, keyID)
+		if !ok {
+			return nil, errors.New("tile not found")
+		}
+
+		if entry.RunLength > 0 {
+			tileReader, err := bucket.NewRangeReader(context.Background(), key+".pmtiles", int64(pmtilesheader.TileDataOffset+entry.Offset), int64(entry.Length))
+			if err != nil {
+				return nil, err
+			}
+			defer tileReader.Close()
+
+			tileData, err := io.ReadAll(tileReader)
+			if err != nil {
+				return nil, err
+			}
+
+			t.cacheLock.Lock()
+			defer t.cacheLock.Unlock()
+			t.tileCache.Add(cacheKey, tileData)
+
+			return tileData, nil
+		}
+
+		offset = pmtilesheader.LeafDirectoryOffset + entry.Offset
+		length = uint64(entry.Length)
 	}
 
-	keyID := pmtiles.ZxyToID(uint8(z), uint32(x), uint32(y))
-
-	entry, ok := pmtiles.FindTile(pmtilesentries, keyID)
-	if !ok {
-		return nil, errors.New("tile not found")
-	}
-
-	tileReader, err := bucket.NewRangeReader(context.Background(), key+".pmtiles", int64(entry.Offset), int64(entry.Length))
-	if err != nil {
-		return nil, err
-	}
-	defer tileReader.Close()
-
-	tileData, err := io.ReadAll(tileReader)
-	if err != nil {
-		return nil, err
-	}
-
-	t.cacheLock.Lock()
-	defer t.cacheLock.Unlock()
-	t.tileCache.Add(cacheKey, tileData)
-
-	return tileData, nil
+	return nil, errors.New("tile not found")
 }
 
 func parseVersion(version string) string {

web/components/maplibre/map.vue

@@ -28,7 +28,8 @@ onMounted(async () => {
   if (!mapContainer.value) return;
   map.value = new maplibregl.Map({
     container: mapContainer.value, // container id
-    style: "https://demotiles.maplibre.org/style.json", // style URL
+    // style: "https://demotiles.maplibre.org/style.json", // style URL
+    style: "/style.json",
     center: [120.147376, 30.272934], // starting position [lng, lat]
     zoom: 7, // starting zoom
   });
@@ -107,42 +108,43 @@ const handleData = () => {
   //   },
   // });
 
-  map.value.addSource("zhejiang-pm", {
-    type: "vector",
-    url: "/api/v1/pmtiles/zhejiang-pm",
-  });
-  map.value.addLayer({
-    id: "water",
-    type: "fill",
-    filter: ["==", "$type", "Polygon"],
-    source: "zhejiang-pm",
-    "source-layer": "water",
-    paint: {
-      "fill-color": "#80deea",
-    },
-  });
-  map.value.addLayer({
-    id: "water_river",
-    type: "line",
-    source: "zhejiang-pm",
-    "source-layer": "water",
-    minzoom: 9,
-    filter: ["in", "kind", "river"],
-    paint: {
-      "line-color": "#80deea",
-      "line-width": [
-        "interpolate",
-        ["exponential", 1.6],
-        ["zoom"],
-        9,
-        0,
-        9.5,
-        1,
-        18,
-        12,
-      ],
-    },
-  });
+  // map.value.addSource("zhejiang-pm", {
+  //   type: "vector",
+  //   url: "/api/v1/pmtiles/zhejiang-pm",
+  //   // url: "http://localhost:8080/zhejiang-pm.json"
+  // });
+  // map.value.addLayer({
+  //   id: "water",
+  //   type: "fill",
+  //   filter: ["==", "$type", "Polygon"],
+  //   source: "zhejiang-pm",
+  //   "source-layer": "water",
+  //   paint: {
+  //     "fill-color": "#80deea",
+  //   },
+  // });
+  // map.value.addLayer({
+  //   id: "water_river",
+  //   type: "line",
+  //   source: "zhejiang-pm",
+  //   "source-layer": "water",
+  //   minzoom: 9,
+  //   filter: ["in", "kind", "river"],
+  //   paint: {
+  //     "line-color": "#80deea",
+  //     "line-width": [
+  //       "interpolate",
+  //       ["exponential", 1.6],
+  //       ["zoom"],
+  //       9,
+  //       0,
+  //       9.5,
+  //       1,
+  //       18,
+  //       12,
+  //     ],
+  //   },
+  // });
   // map.value.addLayer({
   //   id: "world_cities",
   //   type: "symbol",