[MapBox GL JS图标属性的设置精灵

Question

我很难绕过MapBox GL。我来自传单背景，并且发现一些难以理解的抽象。

我处理大量GPS行程日志数据，需要做一些事情，例如显示行程的片段，用颜色突出显示行程的一部分，用自定义图钉在其上放置标记。另一个常见功能是使用状态不同的引脚标记地图上的所有单位。例如：上次报告，燃油水平等

要创建标记，我目前有一个助手对象，它会吐出一些js。

public string EmitJs()
{
    Debug.WriteLine("Emit Marker");
    StringBuilder sb = new StringBuilder();
    sb.AppendFormat("var container{0} = document.createElement('div');", UniqueId).AppendLine();
    sb.AppendFormat("container{0}.className = '{1}';", UniqueId, ContainerCss).AppendLine();
    sb.AppendFormat("var popup{0} = new mapboxgl.Popup({{ offset: 25 }}).setHTML(", UniqueId).AppendLine(); // escape { } with {{ }} in String.Format
    sb.AppendFormat("    \'{0}\'", Point.Label).AppendLine();
    sb.AppendLine(");");
    sb.AppendFormat("var marker{0} = new mapboxgl.Marker(container{1}, {{", UniqueId, UniqueId).AppendLine();
    sb.AppendLine("    anchor: 'bottom'");
    sb.AppendLine("})");
    sb.AppendFormat("  .setLngLat({0})", Point.EmitForMapBox()).AppendLine();
    sb.AppendFormat("  .setPopup(popup{0})", UniqueId).AppendLine();
    sb.AppendLine("  .addTo(map);");
    sb.AppendLine();

    return sb.ToString();
}

此返回：

var container5 = document.createElement('div');
container5.className = 'marker marker-pu-green';
var popup5 = new mapboxgl.Popup({ offset: 25 }).setHTML(
    '<p><b>Name:</b> 1310 PU2003<br /><b>Last Reported:</b> 25/03/2020 11:16:35<br /><b>Last Status:</b> Operating</p>'
);
var marker5 = new mapboxgl.Marker(container5, {
    anchor: 'bottom'
})
  .setLngLat([151.047211,-32.537003])
  .setPopup(popup5)
  .addTo(map);

这使我可以显示覆盖在地图上的图像（受CSS约束）。这非常简单。

The GeoJson FeatureCollection，包含代表各个标记的Feature's。我可以看到Layer对象中的图标属性旨在表示某些Spritesheet中的命名值，但是该死的，如果我能弄清楚它在哪里以及如何上传到它。我一直都在Studio及其文档中。似乎是指您实际上无法设置或上传的'sprites': 'path to file' json属性。

此外，尽管精灵将其以PNG格式返回到栅格，但仍希望它们采用SVG格式。那是一个不同的问题，但是如果我能做到这一点，那么我需要将一堆PNG转换为SVG格式。

问题

如何将自定义精灵添加到我的MapBox样式中，以便可以在GeoJson图标属性中引用它们。

Answer 1

您正在将标记（位于地图上的HTML元素）与符号层（位于地图中的图像以及与GeoJSON之类的源绑定在一起）相混淆。

标记与Sprites无关：您可以使用CSS设置样式。参见this example。

如果您确实想使用Symbol图层，使用自定义图像的最简单方法是将其上传到Mapbox Studio，后者将为您生成Sprite文件。或者，您可以使用loadImage动态加载图像。