我需要使用通过AJAX获得的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图像。
如何添加自定义图标图像？似乎即使我在icon-image字段中输入乱码，Mapbox的预制标记符号中的火箭图像也会被加载。否则，如何添加自定义标记符号？
我正在使用street-v8 mapbox样式；我尝试根据自己的风格尝试制作自己的样式，以根据该链接访问标记的自定义图像：
https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js
但是我无法弄清楚。
标记图标是根据样式中设置的当前Sprite工作表加载的。
要加载自定义图标图像，您需要在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从充满SVG文件的目录中生成精灵json和相应的png精灵表。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句