1
const prepared = await prepareGlobeTexture(src)
2
if (!prepared) {
3
  return
4
}

1
const prepareGlobeTexture = async (src: string) => {
2
  // 增加一个 render token 用于取消旧的异步加载任务（防止竞态）
3
  const renderToken = ++globeRenderToken
4

5
  try {
6
    // 1) 加载图片资源（DataURL 或外部 URL）
7
    //    loadImageElement 返回在图片加载成功时解析的 HTMLImageElement。
8
    const image = await loadImageElement(src)
9

10
    // 2) 检查 renderToken：如果在等待期间另一次渲染请求已启动，则放弃本次结果
11
    if (renderToken !== globeRenderToken) {
12
      return false
13
    }
14

15
    // 3) 获取图片像素尺寸，用于创建与图片等尺寸的离屏画布
16
    const sourceWidth = image.naturalWidth || image.width
17
    const sourceHeight = image.naturalHeight || image.height
18

19
    if (!sourceWidth || !sourceHeight) {
20
      return false
21
    }
22

23
    // 4) 准备离屏 canvas（复用以减少频繁创建）
24
    if (!globeTextureCanvas) {
25
      globeTextureCanvas = document.createElement('canvas')
26
    }
27

28
    globeTextureCanvas.width = sourceWidth
29
    globeTextureCanvas.height = sourceHeight
30

31
    // 5) 获取 2D 上下文（将 willReadFrequently 设置为 true 以优化 readPixel 场景）
32
    const sourceContext = globeTextureCanvas.getContext('2d', { willReadFrequently: true })
33
    if (!sourceContext) {
34
      return false
35
    }
36

37
    // 6) 将图片绘制到离屏画布，并读取像素数据用于后续采样
38
    sourceContext.drawImage(image, 0, 0, sourceWidth, sourceHeight)
39
    globeTextureData = sourceContext.getImageData(0, 0, sourceWidth, sourceHeight).data
40
    globeTextureWidth = sourceWidth
41
    globeTextureHeight = sourceHeight
42

43
    // 7) 尝试基于纹理颜色在客户端生成陆地掩码（提高渲染时的判定性能）
44
    //    若生成失败则保留 globeLandMask 为 null，渲染时退回到按颜色判断。
45
    globeLandMask = null
46
    try {
47
      generateLandMaskClient()
48
    } catch (err) {
49
      console.error('客户端生成陆地掩码失败', err)
50
      globeLandMask = null
51
    }
52

53
    return true
54
  } catch (error) {
55
    console.error('Failed to prepare globe texture', error)
56
    return false
57
  }
58
}

1
const generateLandMaskClient = () => {
2
  if (!globeTextureData || !globeTextureWidth || !globeTextureHeight) return
3

4
  const w = globeTextureWidth
5
  const h = globeTextureHeight
6
  const mask = new Uint8Array(w * h)
7

8
  for (let y = 0; y < h; y++) {
9
    for (let x = 0; x < w; x++) {
10
      const idx = (y * w + x) * 4
11
      const r = globeTextureData[idx] ?? 0
12
      const g = globeTextureData[idx + 1] ?? 0
13
      const b = globeTextureData[idx + 2] ?? 0
14
      const a = globeTextureData[idx + 3] ?? 255
15
      mask[y * w + x] = sampleIsLand(r, g, b, a) ? 1 : 0
16
    }
17
  }
18

19
  globeLandMask = mask
20
}

1
const sampleIsLand = (r: number, g: number, b: number, a = 255) => {
2
  const alphaThreshold = 10
3
  if (a <= alphaThreshold) return false
4
  const blueRatio = 1.1
5
  const blueMargin = 24
6
  const maxrg = Math.max(r, g)
7
  const blueIsDominant = b >= maxrg * blueRatio && b >= maxrg + blueMargin
8
  return !blueIsDominant
9
}

1
// isLand 表示当前纹理点是否属于陆地；优先使用预计算掩码提高性能。
2
let isLand = false
3
if (globeLandMask && globeTextureWidth > 0 && globeTextureHeight > 0) {
4
  // 将采样位置映射到掩码网格中，和纹理坐标保持一致。
5
  const tx = wrapTextureX(Math.floor(u * globeTextureWidth), globeTextureWidth)
6
  const ty = clampTextureY(Math.floor(v * globeTextureHeight), globeTextureHeight)
7
  isLand = !!globeLandMask[ty * globeTextureWidth + tx]
8
} else {
9
  // 掩码不可用时，回退到按颜色判断是否为陆地。
10
  isLand = sampleIsLand(Math.round(sampleR), Math.round(sampleG), Math.round(sampleB), 255)
11
}
12
// baseR/baseG/baseB 是经过光照修正后的底色。
13
const baseR = Math.round(sampleR * brightness)
14
const baseG = Math.round(sampleG * brightness)
15
const baseB = Math.round(sampleB * brightness)
16
if (isLand) {
17
  // 陆地区域再叠加一层半透明黄色，增强地表区域的辨识度。
18
  const overlayR = LAND_OVERLAY_R
19
  const overlayG = LAND_OVERLAY_G
20
  const overlayB = LAND_OVERLAY_B
21
  // 通过原底色与叠加色混合，得到最终显示颜色。
22
  data[pixelIndex] = Math.round(
23
    baseR * (1 - LAND_OVERLAY_ALPHA) + overlayR * LAND_OVERLAY_ALPHA,
24
  )
25
  data[pixelIndex + 1] = Math.round(
26
    baseG * (1 - LAND_OVERLAY_ALPHA) + overlayG * LAND_OVERLAY_ALPHA,
27
  )
28
  data[pixelIndex + 2] = Math.round(
29
    baseB * (1 - LAND_OVERLAY_ALPHA) + overlayB * LAND_OVERLAY_ALPHA,
30
  )
31
  data[pixelIndex + 3] = alpha
32
} else {
33
  // 海洋区域只保留原始底色与光照效果。
34
  data[pixelIndex] = baseR
35
  data[pixelIndex + 1] = baseG
36
  data[pixelIndex + 2] = baseB
37
  data[pixelIndex + 3] = alpha
38
}

1
const onCanvasPlacePin = (clientX: number, clientY: number) => {
2
  const canvas = globeCanvas.value
3
  if (!canvas) return
4
  const rect = canvas.getBoundingClientRect()
5
  const sx = Math.round(clientX - rect.left)
6
  const sy = Math.round(clientY - rect.top)
7
  const uv = canvasPixelToUV(sx, sy)
8
  if (!uv) return
9

10
  // 如果点击靠近第一个图钉，则认为关闭多边形并尝试保存
11
  if (editingPins.value.length > 0) {
12
    const first = editingPins.value[0]
13
    if (first) {
14
      const canvasEl = globeCanvas.value
15
      if (canvasEl) {
16
        const firstScreen = uvToScreen(first.u, first.v, canvasEl)
17
        const dx = sx - firstScreen.sx
18
        const dy = sy - firstScreen.sy
19
        const dist2 = dx * dx + dy * dy
20
        if (dist2 < 20 * 20) {
21
          // 结束编辑
22
          finishEditingPolygon()
23
          return
24
        }
25
      }
26
    }
27
  }
28

29
  // 存储 uv 即可，屏幕坐标在渲染时实时计算
30
  editingPins.value.push({ u: uv.u, v: uv.v, sx, sy })
31
  scheduleRenderWorldGlobe()
32
}

1
const editingPins = ref<{ u: number; v: number; sx: number; sy: number }[]>([])

1
// 绘制当前正在编辑的图钉与连线（编辑态预览）
2
if (isEditingLand.value && editingPins.value.length) {
3
  context.save() // 保存样式状态（随后 restore）
4
  // 使用强调色与较粗线条让编辑内容显眼
5
  context.strokeStyle = 'rgba(40,120,240,0.95)'
6
  context.fillStyle = 'rgba(40,120,240,0.95)'
7
  context.lineWidth = 2
8
  // 绘制连线：依次连接每个图钉的当前屏幕位置
9
  context.beginPath()
10
  for (let i = 0; i < editingPins.value.length; i++) {
11
    const p = editingPins.value[i]
12
    if (!p) continue
13
    // 优先根据当前画布与投影计算屏幕坐标，若 canvas 不可用则回退到保存的快照坐标
14
    const { sx: px, sy: py } = globeCanvas.value
15
      ? uvToScreen(p.u, p.v, globeCanvas.value)
16
      : { sx: p.sx, sy: p.sy }
17
    if (i === 0)
18
      context.moveTo(px, py) // 起点
19
    else context.lineTo(px, py) // 连接线段
20
  }
21
  context.stroke() // 绘制多边形预览的轮廓线
22
  // 绘制每个图钉的控制点圆点，便于手动拖拽/删除
23
  for (const p of editingPins.value) {
24
    const { sx: px, sy: py } = globeCanvas.value
25
      ? uvToScreen(p.u, p.v, globeCanvas.value)
26
      : { sx: p.sx, sy: p.sy }
27
    context.beginPath()
28
    context.arc(px, py, 6, 0, Math.PI * 2) // 固定半径的圆点标记
29
    context.fill() // 使用与连线相同的填充色
30
  }
31
  context.restore() // 恢复到此前保存的画布样式
32
}

1
// 选中国家名称（如果存在），用于在渲染时高亮对应区域。
2
const selCountryName = currentCountry.value?.国家名称?.trim() || ''
3
// 若没有任何国家数据则跳过绘制区域的流程，避免不必要的 canvas 操作。
4
if (landMap.value && Object.keys(landMap.value).length) {
5
  context.save() // 保存画布状态，绘制后使用 restore 恢复
6
  context.lineWidth = 1.5 // 默认描边宽度（会针对选中状态作调整）
7
  // 遍历每个国家及其地块
8
  for (const [countryName, land] of Object.entries(landMap.value)) {
9
    if (!land || !land.areas) continue // 跳过无效数据
10
    const isSelected = countryName === selCountryName // 标记是否为被选中国家
11
    const countryColor = getCountryColor(countryName) // 获取该国的主题颜色
12
    for (const area of land.areas) {
13
      if (!area || !area.vertices || !area.vertices.length) continue // 忽略空区域
14
      // 将每个顶点从纹理坐标 (u,v) 转换为经过视角旋转的平面坐标
15
      const rotatedPoints = area.vertices
16
        .filter((vert): vert is [number, number] => !!vert)
17
        .map(([u, v]) => uvToRotatedPoint(u, v))
18
      // 对多边形边界做插值平滑，减少锯齿状直线感
19
      const curvedPoints = buildCurvedPolygonPoints(rotatedPoints, 16)
20
      // 裁剪到当前可见半球，只绘制朝向用户的片段
21
      const clippedPoints = clipPolygonToFrontHemisphere(curvedPoints)
22
      if (clippedPoints.length < 3) continue // 不足 3 个点无法构成多边形
23
      // 计算画布中心与投影半径，用于将旋转坐标映射回屏幕坐标
24
      const centerX = canvas.width / 2
25
      const centerY = canvas.height / 2
26
      const radius = Math.min(canvas.width, canvas.height) * 0.42
27
      context.beginPath()
28
      // 将裁剪后的每个点转换为屏幕坐标并绘制路径
29
      for (let i = 0; i < clippedPoints.length; i += 1) {
30
        const point = clippedPoints[i]
31
        if (!point) continue
32
        const sx = centerX + point.x * radius // x 投影：中心偏移 + 单位坐标 * 半径
33
        const sy = centerY - point.y * radius // y 投影：注意画布 y 方向与数学坐标相反
34
        if (i === 0) {
35
          context.moveTo(sx, sy) // 起点
36
        } else {
37
          context.lineTo(sx, sy) // 连续线段
38
        }
39
      }
40
      context.closePath() // 封闭路径，准备填充与描边
41
      // 根据是否为选中状态选择不同的填充与描边透明度与粗细
42
      context.fillStyle = isSelected
43
        ? withColorAlpha(countryColor, 0.22)
44
        : withColorAlpha(countryColor, 0.2)
45
      context.strokeStyle = isSelected
46
        ? withColorAlpha(countryColor, 0.95)
47
        : withColorAlpha(countryColor, 0.65)
48
      context.lineWidth = isSelected ? 2 : 1
49
      context.fill() // 绘制填充
50
      context.stroke() // 绘制边框
51
    }
52
  }
53
  context.restore() // 恢复画布状态，避免影响后续绘制样式
54
}

1
// 将多边形裁剪到前半球（z >= 0），并在被地平线切割的边界处沿地平线补齐点，
2
// 以便渲染出被地平线遮挡部分的可视化边界（例如闭合的海平线片段）。
3
const clipPolygonToFrontHemisphere = (points: RotatedPoint[]) => {
4
  // 至少需要 3 个点才能构成多边形，短路返回空结果
5
  if (points.length < 3) return [] as RotatedPoint[]
6

7
  // 容差值：用于判断点是否在前半球（允许极小的数值误差导致 z 略小于 0）
8
  const epsilon = 1e-6
9
  // 在两次地平线交点之间插入的弧段细分数，用于在地平线间补齐曲线（越大越平滑）
10
  const horizonSegments = 16
11

12
  // 判定函数：点是否位于前半球（z >= 0）
13
  const isInside = (point: RotatedPoint) => point.z >= -epsilon
14

15
  /**
16
   * 在结果数组中添加从 `from` 到 `to` 的地平线弧段点（z = 0）。
17
   * - 通过 atan2 获得两个点在平面上的角度，沿最短角度差插值生成若干弧段顶点。
18
   * - 若角度差接近 0（几乎重合），则不插入任何点以避免重复。
19
   */
20
  const addHorizonArc = (result: RotatedPoint[], from: RotatedPoint, to: RotatedPoint) => {
21
    const fromAngle = Math.atan2(from.y, from.x) // 起点角度
22
    const toAngle = Math.atan2(to.y, to.x) // 终点角度
23
    let delta = toAngle - fromAngle
24

25
    // 将角度差规约到 (-PI, PI]，以便沿最短方向插值
26
    while (delta <= -Math.PI) delta += Math.PI * 2
27
    while (delta > Math.PI) delta -= Math.PI * 2
28

29
    // 若差值约为 0，则两点方向一致，不需要插入弧段
30
    if (Math.abs(delta) < 1e-6) {
31
      return
32
    }
33

34
    // 将弧沿 angle 从 fromAngle 到 toAngle 分割为若干段，并在 z=0 平面上添加单位向量点
35
    for (let step = 1; step <= horizonSegments; step += 1) {
36
      const t = step / horizonSegments
37
      const angle = fromAngle + delta * t
38
      result.push({ x: Math.cos(angle), y: Math.sin(angle), z: 0 })
39
    }
40
  }
41

42
  const result: RotatedPoint[] = []
43
  // 找到第一个位于前半球的顶点作为起点（从该点开始顺时针/逆时针遍历多边形）
44
  const startIndex = points.findIndex((point) => isInside(point))
45
  if (startIndex < 0) {
46
    // 若所有点均在背面，则没有需要绘制的前半球片段
47
    return result
48
  }
49

50
  const startPoint = points[startIndex]
51
  if (!startPoint) {
52
    return result
53
  }
54

55
  // 归一化并添加起点（将可能略微偏离单位球的点投影回单位球表面）
56
  result.push(normalizeRotatedPoint(startPoint))
57
  // pendingExit 用来记录上一个从前半球到背半球的交点，当再次进入前半球时用它补齐地平线弧
58
  let pendingExit: RotatedPoint | null = null
59

60
  // 从 startIndex 开始遍历多边形的每条边，使用环绕索引处理闭合边
61
  for (let offset = 1; offset <= points.length; offset += 1) {
62
    const currentIndex = (startIndex + offset - 1) % points.length
63
    const nextIndex = (startIndex + offset) % points.length
64
    const current = points[currentIndex]
65
    const next = points[nextIndex]
66
    if (!current || !next) continue
67

68
    const currentInside = isInside(current)
69
    const nextInside = isInside(next)
70

71
    // 情形 A：当前点与下一个点都在前半球 —— 直接将下一个点（归一化）加入结果（除非它是起点）
72
    if (currentInside && nextInside) {
73
      if (nextIndex !== startIndex) {
74
        result.push(normalizeRotatedPoint(next))
75
      }
76
      continue
77
    }
78

79
    // 情形 B：当前在前半球，下一个在背半球 —— 边穿过地平线，计算交点并添加到结果，记录为 pendingExit
80
    if (currentInside && !nextInside) {
81
      // 线性插值参数 t，按 z 分量解得当前到 next 在 z=0 处的插值比例
82
      const t = current.z / (current.z - next.z)
83
      // 在球面上插值后将点投影到地平线（z=0 单位向量）以获得准确的边界点
84
      const horizonPoint = projectRotatedPointToHorizon(lerpRotatedPoint(current, next, t))
85
      result.push(horizonPoint)
86
      pendingExit = horizonPoint
87
      continue
88
    }
89

90
    // 情形 C：当前在背半球，下一个进入前半球 —— 边从背面进入前半球，需要：
91
    //  (1) 计算进入点并添加，(2) 如果之前存在 pendingExit（之前的退出点），在二者间插入沿地平线的弧段，
92
    //  (3) 添加下一个顶点的归一化投影（除非它是起点）。
93
    if (!currentInside && nextInside) {
94
      const t = current.z / (current.z - next.z)
95
      const horizonPoint = projectRotatedPointToHorizon(lerpRotatedPoint(current, next, t))
96
      if (pendingExit) {
97
        // 在上一次退出点与本次进入点之间补齐沿地平线的弧段
98
        addHorizonArc(result, pendingExit, horizonPoint)
99
      }
100
      result.push(horizonPoint)
101
      if (nextIndex !== startIndex) {
102
        result.push(normalizeRotatedPoint(next))
103
      }
104
      pendingExit = null // 已处理完 pendingExit
105
    }
106
  }
107

108
  return result
109
}

1
const settings = readAiSettingsFromStorage()
2
const provider = prepared.provider ?? settings?.provider ?? 'OpenAI'
3
const apiKey = settings?.api ?? ''
4
const model = prepared.model ?? settings?.model ?? 'gpt-3.5-turbo'

1
// DeepSeek 分支：同样先尝试 OpenAI 兼容 SDK，再回退到官方 REST endpoint。
2
if (provider === 'DeepSeek') {
3
  // DeepSeek REST Chat endpoint (assumed). Uses Bearer token in Authorization header.
4
  // 没有 API Key 时无法请求 DeepSeek，直接返回 null。
5
  if (!apiKey) {
6
    console.error('No API key available for DeepSeek')
7
    return null
8
  }
9
  // 优先尝试使用 OpenAI 官方 SDK（DeepSeek 兼容 OpenAI 格式）。
10
  try {
11
    // baseURL 指向 DeepSeek 的兼容入口。
12
    const sdkResult = await callOpenAiCompatibleSdk('https://api.deepseek.com')
13
    // 如果 SDK 成功返回了非空字符串，直接作为最终结果。
14
    if (typeof sdkResult === 'string' && sdkResult.length > 0) {
15
      return sdkResult
16
    }
17
  } catch (err) {
18
    // 如果无法导入 SDK（例如在浏览器中），则使用 fetch 回退。
19
    console.debug('OpenAI SDK not available, using fetch fallback', err)
20
  }
21
  // 官方文档推荐的 DeepSeek OpenAI 兼容 endpoint。
22
  const endpoint = 'https://api.deepseek.com/chat/completions'
23

24
  // REST 回退路径：直接请求 DeepSeek 兼容接口。
25
  try {
26
    const res = await fetch(endpoint, {
27
      method: 'POST',
28
      headers: {
29
        'Content-Type': 'application/json',
30
        Authorization: `Bearer ${apiKey}`,
31
      },
32
      body: JSON.stringify({ model, messages: prepared.messages }),
33
    })
34

35
    // 非成功响应时读取服务端错误信息并返回 null。
36
    if (!res.ok) {
37
      const text = await res.text()
38
      console.error('DeepSeek API error', res.status, text)
39
      return null
40
    }
41

42
    // 正常返回时解析 JSON 并抽取统一文本结果。
43
    const data = await res.json()
44
    return extractCompletionText(data)
45
  } catch (e) {
46
    // 任何请求失败都在这里收敛，避免向上抛出未处理异常。
47
    console.error('Failed to call DeepSeek', e)
48
    return null
49
  }
50
  // 对未实现的 provider 给出明确错误，避免静默失败。
51
  console.error('Provider not implemented:', provider)
52
  return null
53
}

1
// 将模型返回结果统一提取成文本，避免不同 provider 的响应结构差异影响上层调用。
2
const extractCompletionText = (data: unknown) => {
3
  // 非对象数据无法按统一结构解析，直接返回 null。
4
  if (!data || typeof data !== 'object') {
5
    return null
6
  }
7
  // 以宽松结构接收多种兼容接口返回值，便于处理 OpenAI / DeepSeek / 其他兼容实现。
8
  const response = data as {
9
    choices?: Array<{ message?: { content?: unknown }; text?: unknown }>
10
    output?: unknown
11
    result?: unknown
12
  }
13
  // 优先处理 OpenAI 风格的 choices 数组。
14
  if (Array.isArray(response.choices) && response.choices.length > 0) {
15
    // 收集所有 choice 中的文本片段，最后拼接为一个完整回复。
16
    const parts: string[] = []
17
    // 遍历每个 choice，兼容 message.content 与 text 两种常见字段。
18
    for (const choice of response.choices) {
19
      // 先读 message.content，若没有则回退到 text。
20
      const content = choice.message?.content ?? choice.text
21
      // 只收集字符串内容，避免把对象或其他非文本数据混入结果。
22
      if (typeof content === 'string') {
23
        parts.push(content)
24
      }
25
    }
26
    // 若至少提取到一个字符串片段，则按换行连接后返回。
27
    if (parts.length > 0) {
28
      return parts.join('\n')
29
    }
30
  }
31
  // 兼容某些接口直接返回 output 字段的情况。
32
  if (typeof response.output === 'string') return response.output
33
  // 兼容某些接口直接返回 result 字段的情况。
34
  if (typeof response.result === 'string') return response.result
35
  // 如果无法识别具体结构，则返回原始 JSON 字符串，至少保留调试信息。
36
  return JSON.stringify(data)
37
}