如何在deck.gl地球视图中使用NASA Blue Marble自定义底图？

1. 准备纹理资源 #

下载NASA的Blue Marble高清纹理图（建议选用等距圆柱投影版本），将其放置在项目的静态资源目录中，例如 public/textures/blue-marble.jpg。

2. 安装依赖 #

确保安装deck.gl核心及地理图层相关包：

npm install @deck.gl/core @deck.gl/geo-layers @luma.gl/core

3. 纯TypeScript实现（非React环境） #

import { Deck } from '@deck.gl/core';
import { EarthLayer } from '@deck.gl/geo-layers';
import { Texture2D } from '@luma.gl/core';

// 初始化Deck实例
const initDeck = async () => {
  const canvas = document.getElementById('deck-canvas') as HTMLCanvasElement;
  if (!canvas) return;

  const gl = canvas.getContext('webgl2');
  if (!gl) throw new Error('WebGL2 not supported');

  // 加载Blue Marble纹理
  const blueMarbleTexture = new Texture2D(gl, {
    data: '/textures/blue-marble.jpg',
    parameters: {
      TEXTURE_MIN_FILTER: gl.LINEAR_MIPMAP_LINEAR,
      TEXTURE_MAG_FILTER: gl.LINEAR,
      TEXTURE_WRAP_S: gl.CLAMP_TO_EDGE,
      TEXTURE_WRAP_T: gl.CLAMP_TO_EDGE
    }
  });
  await blueMarbleTexture.load();

  new Deck({
    canvas,
    initialViewState: {
      longitude: 0,
      latitude: 0,
      zoom: 0.5,
      pitch: 0,
      bearing: 0
    },
    layers: [
      new EarthLayer({
        id: 'blue-marble-earth',
        texture: blueMarbleTexture
      })
    ]
  });
};

initDeck();

4. React + TypeScript实现 #

import React, { useEffect, useRef } from 'react';
import { DeckGL } from '@deck.gl/react';
import { EarthLayer } from '@deck.gl/geo-layers';
import { Texture2D } from '@luma.gl/core';

const BlueMarbleMap = () => {
  const textureRef = useRef<Texture2D | null>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    const gl = canvasRef.current.getContext('webgl2');
    if (!gl) return;

    const loadTexture = async () => {
      const texture = new Texture2D(gl, {
        data: '/textures/blue-marble.jpg',
        parameters: {
          TEXTURE_MIN_FILTER: gl.LINEAR_MIPMAP_LINEAR,
          TEXTURE_MAG_FILTER: gl.LINEAR,
          TEXTURE_WRAP_S: gl.CLAMP_TO_EDGE,
          TEXTURE_WRAP_T: gl.CLAMP_TO_EDGE
        }
      });
      await texture.load();
      textureRef.current = texture;
    };

    loadTexture();
  }, []);

  const layers = textureRef.current ? [
    new EarthLayer({
      id: 'blue-marble-layer',
      texture: textureRef.current
    })
  ] : [];

  return (
    <DeckGL
      ref={canvasRef}
      initialViewState={{
        longitude: 0,
        latitude: 0,
        zoom: 0.5,
        pitch: 0,
        bearing: 0
      }}
      layers={layers}
    />
  );
};

export default BlueMarbleMap;

关键注意事项 #

• 必须使用**等距圆柱投影（Plate Carrée）**的Blue Marble图像，否则纹理会出现拉伸错位
• 确保纹理文件路径正确，避免跨域访问问题
• 异步加载纹理时需等待加载完成再传入EarthLayer，避免渲染异常

内容的提问来源于stack exchange，提问作者nphias