javascript - 通过 mapbox gl js 向 mapbox 中的 map 添加一些基本标记

Question

我有一张用 mapbox studio 设置样式的 map ，但是我什至很难向它添加一个基本标记，但是文本出现在标记应该出现的位置，这表明标记会在那里。

所以这是具有该 map 样式的代码:

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
    container: 'map',
    style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
    center: [-30.50, 40],
    zoom: 2,
    interactive: false
});

这里从 api 中的示例中添加了一些标记:

map.on('style.load', function () {

    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "monument"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "Mapbox SF",
                    "marker-color": "#ff00ff"
                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});

但是只显示文本而不显示图标。

问题是:我如何只向这张 map 添加一个普通的基本彩色标记，甚至没有一个特殊的图标标记？

谢谢。

Answer 1

这里的问题是您在 Mapbox Studio 中样式的起点，即您选择的模板，没有您在图层布局中引用的字形/ Sprite 。如果您切换到他们在您使用的示例中使用的相同样式:mapbox://styles/mapbox/streets-v8 您会看到标记会出现。这是因为它们已添加到该样式中。如果您切换回您的风格，它们又会消失。

这是您样式 Sprite 的 console.log:

这是 Mapbox 街道 Sprite 的 console.log:

如您所见，您只有两个，而 mapbox 有几十个(比屏幕截图上的多)。您可以通过简单地使用属性名称来使用您拥有的那些:default_marker 和 secondary_marker:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-77.03238901390978, 38.913188059745586]
    },
    "properties": {
       "title": "Mapbox DC",
       "marker-symbol": "default_marker"
    }
}

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "symbol",
    "layout": {
        "icon-image": "{marker-symbol}",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Plunker 示例:http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

如果您需要更多，您必须在 Mapbox studio 中将要使用的 Sprite /字形添加到您的样式中。不幸的是，这与“编程”关系不大，因为它与软件工具 Mapbox Studio 有关，因此在 stackoverflow 上有点“离题”。

如果您甚至不需要 sprite/glyphs，您也可以使用 type: circle 和 paint 属性来创建简单的圆圈:

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "circle",
    "paint": {
        "circle-radius": 10,
        "circle-color": "#007cbf"
    }
});

Plunker 示例:http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

有关样式和 Sprite 的更多信息可以在这里找到:

• https://www.mapbox.com/help/define-sprite/
• https://www.mapbox.com/developers/api/styles/#Sprites
• https://www.mapbox.com/mapbox-gl-style-spec/#sprite