安装指南
一条命令安装 mapcn 地图组件库。
前提条件
在安装 mapcn 之前，请确保你的项目满足以下条件：
- React 18 或更高版本
- Tailwind CSS 已配置
- shadcn/ui 已初始化（推荐）
- Node.js 18 或更高版本
安装组件
使用 shadcn CLI 安装 mapcn 基础地图组件：
1
npx shadcn@latest add @mapcn/map这将会：
- 将
map.tsx文件复制到你的components/ui/目录 - 自动安装
maplibre-gl和lucide-react依赖
依赖项
mapcn 依赖以下包：
maplibre-gl— 地图渲染引擎lucide-react— 图标库
如果你还没有安装这些依赖，shadcn CLI 会自动为你安装。
手动安装
如果你不想使用 shadcn CLI，也可以手动安装：
1
npm install maplibre-gl lucide-react然后从 注册表 下载 map.tsx 文件并放入你的 components/ui/ 目录。
导入使用
安装完成后，从 @/components/ui/map 导入组件：
MyMap.tsx
1234567891011
import { Map, MapControls } from class="tk-string">"@/components/ui/map";
export function MyMap() {
return (
<div className=class="tk-string">"h-[320px] overflow-hidden rounded-lg">
<Map center={[-74.006, 40.7128]} zoom={11}>
<MapControls />
</Map>
</div>
);
}安装区块
mapcn 还提供预构建的地图区块，覆盖常见业务场景：
1234567891011121314151617181920
"tk-comment"># 数据分析地图
npx shadcn@latest add @mapcn/analytics-map
"tk-comment"># 等值线地图
npx shadcn@latest add @mapcn/choropleth
"tk-comment"># 运行时间监控
npx shadcn@latest add @mapcn/uptime-monitor
"tk-comment"># 物流网络
npx shadcn@latest add @mapcn/logistics-network
"tk-comment"># 门店定位器
npx shadcn@latest add @mapcn/store-locator
"tk-comment"># 热力图
npx shadcn@latest add @mapcn/heatmap
"tk-comment"># 配送追踪器
npx shadcn@latest add @mapcn/delivery-tracker底图选择
mapcn 提供灵活的底图选择方式：
- 默认模式 — 使用
<Map>不加blank属性，使用默认的免费 CARTO 底图瓦片。适合门店定位、配送追踪、物流地图等需要街道和地理信息的场景。 - 空白模式 — 使用
<Map blank>获取透明、无瓦片的画布。单独使用时不渲染任何内容，需要添加自己的图层。适合等值线图、弧线图、点地图、数据仪表板等数据驱动的可视化。 - 自定义样式 — 使用
styles属性指定自定义 MapLibre 兼容的样式 URL 或样式对象，例如 MapTiler、OpenFreeMap、CARTO 或自托管样式。显式styles会覆盖blank。
下一步
基础地图