MapBoxGL使用自定义颜色添加GeoJSON圆形标记

我需要使用通过AJAX获取的GeoJSON数据将标记添加到mapboxgl地图。我添加了以GeoJSON层是这样的：MapBoxGL使用自定义颜色添加GeoJSON圆形标记

geoJSONSource = new mapboxgl.GeoJSONSource({ 
     data: geodata 
    }); 

    map.addSource('markers', geoJSONSource); 
    map.addLayer({ 
     "id": "markers", 
     "interactive": true, 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "{marker-symbol}-15", // stuff in {} gets replaced by the corresponding value 
      "icon-allow-overlap": true, 
      "icon-size": 1 // size of the icon 
     } 
    });

以GeoJSON数据本身，我设定每个功能有物业“标记符号”在循环中“火箭”之前，我添加GeoJSON的地图。但是，我需要的是每个点的小圆形图像，而不是火箭。我想根据GeoJSON中包含的数据将点设置为三种颜色之一的小圆形图像。我打算在将GeoJSON添加到地图之前在循环中选择svg图像。

如何添加自定义图标图像？看来，即使我为图标字段输入乱码，Mapbox预制标记符号中的火箭图像也会被加载。否则，我如何添加自定义标记符号？

我正在使用街道v8的地图框样式;我尝试做我自己的样式，以访问自定义图像的标记根据此链接：

https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js

但我无法弄清楚。

来源

2016-03-22 stack_tom

标记图标根据样式中设置的current sprite sheet加载。

要加载自定义图标图像，您需要在style.json中指定自定义精灵json文件。下面是详细的相应github上讨论：https://github.com/mapbox/mapbox-gl-js/issues/822

下面是使用自定义精灵的例子：http://codepen.io/znak/pen/PqOEyV

地图使用名为customstyle.json在一个文件中定义的自定义样式：

var map = new mapboxgl.Map({ 
    container: 'map', 
    center: center, 
    zoom: 8, 
    style: 'http://www.lenart.pl/assets/codepen/customstyle.json' 
});

其中customstyle.json指的是一个customsprite.json

"sprite": "http://www.lenart.pl/assets/codepen/customsprite",

customsprite.json指定如何裁剪对应的PNG spritesheet位于：

http://www.lenart.pl/assets/codepen/customsprite.png

您也可以使用该工具：https://github.com/mapbox/spritezero-cli生成精灵JSON和对应的PNG spritesheet了全面的SVG文件目录。

来源

2016-03-24 13:07:36 kmandov

有没有办法编辑使用mapbox studio制作的style的style.json？我希望用于创建地图的预构建模板之一，并添加一个图标精灵以用于标记。我想另外一个问题是：如果我使用像您提到的自定义json样式文件，我是否仍然可以轻松地将基本地图框地图作为基础（包括道路，边界等），以便将我的自定义精灵添加到标记？或者我必须提供一切来绘制基本地图，如果我去customstyle.json的方式？ –

尚未尝试过，但您应该可以复制现有的地图框样式并更改精灵参考。由于style.json引用相同的矢量数据源，因此它应该可以工作。如果您使用的是Mapbox Studio，则可以直接上传您的svgs，并为您创建一个电子表格：https://www.mapbox.com/help/define-sprite/ – kmandov

我下载了我制作的style.json样式mapbox。然后，我使用您链接的工具创建了我的svg文件的sprite.json和sprite.png，并且更改了style.json中的sprite变量以指向我使用该工具创建的sprite.json。它很好，谢谢你的详细答案。 –

MapBoxGL使用自定义颜色添加GeoJSON圆形标记

回答

相关问题