Mapcn

项目概述

Mapcn 是一套为 React 精心设计的开源地图组件库，底层基于 MapLibre GL 矢量渲染引擎，样式层全面采用 Tailwind CSS。它的核心理念是把地图当作普通 UI 原语来对待：复制源码进项目、完全掌控样式、让地图与你的设计系统天然融合，而不是被 SDK 默认的灰色瓦片绑架。

核心特性

• 🏗️ Copy-Paste 源码分发：以 shadcn/ui registry 形式发布，一条 CLI 命令即可把组件源码直接落入你的仓库，没有包锁定，样式层完全自主可控。
• 🎨 开箱即用的高颜值：提供精选的地图区块（仪表盘挂件、统计浮层、城市预设），告别 MapLibre 默认样式的粗糙感，首屏即有产品级观感。
• ♿ 默认无障碍：延续 shadcn/ui 的设计哲学，键盘可操作的控件与语义化标记开箱自带。
• 🧩 可组合区块：除核心 <Map> 原语外，还提供将卡片、图表与地图图层组合成仪表盘级区块的现成 Blocks。

快速上手与示例代码

pnpm dlx shadcn@latest add @mapcn/map

import { Map, MapControls } from "@/components/ui/map";
import { Card } from "@/components/ui/card";

export function MyMap() {
  return (
    <Card className="h-[320px] p-0 overflow-hidden">
      <Map center={[-74.006, 40.7128]} zoom={11}>
        <MapControls />
      </Map>
    </Card>
  );
}

技术选型建议与适用场景

1. 源码所有权优先：与 Google Maps、Mapbox SDK 封装库不同，组件代码就在你的仓库里，用 Tailwind token 随心重塑每一个细节。
2. 无痛使用 MapLibre：跳过底图配置、控件调整、暗色适配等繁琐工作，Mapcn 给出了全部合理默认值。
3. 不适用场景：重度 GIS 空间分析或自定义栅格管线需求，建议直接使用 MapLibre GL JS 原生 API 获得完全控制权。