造型MapBox GL标记

Question

我正试图将使用Leaflet的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目前的样子：

全部谢谢！

Answer 1

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

请参阅此示例：https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

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