7 个 Tips，打开地图优化的大门 | Mapbox 最佳实践指南

后台回复「地图加速」获得实践指南英文PDF

你有没有遇到过这样的情景，费尽心思做好的项目，结果地图加载缓慢、耗电量惊人或者在尝试交互的时候一卡一卡的……被老板责备，被客户吐槽，但依然苦于硬件条件以及近乎为 0 的优化空间，没法做得更好。

这篇文章汇总了 Mapbox 在与多家公司合作中优化地图的学习指南和最佳实践，虽然每家公司面临的问题都是独一无二的，但这些策略可以作为一个起点，帮助开发者打造出色的用户体验，并推动最终成功的商业成果。

---

三方面，评估地图速度

优化速度之前，我们要先弄明白，如果要评估地图的速度，需要考虑哪些方面。

1. 加载时间（Load Time）

您需要评估渲染代码、下载地图样式和切片、以及首次渲染视觉上完整的一张地图所花费的时间。服务器也是重要的一方面，比如 Mapbox 覆盖全球的服务器保证了无论用户身在何处都可以快速实现地图响应。你也可以尝试其他的加速方法。

2. 布局时间（Layout Time）

包括解析样式、将矢量切片解码为几何图形需要的时间。以及将样式中数据驱动的风格、被三角网格等特征转化为 GPU 可以读取的格式时所花费的时间。

3. 渲染时间（Render Time）

渲染单个样式框架所需要的时间。你需要保证渲染时间保持在每帧 16ms 以下，也就是帧率至少为 60fps，才能保证地图的卡顿不被人眼所察觉。

除此之外，还有一些影响地图速度的因素：

 - 样式优化（Style optimization）

 - 运行自定义数据（Custom data implementation）

 - 地图类型（Map type）

在评估速度的时候切记！要结合应用程序的工作流程，而不是孤立于产品体验来考虑地图的速度。

7 tips，帮你优化地图速度

1. 执行 SDK 的异步加载（an async load）

Mapbox 将 SDK 加载到 HTML 页面的标题中，以便地图的加载与页面上其他内容同步。但如果你愿意的话，可以试试优化出示页面的加载，只需要把 SDK设置为异步加载即可 —— 即当网页上其他内容已经完成加载后，再加载地图。这样也并没有带来负面的用户体验。

2. 删除不必要的图层

我们的底图包含了不同的地图图层，以便提供丰富、全面的用户体验。如果想要减小地图文件的大小，可以试试在 Mapbox Studio 中删除不必要的自定义图层。

在 Mapbox Studio 中点击这个垃圾桶就可以很方便地删除图层了

举个例子，当地图用来显示酒店的标记时，可能并不需要地形数据，因此从地图样式中删除 Hillshade 图层和 Mapbox-terrain Tileset，就可以显著加快负载、布局和渲染时间。事实上，一些在非常高的缩放级别下使用的地图，其中地形确实是不必要的表示。

3. 使用样式优化的矢量切片

样式优化的矢量切片会忽略未在地图视口或者样式中指定的图层或特征，可以节省下载和渲染未使用的数据时所花费的时间。当样式只需要矢量切片的一小部分数据时 —— 无论是图层的子集，还是每个图层的特征子集（通过“filter”属性）—— 这是最有效的。

样式优化的矢量图层可以通过在地图样式中添加下方参数 ？optimize = true 来启用，比如下面的代码。

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v9?optimize=true' // optimize=true
});

如果你想了解更多关于样式优化的矢量切片，可以点击这里去 Mapbox 官网查看。

4. 管理图标（Sprites）和字体

Mapbox 核心样式配备了多种多样的图标和高速公路盾牌，比如下面的例子。

下载链接不对外开放，想要获得 Maki 请联系微信 Mapbox_max

如果你在 Mapbox Studio 中上传自定义图标（请确保SVG大小不超过容器尺寸，否则spritesheet会变得很大），那么它们将会被添加到“spritesheet”中，并会在用户下载地图的时候下载。

Mapbox GL JS 还需要为您的地图风格中所出现的所有字体下载字体，所以控制字体的数量可以提高加载速度和带宽使用。特别地，如果您正在使用中文、日文或韩文，则应该启用 localldeographFontFamily 设置来加速地图的加载，因为这样会优先使用本地可用字体，而不是从服务器获得字体。

5. 使用特征状态（Feature State）进行交互（Web端）

更新数据可能成本很高。如果您需要为地图要素制作悬停或选定的样式，请利用新的“feature-state”表达式和 Map#setFeatureState 方法，而不是“setFilter”或“setData”。特征状态可以帮助你一边运行一边更新“state”，无需请求地图渲染引擎重新分析底层的几何和数据，就可以更改单个功能的样式和外观。

在可视化需要每隔几秒更新一次的实时数据时，功能状态可以带来很大的帮助。我们其实在之前的文章中已经介绍了特征状态，感兴趣的朋友可以回顾一下：教程 | 教你用一张地图展示中期选举动态。

6. 合成矢量切片集（Tilesets）

在默认状态下。Mapbox Studio 可以将您在地图样式中使用的所有矢量图层合成一个 Tileset。如果地图上的自定义数据始终对用户可见，这就是一件好事，因为获取切片的网络请求更少。

如果您默认隐藏大型的 Tilesets，并且仅允许部分用户查看，则您可能想要禁用合成功能，或者希望手动选择合成的 Tilesets。这样会改进加载时间，因为 Mapbox GL 不会为在不可见图层中使用的源请求切片。只有在图层被切换到“可见”的状态时，才开始请求。

7. 使用 Tippecanoe 平铺数据

如果您是从大型 Shapefile 或者 GeoJSON 生成自己的矢量 Tilesets，请用 Tippecance 简化复杂的几何形状、并控制缩放 Tileset 的范围。

举个例子，如果将 maxZoom 设置为 15，表示任何将地图缩放至“15”的用户，不需要新的瓦片加载；地图绘自动覆盖缩放 15 的瓦片。这样对点特征的数据集很有用，因为您无需在更高的缩放级别显示其他细节。

关于 Teppecanoe 的更详细内容，请查看这个 repo。

后台回复「地图加速」获得实践指南英文PDF

希望这 7 个小 Tips 可以帮助你打开地图优化的大门，欢迎你到官方文档中心和 Github Repo 中学习更多。也欢迎你添加微信（Mapbox_max）拉你进入开发者社群，和 1000+ 开发者一起搞事情～

如果您的 App 也想获得好看、轻量、开放定制化的地图服务，请戳下图联系我们吧，官方工作人员会尽快与您取得联系！

---

您还可以在下面的渠道持续关注我们哦。

微博

@Mapbox地图数据平台，或者tag #mapbox# 

知乎

@Mapbox中国