Leaflet地图瓦片服务API密钥安全：基于Laravel的代理实现教程

L.tileLayer(`https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png?key=${API_KEY}`, { tms: false, opacity: 0.65, maxNativeZoom: 19 }).addTo(map);

BREEZOMETER_API_KEY=your_breezometer_api_key_here

// routes/web.php 或 routes/api.php
use App\Http\Controllers\TileProxyController;

// 定义一个瓦片代理路由，路径参数对应Leaflet的瓦片结构
Route::get('/tiles/breezometer/{z}/{x}/{y}.png', [TileProxyController::class, 'getBreezometerTile'])
    ->name('breezometer.tile.proxy')
    ->where(['z' => '\d+', 'x' => '\d+', 'y' => '\d+']); // 确保参数为数字

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use Illuminate\Http\Response;

class TileProxyController extends Controller
{
    /**
     * 代理Breezometer瓦片请求，隐藏API密钥。
     *
     * @param Request $request
     * @param int $z 缩放级别
     * @param int $x 列号
     * @param int $y 行号
     * @return Response
     */
    public function getBreezometerTile(Request $request, $z, $x, $y)
    {
        // 从环境变量中获取API密钥
        $apiKey = env('BREEZOMETER_API_KEY');

        // 检查API密钥是否已配置
        if (empty($apiKey)) {
            // 如果密钥未配置，返回服务器内部错误
            return response('Breezometer API Key not configured.', 500);
        }

        // 构造完整的Breezometer瓦片API URL
        $breezometerApiUrl = "https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{$z}/{$x}/{$y}.png?key={$apiKey}";

        try {
            // 使用Laravel的Http客户端发送GET请求到Breezometer API
            $response = Http::timeout(10)->get($breezometerApiUrl); // 设置超时时间

            // 检查请求是否成功
            if ($response->successful()) {
                // 获取原始响应的Content-Type，如果不存在则默认为image/png
                $contentType = $response->header('Content-Type') ?? 'image/png';

                // 返回图像内容，并设置正确的Content-Type头
                return response($response->body())
                            ->header('Content-Type', $contentType)
                            ->header('Cache-Control', 'public, max-age=3600, s-maxage=3600'); // 添加缓存头，提高性能
            } else {
                // 如果API请求失败，返回相应的HTTP状态码和错误信息
                return response('Failed to fetch tile from Breezometer API.', $response->status());
            }
        } catch (\Exception $e) {
            // 捕获网络错误或其他异常，返回服务器内部错误
            return response('Error fetching tile: ' . $e->getMessage(), 500);
        }
    }
}

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: '© OpenStreetMap'
}).addTo(map);

// 使用您的Laravel代理URL来加载Breezometer瓦片
L.tileLayer('/tiles/breezometer/{z}/{x}/{y}.png', {
    tms: false,
    opacity: 0.65,
    maxNativeZoom: 19,
    attribution: '© Breezometer' // 更新attribution
}).addTo(map);

// 在控制器构造函数中应用中间件
public function __construct()
{
    $this->middleware('auth:api')->only('getBreezometerTile'); // 示例：仅允许经过API认证的用户访问
    // 或 $this->middleware('throttle:60,1')->only('getBreezometerTile'); // 示例：限流
}