基于 MapLibre GL / shadcn/ui 模式 / MIT 开源

为 React 而生的
地图组件库

一条命令安装，复制粘贴即用。标记、弹窗、路线、弧线、聚类、GeoJSON， 8 个组件覆盖所有地图场景。

快速开始API 参考
Terminal
npx shadcn@latest add @mapcn/map
MyMap.tsx
live
8
核心组件
7
预构建区块
10.7k
GitHub Stars
0
配置步骤

看看 mapcn 能做什么

每个组件都设计为可组合、可定制、类型安全。左侧是代码，右侧是效果。

MapMarker自定义标记与弹窗
12345678
<MapMarker longitude={-74.006} latitude={40.7128}>
  <MarkerContent>
    <MarkerLabel>纽约市</MarkerLabel>
  </MarkerContent>
  <MarkerPopup closeButton>
    点击查看详情
  </MarkerPopup>
</MapMarker>
查看文档
MapMarker.tsx
preview
MapRoute路径绘制与交互
1234567
<MapRoute
  coordinates={route}
  color=class="tk-string">"#22d3ee"
  width={4}
  interactive
  onClick={() => console.log(class="tk-string">"clicked")}
/>
查看文档
MapRoute.tsx
preview
MapArc弧线连接与悬停
123456789
<MapArc
  data={arcs}
  curvature={0.3}
  paint={{
    class="tk-string">"line-color": [class="tk-string">"get", class="tk-string">"color"],
    class="tk-string">"line-width": 3,
  }}
  hoverPaint={{ class="tk-string">"line-width": 6 }}
/>
查看文档
MapArc.tsx
preview
MapGeoJSON区域填充与悬停
1234567891011
<MapGeoJSON
  data={WORLD_GEOJSON}
  promoteId=class="tk-string">"name"
  interactive
  fillPaint={{
    class="tk-string">"fill-color": [class="tk-string">"match", [class="tk-string">"get", class="tk-string">"continent"],
      class="tk-string">"Asia", class="tk-string">"#f59e0b", class="tk-string">"Europe", class="tk-string">"#22d3ee",
      class="tk-string">"#64748b"],
    class="tk-string">"fill-opacity": 0.5,
  }}
/>
查看文档
MapGeoJSON.tsx
preview
MapClusterLayer大数据聚类展开
12345678910
<MapClusterLayer
  data={earthquakesGeoJSON}
  clusterRadius={50}
  clusterMaxZoom={14}
  clusterColors={[
    class="tk-string">"#22c55e", class="tk-string">"#eab308", class="tk-string">"#ef4444"
  ]}
  pointColor=class="tk-string">"#3b82f6"
  onPointClick={(f, c) => setSelected({ ... })}
/>
查看文档
MapClusterLayer.tsx
preview
Map blank无瓦片数据可视化
1234
<Map blank center={[0, 20]} zoom={1}>
  <MapGeoJSON data={WORLD_GEOJSON} />
  <MapArc data={connections} />
</Map>
查看文档
Map blank.tsx
preview

为开发者体验而生

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

零配置，一条命令安装

默认使用免费 CARTO 瓦片，无需 API 密钥，无需搭建瓦片服务。 运行 npx shadcn@latest add @mapcn/map， 导入组件，传入坐标，你的地图就准备好了。

无需 API Key免费瓦片开箱即用复制粘贴

主题感知

自动适配浅色/深色模式，地图样式随应用主题无缝切换。

MapLibre GL 驱动，无黑盒

基于 MapLibre GL JS 构建，保持 API 熟悉感。使用 ref 或useMap hook 随时下沉到原始 MapLibre API，自定义控件、图层、事件监听，没有任何限制。

useMap HookMapRef自定义图层事件监听3D 地球

兼容 shadcn/ui

使用与 shadcn/ui 相同的模式和样式约定。复制粘贴，完全拥有代码，零锁定。

可组合

声明式组件构建复杂地图 UI。像搭积木一样组合标记、弹窗、路线和控件。

TypeScript

完整的类型安全支持，泛型组件实现类型安全的属性访问。

预构建区块

7 个业务场景区块
即装即用

除了基础组件，mapcn 还提供一系列预构建的地图区块。一条命令安装，直接集成到你的项目。

Analytics Map

数据分析地图

可视化就绪
npx shadcn@latest add @mapcn/analytics-map

Choropleth

等值线地图

可视化就绪
npx shadcn@latest add @mapcn/choropleth

Uptime Monitor

运行时间监控

可视化就绪
npx shadcn@latest add @mapcn/uptime-monitor

Logistics Network

物流网络

可视化就绪
npx shadcn@latest add @mapcn/logistics-network

Store Locator

门店定位器

可视化就绪
npx shadcn@latest add @mapcn/store-locator

Heatmap

热力图

可视化就绪
npx shadcn@latest add @mapcn/heatmap

Delivery Tracker

配送追踪器

可视化就绪
npx shadcn@latest add @mapcn/delivery-tracker

兼容任意地图样式

mapcn 支持所有 MapLibre 兼容的瓦片提供商。使用 styles 属性指定自定义样式，或用 blank 创建无瓦片的数据可视化画布。

OpenStreetMap

社区驱动，开源

CARTO

简洁底图，数据可视化

MapTiler

精美矢量瓦片

Stadia Maps

快速可靠，多风格

Thunderforest

户外、骑行、交通

准备好开始了吗？

一条命令安装，几分钟内将交互式地图集成到你的 React 应用中。 完全拥有代码，零锁定。

快速开始GitHub 仓库
npx shadcn@latest add @mapcn/map