矢量点阵
地图渲染
数据获取与制作全流程

点阵渲染哲学与使用场景

矢量点阵（Vector Dot-Matrix）渲染是一种将连续的多边形地理边界离散化为有规律排列点集的技术。 它不追求像素级精确，而是用视觉节奏感和信息密度的调制，构建出独特的艺术性地图风格—— 这正是 OWMap「深空文学地球仪」视觉语言的核心组件之一。

9.1 为什么选择点阵而非位图纹理？

位图纹理（如 4K WebP 卫星影像）在高端设备上效果极佳，但点阵渲染有其不可替代的优势：

9.2 核心使用场景

数据获取与处理管线

高质量的点阵渲染依赖精确的地理多边形数据。本章覆盖从权威数据源下载原始 GeoJSON， 到针对 Canvas 渲染优化的完整数据处理管线。

10.1 Natural Earth — 首选数据源

Natural Earth 是由 NACIS（北美制图信息学会）维护的公共域矢量地图数据集，提供三种精度级别， 可按需选择体积与精度的平衡点。

10.2 数据下载地址

Data URLs# Natural Earth 1:110m 陆地多边形（最常用）
https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/
  ne_110m_land.geojson                    # 全球陆地 · 501 KB · 推荐起点
  ne_110m_admin_0_countries.geojson       # 国家边界（含属性）· 600 KB
  ne_110m_coastline.geojson               # 海岸线（线要素）

# 1:50m（桌面端更佳效果）
  ne_50m_land.geojson                     # 全球陆地 · 2 MB
  ne_50m_admin_0_countries.geojson        # 国家 · 2.4 MB

# 官方下载入口（ZIP 格式，含 SHP/GeoJSON/KMZ）
https://www.naturalearthdata.com/downloads/110m-physical-vectors/

10.3 运行时 vs 预烘焙策略

10.4 Node.js 数据处理工具链

以下脚本将 Natural Earth GeoJSON 转换为内联点云数组，可直接粘贴到 globe.js。

Node.js · bake-dotmap.js/**
 * bake-dotmap.js
 * Usage: node bake-dotmap.js ne_110m_land.geojson 5 > baked-dots.js
 * Args:  [geojsonPath] [gridStep=5px at 1024px width]
 */
const fs   = require('fs');
const path = require('path');

const [,,srcPath, stepArg] = process.argv;
const step   = parseFloat(stepArg) || 5;
const W = 1024, H = 512;
const geojson = JSON.parse(fs.readFileSync(srcPath, 'utf8'));

/* Point-in-polygon (ray-casting) */
function pip(px, py, ring) {
  let inside = false;
  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
    const [xi, yi] = ring[i], [xj, yj] = ring[j];
    if (((yi > py) !== (yj > py)) &&
        (px < (xj - xi) * (py - yi) / (yj - yi) + xi))
      inside = !inside;
  }
  return inside;
}

function isLandGeo(lng, lat) {
  for (const feat of geojson.features) {
    const geo = feat.geometry;
    const polys = geo.type === 'Polygon'
      ? [geo.coordinates]
      : geo.type === 'MultiPolygon'
        ? geo.coordinates
        : [];
    for (const poly of polys) {
      if (pip(lng, lat, poly[0])) return true; // outer ring only
    }
  }
  return false;
}

/* Sample the grid */
const pts = [];
for (let px = 0; px < W; px += step) {
  for (let py = 0; py < H; py += step) {
    const lng = (px / W) * 360 - 180;
    const lat = 90  - (py / H) * 180;
    if (isLandGeo(lng, lat)) pts.push(px / W, py / H); // normalized coords
  }
  process.stderr.write(`\rSampling... ${Math.round(px/W*100)}%`);
}
process.stderr.write('\n');

/* Output as JS module */
console.log(`/* Auto-generated — do not edit. Baked from ${path.basename(srcPath)} at step=${step} */`);
console.log(`export const BAKED_DOTS = new Float32Array([${pts.join(',')}]);`);
console.log(`export const BAKED_STEP = ${step};`);
console.log(`export const BAKED_COUNT = ${pts.length / 2};`);

10.5 精度对比速查

Canvas 2D 渲染算法详解

本章深入点阵渲染的核心算法：等经纬度投影、网格采样、陆地判定， 以及在 Canvas 2D 上实现毫秒级渲染的关键优化技巧。

11.1 等经纬度投影（Equirectangular）

点阵地图使用最简单也最通用的等经纬度投影：经度线性映射到 X 轴，纬度线性映射到 Y 轴。 虽然极区面积失真较大，但对于全球概览地图完全足够，且计算极快。

投影公式/* 从地理坐标 → Canvas 像素坐标 */
function geoToCanvas(lat, lng, W, H) {
  const x = ((lng + 180) / 360) * W;   // lng ∈ [-180, 180] → [0, W]
  const y = ((90  - lat) / 180) * H;   // lat ∈ [ -90,  90] → [H, 0]
  return { x, y };
}

/* 从 Canvas 像素 → 地理坐标（渲染时使用这个方向） */
function canvasToGeo(px, py, W, H) {
  const lng = (px / W) * 360 - 180;
  const lat = 90  - (py / H) * 180;
  return { lat, lng };
}

11.2 点阵采样策略

渲染循环遍历 Canvas 上均匀分布的网格点，对每个点做陆地判定。 关键参数是 step（网格间距，单位 px），它直接决定点阵密度和渲染时间。

Core Loopfunction renderDotMatrix(canvas, cfg = {}) {
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const {
    step   = 5,
    radius = 0.85,
    color  = 'rgba(140,180,230,0.22)',
    getColor = null,         // optional: (lat,lng)=>color for per-dot coloring
    bakedDots = null,        // optional: Float32Array of [u,v,u,v,...] normalized
    isLand = null,           // optional: (lat,lng)=>boolean
  } = cfg;

  ctx.clearRect(0, 0, W, H);

  if (bakedDots) {
    /* Fast path: iterate pre-baked point list */
    for (let i = 0; i < bakedDots.length; i += 2) {
      const px = bakedDots[i]   * W;
      const py = bakedDots[i+1] * H;
      const lat = 90  - bakedDots[i+1] * 180;
      const lng = bakedDots[i]   * 360 - 180;
      ctx.fillStyle = getColor ? getColor(lat, lng) : color;
      ctx.beginPath(); ctx.arc(px, py, radius, 0, Math.PI * 2); ctx.fill();
    }
  } else if (isLand) {
    /* Grid-scan path: test each cell */
    for (let px = 0; px < W; px += step) {
      for (let py = 0; py < H; py += step) {
        const lng = (px / W) * 360 - 180;
        const lat = 90  - (py / H) * 180;
        if (!isLand(lat, lng)) continue;
        ctx.fillStyle = getColor ? getColor(lat, lng) : color;
        ctx.beginPath(); ctx.arc(px, py, radius, 0, Math.PI * 2); ctx.fill();
      }
    }
  }
}

11.3 Ray-Cast 陆地判定（Point-in-Polygon）

对于运行时 GeoJSON 判定，使用经典 Ray-Casting 算法： 从测试点向右发射一条水平射线，统计与多边形边的交叉次数，奇数为内部，偶数为外部。

Point-in-Polygon/**
 * Ray-cast PIP against a GeoJSON Polygon or MultiPolygon.
 * ring: [[lng,lat],...] — outer ring of a polygon
 */
function pointInRing(lng, lat, ring) {
  let inside = false;
  const n = ring.length;
  for (let i = 0, j = n - 1; i < n; j = i++) {
    const [xi, yi] = ring[i], [xj, yj] = ring[j];
    if (((yi > lat) !== (yj > lat)) &&
        (lng < (xj - xi) * (lat - yi) / (yj - yi) + xi)) {
      inside = !inside;
    }
  }
  return inside;
}

function isLandGeoJSON(lat, lng, features) {
  for (const f of features) {
    const g = f.geometry;
    const polys = g.type === 'Polygon'     ? [g.coordinates]
                 : g.type === 'MultiPolygon' ?  g.coordinates : [];
    for (const poly of polys) {
      if (pointInRing(lng, lat, poly[0])) {
        /* Check holes (inner rings) */
        let inHole = false;
        for (let h = 1; h < poly.length; h++)
          if (pointInRing(lng, lat, poly[h])) { inHole = true; break; }
        if (!inHole) return true;
      }
    }
  }
  return false;
}

多密度模式与视觉预设

点阵密度（step）和点半径（radius）的组合决定了地图的视觉风格，从极简稀疏到细腻密集均可实现。 OWMap 内置以下预设，兼顾视觉效果与渲染性能。

文化圈配色系统

文化圈配色（Cultural Zone Coloring）是 OWMap 点阵渲染的标志性特色： 每个大陆或文化圈对应一种经过设计的色调，让地图在视觉上传达地理与文化的多样性。

13.1 色系设计原则

文化圈色系基于深空黑背景（#050D18）设计，所有颜色均为低饱和度、低亮度， 以 Alpha 透明度控制可见性。避免强对比刺眼，追求「星云中浮现」的视觉感受。

globe.js · CULTURAL_ZONESconst CULTURAL_ZONES = [
  { name:'东亚',    bbox:[96,18,146,54],   color:'rgba(200,120,60,0.55)'  },
  { name:'东南亚',  bbox:[92,-10,142,28],  color:'rgba(180,150,60,0.50)'  },
  { name:'南亚',    bbox:[60,6,100,38],    color:'rgba(210,100,80,0.50)'  },
  { name:'中东',    bbox:[25,12,62,40],    color:'rgba(220,160,50,0.50)'  },
  { name:'东欧',    bbox:[28,45,60,72],    color:'rgba(140,160,200,0.50)' },
  { name:'西欧',    bbox:[-10,35,28,72],   color:'rgba(100,140,210,0.55)' },
  { name:'非洲',    bbox:[-18,-35,52,38],  color:'rgba(200,130,60,0.50)'  },
  { name:'北美洲',  bbox:[-168,7,-52,72],  color:'rgba(100,170,200,0.50)' },
  { name:'南美洲',  bbox:[-82,-56,-34,12], color:'rgba(120,190,120,0.50)' },
  { name:'大洋洲',  bbox:[114,-47,180,-10],color:'rgba(160,200,180,0.50)' },
  { name:'俄罗斯',  bbox:[28,50,190,73],   color:'rgba(140,160,180,0.45)' },
];

function getCulturalColor(lat, lng) {
  for (const z of CULTURAL_ZONES) {
    const [lo1,la1,lo2,la2] = z.bbox;
    if (lng >= lo1 && lng <= lo2 && lat >= la1 && lat <= la2) return z.color;
  }
  return 'rgba(140,180,230,0.22)'; // default ocean-blue
}

交互式配置面板

本章提供生产就绪的交互式点阵配置面板实现—— 初级用户使用预设一键切换，高级用户通过参数面板全量定制， 所有更改实时预览，支持一键导出配置代码。

// 当前点阵配置
window.OWMap.dotMatrixConfig = {
  step:      5,
  radius:    0.85,
  mode:      'cultural',
  bgColor:   '#050D18',
  monoColor: 'rgba(140,180,230,0.22)',
};

14.1 globe.js 全局配置接口

当前版本 globe.js 已集成配置接口，支持通过 window.OWMap.dotMatrixConfig 在任何页面覆盖默认参数：

globe.js API/* 在页面脚本中（globe.js 加载之后）设置配置 */
window.OWMap = window.OWMap || {};
window.OWMap.dotMatrixConfig = {
  step:       5,            // 网格间距（px）  默认: 5
  radius:     0.85,         // 点半径（px）   默认: 0.85
  mode:       'cultural',   // 'cultural' | 'mono'
  bgColor:    '#050D18',    // 背景色
  monoColor:  'rgba(140,180,230,0.22)', // 单色模式下的颜色
  showStories: true,        // 是否显示故事标记点
};

/* 调用绘制 */
OWMap.drawWorldMap('your-canvas-id');

/* 或传入内联参数（高优先级，覆盖全局配置） */
OWMap.drawWorldMap('your-canvas-id', {
  step: 3, mode: 'cultural'
});

14.2 性能优化清单

Pixel-Direct Fast Path/* 直接写 ImageData，比 arc() 快约 4× */
function renderDotMatrixFast(canvas, bakedDots, color = [140,180,230,55]) {
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const img = ctx.createImageData(W, H);
  const d = img.data;

  /* Fill background */
  for (let i = 0; i < d.length; i += 4) {
    d[i]=5; d[i+1]=13; d[i+2]=24; d[i+3]=255;
  }

  /* Plot dots as single pixels */
  for (let i = 0; i < bakedDots.length; i += 2) {
    const px = Math.round(bakedDots[i]   * W);
    const py = Math.round(bakedDots[i+1] * H);
    if (px < 0 || px >= W || py < 0 || py >= H) continue;
    const idx = (py * W + px) * 4;
    d[idx]   = color[0];
    d[idx+1] = color[1];
    d[idx+2] = color[2];
    d[idx+3] = color[3];
  }

  ctx.putImageData(img, 0, 0);
}