通过 mapbox gl js 向 mapbox 中的地图添加一些基本标记

Posted 2023-02-16

【中文标题】通过 mapbox gl js 向 mapbox 中的地图添加一些基本标记

【英文标题】：Add some basic markers to a map in mapbox via mapbox gl js

【发布时间】：2016-05-16 20:33:09

【问题描述】：

我有一张使用 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"
        
    );
);

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

问题是：我如何在这张地图上只添加一个普通的基本彩色标记，甚至不添加一个特殊图标？

谢谢。

【参考方案1】：

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

这是您的样式精灵的控制台日志：

这是 Mapbox 街道精灵的 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 工作室中将您想要使用的精灵/字形添加到您的样式中。不幸的是，这与“编程”无关，因为它与 Mapbox Studio 有关，Mapbox Studio 是一个软件工具，因此在 *** 上有点“离题”。

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

【讨论】：

注意，default_marker 已重命名为 marker-15。 ***.com/a/38061574/3625228我花了一段时间才弄清楚为什么它不起作用。

这些不是默认标记。默认标记就是你得到的docs.mapbox.com/mapbox-gl-js/example/add-a-marker。使用 addLayer() 似乎不可能做到这一点......但我仍然无法相信。