three-geo-map

用 GeoJSON 生成可配置的 Three.js 3D 挤出地图：顶面/侧壁、描边发光、侧面扫光、标签、下钻、南海附图、地面镜面。

文档

安装后也可在 node_modules/@feiyangdefeng/three-geo-map/docs/ 阅读（随 npm 包发布；不含 docs/superpowers 内部稿）。

| 文档 | 内容 | |------|------| | docs/api.md | API 调用：构造、方法、事件、ColorValue 联动、插件、典型代码 | | docs/config.md | 全部 option：说明 / 取值范围 / 联动 / 影响 / 示例 | | docs/vue.md | Vue SFC 接入（registerMap + drillInto） | | docs/directory.md | 工程目录：各文件夹职责与改码导航 | | docs/themes/sipop.md | SIPOP 风格配方（无主题 API，复制 option） | | docs/release-workflow.md | 一键 Git 提交 / npm 发布（仅仓库，不进 npm 包） |

安装

pnpm add @feiyangdefeng/three-geo-map three

three 为 peer（>=0.160）。

最小例子

import { GeoMap, registerMap } from "@feiyangdefeng/three-geo-map";
import type { GeoJSONFeatureCollection } from "@feiyangdefeng/three-geo-map";

const geojson = (await fetch("/china.json").then((r) => r.json())) as GeoJSONFeatureCollection;
registerMap("china", geojson);

const map = new GeoMap("#map", {
  geojson: "china",
  map: { depth: 2.4, topColor: "#1a3a4a", sideColor: "#0e171a" },
  label: { show: true, field: "name" },
});

map.on("click", ({ properties }) => {
  console.log(properties.name);
});

也可以直接传 FeatureCollection：new GeoMap("#map", { geojson })。自定义 series type 用 GeoMap.use。Vue 示例见 docs/vue.md。

容器需有宽高。完整方法与 setOption 行为见 docs/api.md。

本仓库

pnpm install
pnpm dev     # http://localhost:5174/  playground
pnpm test
pnpm build
pnpm commit "feat: 描述"   # 一键提交（含测试）
pnpm release patch         # 一键发 npm（含 test/build/tag）

发版与提交细节见 docs/release-workflow.md。

• /：四川/全国调试面板，可导出配置 JSON
• /sipop-style.html：SIPOP 风格中国地图对照页