MapBoxGL 添加具有自定义颜色的 GeoJSON 圆形标记

Question

我需要使用通过 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 添加到地图之前，我将每个要素设置为在循环中具有属性 'marker-symbol' 到 'rocket'。但是，我需要的是每个点的小圆形图像，而不是火箭。我想根据 GeoJSON 中包含的数据，将这些点设置为三种颜色之一的小圆形图像。我计划在将 GeoJSON 添加到地图之前循环选择 svg 图像。

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

我使用的是 streets-v8 mapbox 样式；我尝试根据此 link:

制作自己的样式来访问标记的自定义图像

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

但是我想不通。

Answer 1

根据样式中设置的 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 从充满 SVG 文件的目录中生成精灵 json 和相应的 png 精灵表。

MapBoxGL 添加具有自定义颜色的 GeoJSON 圆形标记

MapBoxGL add GeoJSON circular markers with custom color

image

add

geojson

marker

mapbox