保护地图瓦片API密钥：基于Laravel的服务器端代理实现

// routes/web.php

use App\Http\Controllers\TileProxyController;
use Illuminate\Support\Facades\Route;

Route::get('/tiles/breezometer/{style}/{z}/{x}/{y}.png', [TileProxyController::class, 'getBreezometerTile'])
     ->name('tile.breezometer');

// 这里的 {style} 可以用来区分不同的Breezometer瓦片图层，例如 'breezometer-aqi/current-conditions'
// {z}, {x}, {y} 分别代表瓦片的缩放级别、X坐标和Y坐标

php artisan make:controller TileProxyController

// app/Http/Controllers/TileProxyController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Symfony\Component\HttpFoundation\Response;

class TileProxyController extends Controller
{
    /**
     * 从Breezometer API获取瓦片并通过代理返回。
     *
     * @param string $style 瓦片样式，例如 'breezometer-aqi/current-conditions'
     * @param int $z 缩放级别
     * @param int $x X坐标
     * @param int $y Y坐标
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function getBreezometerTile(string $style, int $z, int $x, int $y): Response
    {
        // 从环境变量中获取API密钥，确保其安全
        $apiKey = env('BREEZOMETER_API_KEY');

        if (empty($apiKey)) {
            // 建议更详细的错误日志和处理
            return response('API Key not configured.', 500);
        }

        // 构建Breezometer的原始瓦片URL
        // 原始问题中Breezometer的瓦片路径示例为 'v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png'
        // 我们的路由设计为 '/tiles/breezometer/{style}/{z}/{x}/{y}.png'
        // 因此，前端请求时 {style} 参数应为 'breezometer-aqi/current-conditions'
        $breezometerBaseUrl = 'https://tiles.breezometer.com/v1/air-quality';
        $upstreamUrl = "{$breezometerBaseUrl}/{$style}/{$z}/{$x}/{$y}.png?key={$apiKey}";

        try {
            // 使用Laravel的HTTP客户端发送请求，设置超时
            $response = Http::timeout(10)->get($upstreamUrl);

            // 检查上游API响应状态
            if ($response->successful()) {
                // 获取瓦片内容和内容类型
                $tileContent = $response->body();
                // 尝试获取上游Content-Type，否则默认为image/png
                $contentType = $response->header('Content-Type', 'image/png'); 

                // 返回瓦片数据给客户端
                return response($tileContent)
                    ->header('Content-Type', $contentType)
                    ->header('Cache-Control', 'public, max-age=3600'); // 增加缓存头，可根据需求调整
            } else {
                // 上游API返回错误，将错误状态码返回给客户端
                return response('Failed to fetch tile from upstream API.', $response->status());
            }
        } catch (\Exception $e) {
            // 记录异常，例如使用 Log::error($e->getMessage());
            return response('Proxy error: ' . $e->getMessage(), 500);
        }
    }
}

// frontend/your-map-script.js

let map = L.map('map').setView([28.7041, 77.1025], 13);

// OpenStreetMap 基础瓦片层
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// Breezometer 热力图层，现在指向我们的Laravel代理
// 注意：这里的 'breezometer-aqi/current-conditions' 对应路由中的 {style} 参数
L.tileLayer('/tiles/breezometer/breezometer-aqi/current-conditions/{z}/{x}/{y}.png', {
    tms: false,
    opacity: 0.65,
    maxNativeZoom: 19,
    attribution: '© <a href="https://www.breezometer.com/">Breezometer</a>' // 添加正确的归属
}).addTo(map);