向地图框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>

提前致谢！

Oktawia

Answer 1

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

Mapbox中的栅格标记

有关自定义标记图标，请参见Mapbox.com上的此链接。该示例显示了如何使用.png作为标记。

Mapbox中的SVG标记

您几乎可以修改icons，但是需要一些时间来熟悉这些参数。

这icon-image可能是很难理解的。它"marker-symbol": "marker"从GeoJson 获取属性，然后"icon-image": "{marker-symbol}-15"创建的最终结果marker-15。

这就提出了另一个问题：标记在哪里/如何定义？！？

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

从Mapbox GL样式参考中

• icon-size—图标的比例因子。1是原始尺寸，3是原尺寸的三倍。
• icon-image —替换为{tokens}的字符串，引用要从中提取的data属性。