Mapbox GL JS 如何在地图中同时处理多个地图样式/精灵?

San*_*era 5 mapbox-gl-js

我们将 mapbox-gl-js 用于地图 Web 应用程序,我们有几种自定义样式(由 mapbox studio 制作),我们使用它们就像我们在基础图层上方渲染的图层一样,基础图层可以是 mapbox 卫星图层,还有一个custom layer 一种显示土壤信息的样式(例如)。

我想知道是否有人遇到过这种情况,我们已经找到了一些解决方法来满足我们的需求,但这并不容易,每次修改自定义样式时都需要时间。

以下是我们遇到和解决的问题列表:

  • 不能在每个地图加载更多的一种样式,因此没有简单的方法可以同时加载我们拥有的所有自定义样式,我们需要这样做。

    为了显示地图中的每个样式,我们将样式中的每个图层单独添加到地图中,我们检查样式对象内的图层并对其进行迭代添加每个图层。

  • 每个地图不能加载一个以上的精灵,每种样式都有自己的精灵,以及它需要的资源,例如用于填充模式的 svg。如果我们为一种样式加载精灵,其他样式将无法正确显示,因为它们也有需要来自精灵的 svgs 的图层。

    为了解决这个问题,我们有一个包含所有其他样式的 svgs 的样式,因此我们可以加载该样式的精灵,并且所有其他样式都可以正确显示。这是可行的,但是精灵有 500 个图标的限制(或多或少取决于您的图标的大小),我们最终会达到这个限制,这是我们最关心的问题之一。