2017-03-08 150 views
2

我想从使用Mapbox.js与单张到Mapbox GL。样式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

谢谢大家!

回答

2

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

见这个例子:不是直接加入以GeoJSON作为源地图https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

从本质上讲,你将要遍历每个点,并添加标记地图。