Giải mã map layers: nhúng custom maps vào Google Maps Flutter qua tile overlays

import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:http/http.dart' as http;
class NetworkTileProvider implements TileProvider {
  final String urlTemplate;
  
  NetworkTileProvider({required this.urlTemplate});
  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {
    // Replace the placeholders with the actual coordinates
    final String url = urlTemplate
        .replaceAll('{x}', x.toString())
        .replaceAll('{y}', y.toString())
        .replaceAll('{z}', zoom.toString());
    try {
      final uri = Uri.parse(url);
      final response = await http.get(uri);
      if (response.statusCode == 200) {
        final Uint8List bytes = response.bodyBytes;
        // 256x256 is the standard tile size for Google Maps
        return Tile(256, 256, bytes);
      } else {
        // Return an empty tile if the server responds with an error (e.g., 404)
        return TileProvider.noTile;
      }
    } catch (e) {
      // Handle network errors gracefully
      print('Error loading tile $url: $e');
      return TileProvider.noTile;
    }
  }
}

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class CustomMapScreen extends StatefulWidget {
  const CustomMapScreen({Key? key}) : super(key: key);
  @override
  State<CustomMapScreen> createState() => _CustomMapScreenState();
}
class _CustomMapScreenState extends State<CustomMapScreen> {
  late Set<TileOverlay> _tileOverlays;
  @override
  void initState() {
    super.initState();
    _initTileOverlay();
  }
  void _initTileOverlay() {
    // Example using OpenStreetMap tiles (replace with your custom server)
    final String templateUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
    
    final TileOverlay customTileOverlay = TileOverlay(
      tileOverlayId: const TileOverlayId('custom_map_layer'),
      tileProvider: NetworkTileProvider(urlTemplate: templateUrl),
      // Set zIndex higher than 0 if layering on top of the standard Google Map
      zIndex: 1, 
      // Set to true to make the layer completely opaque
      transparency: 0.0, 
    );
    setState(() {
      _tileOverlays = {customTileOverlay};
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Tile Overlay'),
      ),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(10.762622, 106.660172), // Coordinates for Ho Chi Minh City
          zoom: 13.0,
        ),
        // Use MapType.none if your tiles replace the base map completely
        mapType: MapType.normal, 
        tileOverlays: _tileOverlays,
        onMapCreated: (GoogleMapController controller) {
          // Handle map creation
        },
      ),
    );
  }
}

import 'dart:math';
import 'dart:ui' as ui;
class MercatorProjection {
  static const double pi = 3.1415926535897932;
  /// Converts a Lat/Lng to a normalized World Coordinate (0.0 to 1.0)
  static ui.Offset latLngToWorld(double lat, double lng) {
    double siny = sin(lat * pi / 180.0);
    // Truncate to prevent infinity at the extreme poles
    siny = min(max(siny, -0.9999), 0.9999);
    
    return ui.Offset(
      0.5 + lng / 360.0,
      0.5 - log((1.0 + siny) / (1.0 - siny)) / (4.0 * pi),
    );
  }
}

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class ClientSlicingTileProvider implements TileProvider {
  final ui.Image rootImage;
  
  // The geographic boundaries of your root image
  final double rootLatTop;
  final double rootLngLeft;
  final double rootLatBottom;
  final double rootLngRight;
  ClientSlicingTileProvider({
    required this.rootImage,
    required this.rootLatTop,
    required this.rootLngLeft,
    required this.rootLatBottom,
    required this.rootLngRight,
  });
  @override
  Future<Tile> getTile(int x, int y, int? zoom) async {
    if (zoom == null) return TileProvider.noTile;
    // 1. Calculate Root Image bounds in World Coordinates (0.0 - 1.0)
    final rootTL = MercatorProjection.latLngToWorld(rootLatTop, rootLngLeft);
    final rootBR = MercatorProjection.latLngToWorld(rootLatBottom, rootLngRight);
    final rootWorldLeft = rootTL.dx;
    final rootWorldTop = rootTL.dy;
    final rootWorldRight = rootBR.dx;
    final rootWorldBottom = rootBR.dy;
    // 2. Calculate requested Tile bounds in World Coordinates
    final double n = pow(2, zoom).toDouble();
    final double tileWorldLeft = x / n;
    final double tileWorldTop = y / n;
    final double tileWorldRight = (x + 1) / n;
    final double tileWorldBottom = (y + 1) / n;
    // 3. Find the Intersection between the Tile and the Root Image
    final double intersectLeft = max(tileWorldLeft, rootWorldLeft);
    final double intersectTop = max(tileWorldTop, rootWorldTop);
    final double intersectRight = min(tileWorldRight, rootWorldRight);
    final double intersectBottom = min(tileWorldBottom, rootWorldBottom);
    // If there is no overlap, this tile is outside our custom map area
    if (intersectLeft >= intersectRight || intersectTop >= intersectBottom) {
      return TileProvider.noTile;
    }
    // 4. Map the intersection back to Root Image Pixels (Source Rect)
    final double rootWorldWidth = rootWorldRight - rootWorldLeft;
    final double rootWorldHeight = rootWorldBottom - rootWorldTop;
    final Rect srcRect = Rect.fromLTRB(
      (intersectLeft - rootWorldLeft) / rootWorldWidth * rootImage.width,
      (intersectTop - rootWorldTop) / rootWorldHeight * rootImage.height,
      (intersectRight - rootWorldLeft) / rootWorldWidth * rootImage.width,
      (intersectBottom - rootWorldTop) / rootWorldHeight * rootImage.height,
    );
    // 5. Map the intersection to the 256x256 Tile Pixels (Destination Rect)
    final double tileWorldWidth = tileWorldRight - tileWorldLeft;
    final double tileWorldHeight = tileWorldBottom - tileWorldTop;
    final Rect dstRect = Rect.fromLTRB(
      (intersectLeft - tileWorldLeft) / tileWorldWidth * 256,
      (intersectTop - tileWorldTop) / tileWorldHeight * 256,
      (intersectRight - tileWorldLeft) / tileWorldWidth * 256,
      (intersectBottom - tileWorldTop) / tileWorldHeight * 256,
    );
    // 6. Paint the sliced portion onto a new Canvas
    final recorder = ui.PictureRecorder();
    final canvas = Canvas(recorder);
    
    // Optional: Add a transparent background if your image has gaps
    final paint = Paint()..filterQuality = FilterQuality.high;
    
    canvas.drawImageRect(rootImage, srcRect, dstRect, paint);
    // 7. Convert the Canvas back to bytes for Google Maps
    final picture = recorder.endRecording();
    final image = await picture.toImage(256, 256);
    final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    if (byteData != null) {
      return Tile(256, 256, byteData.buffer.asUint8List());
    }
    return TileProvider.noTile;
  }
}