4

我正在尝试从使用带有 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 中当前的样子:mapbox_markers

谢谢大家!

4

1 回答 1

4

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

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

本质上,不是直接将 GeoJSON 作为源添加地图中,而是要遍历每个点,并在地图上添加标记

于 2017-03-08T22:31:16.220 回答