Layerpin logo
开始创建

为快速交互式地图准备大图像

有关导出、优化和配置十亿像素蓝图、无人机航拍和矢量站点规划以实现响应式深度缩放性能的技术指南。

LP

Layerpin 团队

阅读需 8 分钟
高分辨率全景航空照片,具有丰富的景观和城市细节

为什么图像准备对于交互式地图很重要

交互式地图比常规网络照片需要更高的图像性能。参观者通过平移、捏合和放大来检查精细的建筑标签、单元尺寸和各个展位边界。

如果您的图像太小,放大时文本和线条会变得模糊且难以辨认。如果您的图像是未压缩的 80MB 原始导出,则页面加载时间会急剧增加,跳出率会增加,并且移动设备会因内存限制而崩溃。

Layerpin 使用深度缩放平铺架构弥补了这一差距。通过正确准备源图像,您可以以锐利的矢量般的清晰度解锁瞬时平移和缩放响应能力。

  1. 1
    沿最长边缘将源图像分辨率定位在 3000 像素到 8000 像素之间。
  2. 2
    使用 RGB / sRGB 颜色配置文件确保所有显示器上的颜色保真度。
  3. 3
    上传前裁剪不必要的白边距和空白画布空间。

CAD、Illustrator 和 Figma 的最佳导出设置

从设计软件(AutoCAD、Revit、Adobe Illustrator、Canva 或 Figma)导出总体规划或平面图时,请遵循以下导出规则以获得最佳结果:

对于矢量 CAD 和蓝图:以 2 倍或 3 倍比例导出为高质量 PNG 或 WebP。确保线宽至少为 1pt 到 1.5pt 粗,这样细小的墙壁边界就不会在广泛的缩放概览中消失。

对于航空和无人机摄影:导出为渐进式 JPEG 或 WebP,质量为 85-90%。人眼无法检测到 85% 质量的压缩伪影,但与未压缩的 100% 导出相比,文件大小最多减少 70%。

  1. 1
    将建筑线条图导出为 PNG 或 WebP,并启用抗锯齿功能。
  2. 2
    将摄影和 3D 逼真渲染导出为高质量 JPEG(85% 质量)。
  3. 3
    确保基础艺术上的文本标签转换为轮廓或以高 DPI 导出,以避免光栅模糊。
超清晰的空中网格视图,展示大面积的深度变焦清晰度

Layerpin 如何处理和提供深度缩放图像

当您将图像上传到 Layerpin 时,我们的处理管道会生成多分辨率图像金字塔(深度缩放图块)。

Layerpin 不会强制移动浏览器一次下载 50MB 的图像,而是动态地仅传输访问者当前视口和缩放级别内可见的特定微图块。在低缩放时,低带宽概览图块会立即加载;当用户放大到 402 房间时,高分辨率图块片段会无缝流入。

该架构减少了初始图像传输,同时支持非常大的建筑总体规划。实际加载时间仍然取决于图像准备、网络条件、托管和访问者的设备。

测试真实设备上的观看性能

在公开发布地图之前,请务必执行实际的多设备审核。

在私人浏览器窗口中打开您发布的地图,并在三种条件下进行测试:桌面 4K/视网膜显示屏、蜂窝连接的中端手机以及横向和纵向的平板电脑。

确认初始默认缩放显示完整的感兴趣区域,而无需立即缩放,并验证在平移画布最远的角落时文本标签保持清晰。

  1. 1
    测试移动 4G 网络上的初始加载时间。
  2. 2
    检查每个目标设备上的平移和捏缩放是否响应灵敏。
  3. 3
    验证相机边界将访客锁定在有意义的地图边界内。
Layerpin logo

准备好创建互动地图了吗?

先私下创建地图,检查访客视图,准备好分享后再发布。 No credit card needed.

免费开始