地图纹理
素材制作指南
与最佳实践

设计哲学与纹理体系架构

OWMap 的地图纹理不是地理数据的简单可视化——它是「深空科技 × 人文诗意」美学哲学的物质载体。 每一像素都承担着在用户与地球之间建立情感连接的使命。

1.1 纹理美学的三个层次

OWMap 的地图纹理体系由三个相互叠加的视觉层次构成，每个层次服务于不同的设计目标：

1.2 OWMap 纹理规格标准

数据源完整清单

获取高质量地图纹理素材的关键在于选择合适的数据源。以下覆盖免费开源、 商业授权与 OWMap 自研三个维度，并标注了每个数据源对 OWMap 场景的适配度。

2.1 数据源对比速查表

2.2 推荐数据源详解

2.3 NASA Blue Marble 获取流程

Three.js 地球纹理完整制作方案

OWMap 地球仪的核心渲染引擎基于 Three.js WebGL。本章提供从纹理加载、着色器编写 到多层叠加的完整生产级代码，已在 OWMap BSL1 Globe v2 中验证。

3.1 多层纹理材质系统

OWMap 地球采用 PhongMaterial + 自定义 UV 着色 方案，兼顾渲染质量与移动端兼容性。

JavaScript · Three.js r128+import * as THREE from 'three';

// ── 纹理加载管理器（带进度回调）──
const manager = new THREE.LoadingManager();
const loader  = new THREE.TextureLoader(manager);

// ── 异步加载所有纹理层 ──
async function loadEarthTextures() {
  const [baseMap, normalMap, specMap, cloudMap] = await Promise.all([
    loader.loadAsync('/textures/earth-base-4k.webp'),
    loader.loadAsync('/textures/earth-normal-2k.webp'),
    loader.loadAsync('/textures/earth-specular-2k.webp'),
    loader.loadAsync('/textures/earth-clouds-2k.webp'),
  ]);

  // ── 纹理参数 ──
  [baseMap, normalMap, specMap, cloudMap].forEach(tex => {
    tex.anisotropy  = 16; // 最大各向异性过滤，提升斜视质量
    tex.minFilter   = THREE.LinearMipmapLinearFilter;
    tex.magFilter   = THREE.LinearFilter;
    tex.colorSpace  = THREE.SRGBColorSpace; // r152+
  });

  return { baseMap, normalMap, specMap, cloudMap };
}

// ── 地球体材质 ──
function createEarthMaterial(textures) {
  return new THREE.MeshPhongMaterial({
    map:        textures.baseMap,
    normalMap:  textures.normalMap,
    normalScale: new THREE.Vector2(0.6, 0.6),
    specularMap: textures.specMap,
    specular:   new THREE.Color(0x1a3050),
    shininess:  12,
  });
}

// ── 云层（独立 Mesh，轻微偏移半径）──
function createCloudLayer(cloudTexture) {
  const geo = new THREE.SphereGeometry(1.008, 48, 48);
  const mat = new THREE.MeshPhongMaterial({
    map:         cloudTexture,
    transparent: true,
    opacity:     0.18,
    blending:    THREE.AdditiveBlending,
    depthWrite:  false,
  });
  const clouds = new THREE.Mesh(geo, mat);
  clouds.rotation.y = 0.1; // 初始相位偏移
  return clouds;
}

3.2 程序化地球纹理生成（Canvas API）

在纹理文件未加载完成、或 CDN 不可用时，OWMap 使用程序化 Canvas 生成纹理作为占位与降级方案。 这也是 globe.js 的内建实现。

JavaScript · Canvas 2D API/**
 * OWMap 程序化地球纹理生成器
 * 输出：CanvasTexture（可直接传入 Three.js MeshPhongMaterial.map）
 * 目标效果：「深空科技 × 人文诗意」——克制的大陆轮廓，艺术化非写实
 */
function makeProceduralEarthTexture(w = 4096, h = 2048) {
  const cv  = document.createElement('canvas');
  cv.width  = w; cv.height = h;
  const ctx = cv.getContext('2d');

  // ── Step 1：深空海洋渐变 ──
  const ocean = ctx.createLinearGradient(0, 0, 0, h);
  ocean.addColorStop(0,   '#010814'); // 极地深蓝
  ocean.addColorStop(0.5, '#03101e'); // 赤道深海
  ocean.addColorStop(1,   '#010814');
  ctx.fillStyle = ocean;
  ctx.fillRect(0, 0, w, h);

  // ── Step 2：大陆层（低对比度填充 + 边界线描边）──
  const CONTINENTS = getContinentPolygons(); // 标准化百分比坐标
  ctx.fillStyle   = '#091828'; // 石墨暖调
  ctx.strokeStyle = 'rgba(180,210,240,0.18)';
  ctx.lineWidth   = 1.5;
  for (const pts of CONTINENTS) {
    ctx.beginPath();
    pts.forEach(([px, py], i) => {
      const x = (px / 100) * w, y = (py / 100) * h;
      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    });
    ctx.closePath();
    ctx.fill(); ctx.stroke();
  }

  // ── Step 3：经纬网格（极低对比度）──
  ctx.strokeStyle = 'rgba(40,80,140,0.07)';
  ctx.lineWidth   = 0.8;
  for (let lon = 0; lon <= 360; lon += 15) {
    const x = (lon / 360) * w;
    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
  }
  for (let lat = -90; lat <= 90; lat += 15) {
    const y = ((lat + 90) / 180) * h;
    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
  }

  // ── Step 4：赤道 + 本初子午线强调线 ──
  ctx.strokeStyle = 'rgba(100,160,220,0.12)';
  ctx.lineWidth   = 1;
  ctx.beginPath(); ctx.moveTo(0, h/2); ctx.lineTo(w, h/2); ctx.stroke();

  // ── Step 5：极点冰盖（柔和白色径向渐变）──
  [[w/2, 0], [w/2, h]].forEach(([cx, cy]) => {
    const r = h * 0.1;
    const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
    g.addColorStop(0,   'rgba(200,220,240,0.35)');
    g.addColorStop(1,   'rgba(200,220,240,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, w, h);
  });

  return new THREE.CanvasTexture(cv);
}

MapLibre GL 风格系统与矢量纹理

OWMap 的 2D 地图层（GeoCore.RenderKit）基于 MapLibre GL JS， 通过 Sprite + Symbol + 自定义 Style JSON 实现与品牌视觉完全一致的地图渲染。

4.1 OWMap 基础风格 JSON 模板

JSON · MapLibre GL Style v8{
  "version": 8,
  "name": "OWMap Deep Space",
  "metadata": { "owmap:version": "1.0.0" },
  "glyphs": "https://fonts.owmap.io/glyphs/{fontstack}/{range}.pbf",
  "sprite": "https://cdn.owmap.io/sprites/owmap-v1",
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tiles.owmap.io/v1/tiles.json"
    }
  },
  "layers": [
    {
      "id": "background", "type": "background",
      "paint": { "background-color": "#050D18" }
    },
    {
      "id": "water", "type": "fill",
      "source": "openmaptiles", "source-layer": "water",
      "paint": {
        "fill-color": "#03101e",
        "fill-opacity": 0.9
      }
    },
    {
      "id": "landcover", "type": "fill",
      "source": "openmaptiles", "source-layer": "landcover",
      "paint": {
        "fill-color": ["match", ["get", "class"],
          "forest", "#071420",
          "grass",  "#081828",
          "wetland","#060f1c",
          "#091828"
        ],
        "fill-opacity": 0.85
      }
    },
    {
      "id": "country-boundary", "type": "line",
      "source": "openmaptiles", "source-layer": "boundary",
      "filter": ["==", ["get", "admin_level"], 2],
      "paint": {
        "line-color": "rgba(180,210,240,0.12)",
        "line-width": ["interpolate", ["linear"], ["zoom"],
          2, 0.6, 8, 1.2],
        "line-dasharray": [4, 3]
      }
    },
    {
      "id": "story-markers", "type": "symbol",
      "source": "owmap-stories",
      "layout": {
        "icon-image": "owmap-marker-{cultural_circle}",
        "icon-size": ["interpolate", ["linear"], ["get", "heat_score"],
          0, 0.6, 100, 1.2],
        "icon-allow-overlap": false
      }
    }
  ]
}

4.2 自定义 Sprite 图集制作

OWMap 的地图标记图标（Marker Icons）以 Sprite 图集形式管理， 每个文化圈对应一个颜色变体。制作流程如下：

文化圈配色方案与纹理着色

OWMap 将全球内容组织为六大文化圈，每个文化圈对应一套独特的配色系统， 用于地图纹理着色、标记点位颜色和故事卡片主题色。

5.1 六大文化圈色彩令牌

5.2 文化圈纹理蒙版生成

文化圈着色通过在基础地球纹理上叠加带透明通道的文化圈蒙版实现。 蒙版由 Natural Earth 矢量数据转换而来，透明度 30-40%，确保基础地形仍可辨。

JavaScript · Canvas 2D 蒙版叠加// 在基础地球纹理上叠加文化圈着色蒙版
function applyCulturalOverlay(ctx, w, h) {
  const CULTURAL_ZONES = [
    {
      name: 'east-asia',
      color: 'rgba(74, 159, 208, 0.22)',
      // 简化轮廓（生产环境替换为 GeoJSON 矢量）
      bounds: [{ lon: [70, 145], lat: [-10, 55] }]
    },
    {
      name: 'middle-east',
      color: 'rgba(200, 112, 48, 0.20)',
      bounds: [{ lon: [24, 70], lat: [12, 42] }]
    },
    // ...其余四个文化圈
  ];

  for (const zone of CULTURAL_ZONES) {
    ctx.fillStyle = zone.color;
    for (const b of zone.bounds) {
      const x1 = ((b.lon[0] + 180) / 360) * w;
      const x2 = ((b.lon[1] + 180) / 360) * w;
      const y1 = ((90 - b.lat[1]) / 180) * h;
      const y2 = ((90 - b.lat[0]) / 180) * h;
      ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
    }
  }
}

性能优化最佳实践

地图纹理是影响 LCP（最大内容绘制）的主要因素。本章提供经过 OWMap 生产环境验证的 性能优化策略，目标：LCP < 3.0s，60fps 持续渲染，移动端内存 < 150MB。

6.1 纹理加载策略

6.2 渐进式纹理加载实现

JavaScript · 渐进式加载/**
 * 渐进式纹理加载：先显示低分辨率占位，异步替换为高分辨率
 * 1. 启动时：使用内联 Canvas 生成 256x128 简化纹理（<100ms）
 * 2. 背景：异步加载 4096x2048 WebP 纹理（~3MB，CDN 约 1.5s）
 * 3. 加载完成：平滑 crossfade 切换（500ms 过渡）
 */
class ProgressiveEarthTexture {
  constructor(mesh) {
    this.mesh = mesh;
    this.placeholderTex = null;
    this.hiresTex = null;
  }

  async init() {
    // Phase 1: 立即显示程序化占位纹理
    this.placeholderTex = makeProceduralEarthTexture(512, 256);
    this.mesh.material.map = this.placeholderTex;
    this.mesh.material.needsUpdate = true;

    // Phase 2: 后台加载高清 WebP
    const loader = new THREE.TextureLoader();
    try {
      this.hiresTex = await loader.loadAsync('/textures/earth-4k.webp');
      this.hiresTex.anisotropy = 16;
      await this.crossfade();
    } catch {
      // CDN 不可用时保留占位纹理，记录错误
      console.warn('[OWMap] Hi-res texture unavailable, keeping placeholder');
    }
  }

  crossfade(duration = 500) {
    return new Promise(resolve => {
      let t = 0;
      const step = () => {
        t += 16;
        const p = Math.min(t / duration, 1);
        if (p >= 0.5 && this.mesh.material.map !== this.hiresTex) {
          this.mesh.material.map = this.hiresTex;
          this.mesh.material.needsUpdate = true;
        }
        p < 1 ? requestAnimationFrame(step) : resolve();
      };
      requestAnimationFrame(step);
    });
  }
}

GeoCore.RenderKit 集成规范

GeoCore.RenderKit 是 OWMap 平台级地图渲染公共组件，所有内容层（BSL1、CinemaMap、HeritagePath 等） 均应通过 RenderKit API 调用地图纹理能力，而非各自实现。

7.1 RenderKit 纹理配置接口

TypeScript · GeoCore.RenderKit API// GeoCore.RenderKit — 纹理层配置接口
interface GlobeTextureConfig {
  // 基础纹理
  baseTexture: {
    url:        string;         // CDN URL 或 'procedural'
    resolution: '2k' | '4k' | '8k';
    fallback:   'procedural';  // 加载失败时的降级策略
  };

  // 文化圈蒙版
  culturalOverlay?: {
    enabled:    boolean;
    opacity:    number;         // 0.0 - 0.5，推荐 0.22
    zones:      CulturalZone[]; // 来自 GeoCore.Catalog
  };

  // 热力图层
  heatmapLayer?: {
    enabled:    boolean;
    dataSource: 'realtime' | 'static' | 'synthetic';
    updateInterval: number;    // ms，0 = 不自动更新
    colorScale: [string, string]; // [cold, hot] 颜色对
  };

  // 大气层效果
  atmosphere?: {
    enabled:   boolean;
    color:     string;          // 默认 '#5B8FD6'
    intensity: number;          // 0.0 - 1.0，默认 0.4
  };

  // 性能约束
  performance: {
    targetFPS:      number;     // 目标帧率，默认 60
    maxTextureSize: number;     // px，默认 4096
    enableMipmaps:  boolean;   // 默认 true
    deviceProfile:  'auto' | 'low' | 'mid' | 'high';
  };
}

// 使用示例（BSL1 配置）
const bsl1Config: GlobeTextureConfig = {
  baseTexture:     { url: 'https://cdn.owmap.io/textures/earth-4k.webp', resolution: '4k', fallback: 'procedural' },
  culturalOverlay: { enabled: true, opacity: 0.22, zones: GeoCore.getCulturalZones() },
  heatmapLayer:    { enabled: true, dataSource: 'realtime', updateInterval: 3600000, colorScale: ['#1A3050', '#F5C842'] },
  atmosphere:      { enabled: true, color: '#5B8FD6', intensity: 0.4 },
  performance:     { targetFPS: 60, maxTextureSize: 4096, enableMipmaps: true, deviceProfile: 'auto' },
};

素材资产管理规范

规范化的资产管理确保纹理素材在多人协作、跨版本迭代和多平台部署中保持一致性。 以下规范适用于 OWMap 所有团队成员。

8.1 目录结构规范

目录结构/cdn/owmap/textures/
├── earth/
│   ├── base/
│   │   ├── earth-2k.webp         # 2048×1024 · 低分辨率
│   │   ├── earth-4k.webp         # 4096×2048 · 标准分辨率 ← 主要使用
│   │   ├── earth-8k.webp         # 8192×4096 · 高端设备
│   │   └── earth-procedural.js   # Canvas 程序化生成（降级用）
│   ├── normal/
│   │   ├── normal-2k.webp        # 法线贴图
│   │   └── normal-4k.webp
│   ├── specular/
│   │   └── specular-2k.webp      # 高光贴图（海洋反光区域）
│   ├── cultural/
│   │   ├── overlay-east-asia.webp
│   │   ├── overlay-middle-east.webp
│   │   ├── overlay-europe.webp
│   │   ├── overlay-americas.webp
│   │   ├── overlay-africa.webp
│   │   └── overlay-south-asia.webp
│   └── seasonal/
│       ├── earth-jan.webp         # 月度纹理（雪盖变化）
│       └── earth-jul.webp
├── sprites/
│   ├── owmap-v1.png               # Sprite 图集 @1x
│   ├── owmap-v1@2x.png            # Sprite 图集 @2x
│   └── owmap-v1.json              # Sprite 索引 JSON
└── styles/
    ├── owmap-deep-space.json      # MapLibre 主题风格
    └── owmap-satellite.json       # 卫星影像风格

8.2 发布前检查清单