设置MapBox GL标记的样式

我正在尝试从使用带有传单的Mapbox.js转到Mapbox GL

我有下面的geojson，应该按照所附的图像进行渲染。不幸的是，在阅读了许多文章和与数据驱动可视化相关的文档之后，我遇到了麻烦。想知道是否有人能帮我举个例子

以下是geojson：

{ "type":"Feature",geometry: { "type":"Point","coordinates":[1.1147,51.7829] },properties: { "title":"Paul","marker-color":"#0094F7","marker-size":"large","marker-symbol":"star" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.34851,52.6123] },properties: { "title":"Will","marker-color":"#F9883E","marker-size":"large","marker-symbol":"1" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.76389,53.0232] },properties: { "title":"Mark","marker-color":"#F1574E","marker-size":"large","marker-symbol":"13" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-.127211,51.6014] },properties: { "title":"David","marker-color":"#83C736","marker-size":"large","marker-symbol":"20" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.06682,53.4986] },properties: { "title":"Adam","marker-color":"#FC5C53","marker-size":"large","marker-symbol":"rocket" } }

颜色值由最终用户设置，可以是任何颜色，因此我不能只是创建大量图像来适应，数字指的是日期，因此将是1-31

以下是它在Mapbox.js中的当前外观：

谢谢大家

使用，您可以完全控制显示您喜欢的任何HTML元素，因此您可以使用CSS构建正确颜色的圆圈或泪滴，或SVG图标

请参见此示例：

---

基本上，您不需要直接将GeoJSON作为源添加到地图中，而是需要迭代每个点，并在地图上添加标记。

您找到了一种简单的方法吗？下面的答案有效。必须使用样式HTML元素迭代每个点。不建议在大量点上这样做，但对我的用例有效。对于仍在寻找简单创建制造商方法的人来说，有一点需要补充：Mapbox GL js（0.51.1）的当前版本不幸地不支持创建带有任何符号的标记，除了“撕裂”内的圆圈（）开箱即用。