Layerpin logo
立即开始

Layerpin 简介

将静态建筑蓝图、平面布置图、工程示意图和插画转化为具有自定义图钉、矢量图形、Deep Zoom 切片及安全网页嵌入的高性能交互地图。

什么是 Layerpin?

Layerpin 是一个专为自定义视觉媒体设计的交互式图像地图制作平台,适用于楼层平面图、建筑蓝图、展会场馆、博物馆导览、校园地图、商场布局和产品分解图等。

与需要地球经纬度和卫星 GIS 数据的传统地图工具(如 Google Maps 或 Mapbox)不同,Layerpin 通过亚像素级归一化坐标系直接在您的图片上运作,提供灵敏的触控操作、即时搜索与全球 CDN 边缘加速。

楼层平面图与建筑蓝图

在建筑图纸上直接标记单元户型、租赁状态、面积、租户信息、实景照片和配套设施。

大型活动与展厅导览

通过搜索和分类筛选,引导观众浏览展台、活动日程、安全出口、餐饮区和赞助商展位。

技术图纸与产品结构图

将硬件分解图、工厂产线和技术图纸转化为带有热点弹窗和操作链接的交互式说明文档。

千兆像素与历史艺术品

借助 Deep Zoom 多分辨率切片平铺,流畅缩放查看超高分辨率无人机航拍、名画细节与复杂 CAD 工程图。

4 步制作工作流

从原始栅格图片到嵌入网站的超高速交互地图,Layerpin 将制作过程提炼为 4 个清晰步骤:

  1. 1
    上传原始图片或图纸
    支持 PNG、JPEG、WebP、SVG、AVIF 等高分辨率格式。超大 CAD 图纸或航拍全景图上传后将自动生成 Deep Zoom 金字塔瓦片。
  2. 2
    绘制交互点、区域和引线标注
    使用 11 种专业绘图工具在画布上放置自定义标记图钉、绘制多边形区域、测量真实比例尺寸并添加富文本引线标注。
  3. 3
    丰富分类、媒体内容与详情卡片
    为任意标注关联图集相册、操作按钮、标签和 Markdown 描述。通过颜色分类、图例开关和即时搜索高效管理点位。
  4. 4
    发布稳定快照并自由嵌入
    秒级发布只读边缘缓存快照,无停机时间。复制带有安全域名白名单的响应式 iframe 代码,或直接分享公开链接。

核心架构与坐标系

在所有屏幕上完美自适应缩放需要严谨的数学体系,Layerpin 依托三大核心工程设计:

0–100 归一化地图坐标系

不同于随屏幕尺寸错位的绝对像素坐标,Layerpin 采用 0.00 至 100.00 的归一化比例单位。无论是手机、平板还是 4K 显示器,标记始终精确锁定在画面的指定像素点上。

私有草稿工作区

编辑器中的修改均保存在私有草稿中。您可以随意调整位置、更换样式和测试分类筛选,完全不影响在线用户的正常访问。

发布的边缘快照

点击“发布”即可在全球 CDN 生成只读静态快照,首屏加载低于 15 毫秒且不占用数据库连接。

核心功能一览

为制作、美化、组织和分发互动视觉地图提供了全方位的专业工具支持:

11 种精密绘图工具

涵盖标记图钉、多边形、矩形、圆形、线条/连接线、画笔、文本、引线、测距、橡皮擦与选择工具。

丰富的信息卡片与弹窗

支持悬停气泡、侧边抽屉或居中全屏弹窗,展示轮播图集、跳转按钮、标签及 Markdown 详情。

分类管理与多选图例

将标注划分至不同色彩分类,提供图例开关、实时搜索、数量统计和自定义图标。

Deep Zoom 千兆像素引擎

瓦片切片按需加载,即便是 50,000 像素超大图纸也能以 60 FPS 流畅缩放渲染,不会耗尽设备内存。

网站嵌入与安全性

响应式 iframe 嵌入支持授权域名白名单,确保您的地图只在经批准的网站上展示。

键盘快捷键与高效技巧

25+ 常用快捷键,支持瞬时工具切换、样式复制粘贴及背景对比度切换,大幅提升制图效率。

Pinny AI 地图助手

通过自然语言从文本或 CSV 批量创建点位、识别轮廓、归整分类,并支持自带密钥(BYOK)安全翻译全图至 16 种语言。

多语言地图与翻译

轻松将点位、形状、筛选器与图文翻译为 16 种语言,支持访客实时切换与平滑回退兜底。

表格导入与 CSV 导出

支持从 CSV、Excel 或 Numbers 批量导入点位及自定义字段,随时导出 CSV 或 JSON 数据备份。

地图克隆与灰度测试

完整复制包含高清切片、图钉及分类的整份地图,在不影响线上版本的前提下安全测试新内容。

创建您的第一张地图

准备好开始了吗?按照以下步骤快速创建并发布您的第一张地图:

  1. 1
    打开地图控制台
    前往地图控制台,点击“创建地图”。
  2. 2
    上传图片或设计底图
    从电脑中选择平面图或图纸文件(JPEG、PNG、WebP、SVG、AVIF)。
  3. 3
    绘制第一批标注与图形
    按键盘 M 键选择标记工具,或按 P 键选择多边形工具,点击画布放置点位。
  4. 4
    发布您的地图
    点击顶部导航的“发布”,您的交互式地图即刻上线并就绪嵌入!

网站嵌入与安全性

将地图嵌入任何网页只需一行响应式 iframe 代码,自带移动端手势与自适应布局:

<iframe
  src="https://layerpin.com/m/YOUR_MAP_ID"
  width="100%"
  height="600"
  style="border: 0; border-radius: 12px; overflow: hidden;"
  allow="fullscreen"
  loading="lazy"
></iframe>
安全提示: 请在地图设置的“嵌入与安全”中指定授权域名,以防未经许可的第三方盗刷访问额度。查看网站嵌入指南以获取 React、Next.js、WordPress、Webflow 和 Shopify 的详细配置说明。
开发者与 AI 助手: 使用 llms.txt 获取所有 Layerpin 文档主题索引,或 llms-full.txt 获取完整文档上下文。