向 mapbox gl 添加自定义标记

Question

我想在我的地图上添加一个自定义标记。我正在使用 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 可能更难理解。它从 GeoJson 中获取属性 "marker-symbol": "marker" 和 "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} 的字符串，引用要从中提取的数据属性。