mapbox - 样式化 MapBox GL 标记

Question

我正在尝试从使用 Mapbox.js 和 Leaflet 转移到 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 作为源直接添加到 map 中，而是需要遍历每个点，并在 map 上添加标记。