mapbox - 将自定义标记添加到 mapbox gl

Question

我想在我的 map 上添加一个自定义标记。我正在使用 mapbox gl 脚本。

我发现与此主题相关的唯一文档是这个 https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ .

我尝试自定义给定的示例，并设法添加了一个标记并稍微修改了它的大小，但由于我不了解所有参数，因此我不知道如何添加我自己的标记。有没有更详细的文档？

这是我的代码:

 <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWl3YXRrbyIsImEiOiJjaXBncnI5ejgwMDE0dmJucTA5aDRrb2wzIn0.B2zm8WB9M_qiS1tNESWslg';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/aiwatko/cipo0wkip002ddfm1tp395va4', //stylesheet location
        center: [7.449932,46.948856], // starting position
        zoom: 14.3, // starting zoom
        interactive: true
    });       

    map.on('load', function () {
    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [7.4368330, 46.9516040]
                },
                "properties": {
                    "title": "Duotones",
                    "marker-symbol": "marker",

                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "icon-size": 3
        }
    });
});
</script>

提前致谢!

奥克塔维亚

Answer 1

在 Mapbox 中有两种自定义标记的方法。

Mapbox 中的栅格标记

查看 Mapbox.com 上的此链接 Custom marker icons .该示例显示了如何使用 .png 作为标记。

Mapbox 中的 SVG 标记

您已经接近修改 icons ，但需要一些时间来熟悉参数。
icon-image可能更难理解。它需要属性(property)"marker-symbol": "marker"来自 GeoJson 和 "icon-image": "{marker-symbol}-15" , 创建 marker-15 的最终结果.

这带来了另一个问题:标记在哪里/如何定义？!？

这些标记也来自 Mapbox，名为 Maki Icons .您可以更改 "marker-symbol"至 aquarium或 cafe查看结果。

来自 Mapbox GL Style Reference

icon-size — 图标的比例因子。 1 是原始尺寸，3 是尺寸的三倍。

icon-image — 替换了 {tokens} 的字符串，引用要从中提取的数据属性。