快速开始

为 React 设计的复制粘贴式地图组件。

mapcn 提供了精美设计、可访问且可定制的地图组件。基于MapLibre GL 构建， 使用 Tailwind CSS 样式， 并专为与 shadcn/ui 协作而设计。

设计哲学

mapcn 遵循 shadcn 的地图模式：复制粘贴你拥有的组件，零锁定，合理的默认值开箱即用。

地图通常被视为隐藏在包装库和配置繁重的 SDK 后面的黑盒。mapcn 采取不同的方法—— 它贴近 MapLibre，保持 API 熟悉感，并让你在需要更多控制时直接访问原始地图实例。

目标很简单：让地图感觉像你的 UI 技术栈的其余部分——可组合、可主题化、可访问， 并且易于使用 Tailwind 和 shadcn 模式进行自定义。

为什么选择 mapcn？

大多数 React 地图方案要么过于臃肿，要么限制太多。mapcn 为希望快速交付且不放弃控制力的团队而生：

• 拥有你的代码 — 将组件复制到项目中，完全自定义一切。
• 快速启动 — 运行一条命令，使用生产就绪的默认值渲染你的第一张地图。
• 安全扩展 — 直接基于 MapLibre 构建，需要时可下沉到原始 API。
• 设计系统友好 — 使用 Tailwind 样式，自然融入 shadcn/ui 模式。

兼容任意地图样式

mapcn 支持所有 MapLibre 兼容的瓦片， 这意味着你可以使用几乎任何提供商的瓦片：

• OpenStreetMap — 社区驱动的开源地图数据
• CARTO — 简洁的底图，适合数据可视化
• MapTiler — 精美的矢量瓦片，支持广泛自定义
• Stadia Maps — 快速可靠的瓦片托管，多种风格
• Thunderforest — 专为户外、骑行和交通设计的地图
• 以及任何支持 MapLibre 样式规范的提供商

核心特性

零配置

使用免费地图瓦片开箱即用，无需 API 密钥。

主题感知

自动在浅色和深色地图样式之间切换。

可组合

使用简单、可组合的组件构建复杂 UI。

TypeScript

全面的 TypeScript 支持提供完整的类型安全。

复制粘贴

拥有你的代码。没有依赖，只需复制到项目中。

任意地图样式

使用任何 MapLibre 兼容的瓦片：MapTiler、CARTO、OpenStreetMap 等。