通過mapbox gl js將一些基本標記添加到mapbox中的地圖

Question

我有一個用mapbox studio設計的地圖，但是我很難添加一個基本的標記，但是文本出現在標記應該是哪里表明標記會在那里。

所以這是具有該地圖樣式的代碼：

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"
        }
    });
});

但是只顯示文本而不是圖標。

問題是：我如何只為這張地圖添加一個普通的基本彩色標記，甚至不是一個特殊的圖標？

謝謝。

Answer 1

這里的問題是，Mapbox Studio中您的樣式的起點（您選擇的模板）沒有您在圖層布局中引用的字形/精靈。 如果您切換到他們在您使用的示例中使用的相同樣式： mapbox://styles/mapbox/streets-v8您將看到標記將出現。 這是因為他們已被添加到那種風格。 如果你改回你的風格，他們會再次離開。

這是你的風格精靈的console.log：

這是一個map.log的Mapbox街道精靈：

正如你所看到的，你只有兩個，而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工作室中添加你想要使用的精靈/字形。 不幸的是，這與“編程”沒什么關系，因為它與Mapbox Studio有關，Mapbox Studio是一個軟件工具，因此在stackoverflow上就是一種“offtopic”。

如果你甚至不需要精靈/字形，你也可以使用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

有關樣式和精靈的更多信息，請訪問：

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