🗺️
由浅入深，四大板块
入门与环境 → 地图基础与交互 → 图形与数据 → 进阶与实战，共 14 章、4 大部分。
Mapcn 从入门到进阶基于官方文档的系统性实战指南
复制粘贴 · 组件化 · 可定制 —— 一本既能入门、又能进阶的 MapLibre React 地图组件中文专著
Skip to content
这本书讲什么
在 Web 前端，"给页面加一张可交互的地图"似乎从来都不是一件轻松的事：开发者往往要在「引入一个庞大的地图 SDK」「配置 API Key」「与一堆命令式 API 搏斗」之间反复横跳。mapcn 试图把这件事变得更像写普通 UI：组件化、可组合、可定制，且代码归你所有。
mapcn 是一套免费、开源、可复制粘贴的 React 地图组件库。它构建于 MapLibre GL 之上，使用 Tailwind CSS 进行样式设计，并刻意契合 shadcn/ui 的使用习惯。你不必把整座地图引擎"安装"进项目，只需要把需要的组件文件复制进来，它们就是你的代码。
本书完全建立在 mapcn 官方文档的基础之上，按"由浅入深、面面俱到"的原则重新编排，力求给中文世界的 React 开发者一本"既能入门、又能进阶"的 mapcn 专著。
如何阅读
- 完全的初学者：建议从第 1 章顺序读到第 6 章，把基础打牢。
- 有 React / 地图开发经验：可跳过入门铺垫，直接从地图交互或图形数据部分切入。
- 想深入引擎：第四部分（进阶与实战）值得精读，尤其是"深入 MapLibre 实例"一章。
每章末尾都配有"本章小结"，便于复习与速查。建议读者在自己的项目中动手敲一遍代码——mapcn 的"复制即拥有"特性，让即时实验的成本几乎为零。
官方文档（中英对照）
除了本书的系统性讲解，站点还直接收录了 mapcn 官方文档的中文译稿与英文原版，便于你对照查阅原始 API 描述、或在英文术语与中文表述之间来回切换：
🇨🇳官方文档（中文）完整中文译稿，从组件总览到 API 参考逐一对照，适合以中文精读。阅读中文文档 →🇬🇧Official Docs (English)The original English documentation, verbatim from mapcn.dev — best for precise API terms.Read English docs →
这两套文档与本书「参考资料（官方文档研读）」互为补充：研读摘要帮你快速抓住重点，完整官方文档则保留全部细节。