自定义瓦片地球仪

使用栅格瓦片创建自定义地球仪;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>自定义瓦片地球仪</title>
    <meta property="og:description" content="使用栅格瓦片创建自定义地球仪" />
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    // 创建地图实例并设置为地球仪投影
    const map = new maplibregl.Map({
        container: 'map',
        center: [0, 0],
        zoom: 2,
        pitch: 0,
        projection: 'globe',
        // 使用自定义 TileJSON 实现自定义地球仪
        style: {
            version: 8,
            glyphs: 'https://tiles.stadiamaps.com/fonts/{fontstack}/{range}.pbf',
            sources: {
                'basemap': {
                    type: 'raster',
                    tiles: ['https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'],
                    tileSize: 256
                },
                'raster-tiles': {
                    type: 'raster',
                    tiles: ['https://gibs-{subdomain}.earthdata.nasa.gov/wmts/epsg3857/best/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/{{date}}/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg'],
                    tileSize: 256,
                    // 使用子域参数加速下载
                    url: 'https://gibs-{a-c}.earthdata.nasa.gov/wmts/epsg3857/best/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/{{date}}/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg'
                }
            },
            layers: [
                {
                    id: 'basemap-layer',
                    type: 'raster',
                    source: 'basemap',
                    minzoom: 0,
                    maxzoom: 22
                },
                {
                    id: 'raster-tiles-layer',
                    type: 'raster',
                    source: 'raster-tiles',
                    minzoom: 0,
                    maxzoom: 22,
                    paint: {
                        'raster-opacity': 0.7
                    }
                }
            ]
        }
    });

    map.on('style.load', () => {
        // 设置大气层以获得更好的视觉效果
        map.setFog({
            color: 'rgb(186, 210, 235)', // 天蓝色
            'high-color': 'rgb(36, 92, 223)', // 高处的深蓝色
            'horizon-blend': 0.02, // 地平线混合
            'space-color': 'rgb(11, 11, 25)', // 太空的颜色
            'star-intensity': 0.6 // 星星强度
        });

        // 更新NASA GIBS日期
        const date = new Date();
        const yesterday = new Date(date);
        yesterday.setDate(date.getDate() - 1);
        const yesterdayText = yesterday.toISOString().split('T')[0].replace(/-/g, '');

        // 更新源URL中的日期
        const source = map.getSource('raster-tiles');
        source._options.tiles[0] = source._options.tiles[0].replace('{{date}}', yesterdayText);
        
        // 重新加载瓦片
        source.load();
    });
</script>
</body>
</html>