从Mapbox矢量图块显示自定义图标标记

Question

我正在使用mapbox gl javascript。我有一个很大的geojson数据，其中包含点位置（纬度，经度）对以及一些属性。我想将较大的geojson加载到mapbox Studio中，然后将其转换为矢量图块。

对我来说，下一个重要任务是使用mapbox gl javascript加载矢量图块集，并为矢量图块中的点显示自定义标记图标。您能建议我该怎么做吗？

Answer 1

一个开始的好地方是阅读一些Mapbox-GL-JS examples，并阅读documentation。

Answer 2

自定义标记设置在这里说明：https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

有多种方法来显示带有标记的图块。您能更精确地知道自己要做什么吗？您要从网页上显示它们吗？

同时，您可以尝试在Mapbox Studio帐户的新图块集中上传GeoJSON。然后创建新样式>新图层>从图块集中选择数据。

至此，您将数据放在Symbol类型上，然后转到style> icon，然后从以前右上角的Images按钮中选择以前上传的自定义图标。编辑器。

勇气，

N。

Answer 3

请在我的代码块上查看答案，以加载图层的自定义图像。注意：我正在使用矢量数据源。源数据由点（Lat Lng对）组成。

附带的图像仅供参考。enter image description here

        map.addSource('ccc_location', {
            type: 'vector',
            url: 'mapbox://aciapprover111.4jkdyq5t'
        });
        map.loadImage('@Url.Content("~/Content/assets/img/green.png")', function (error, green) { //this is where we load the image file
            if (error) throw error;
            map.addImage("custom-green", green); //this is where we name the image file we are loading
            map.addLayer({
                'id': 'CCCLocations_VGO',
                'type': 'symbol',
                'source': 'ccc_location',
                "filter": ["all", ["==", "type", "VGO"]],
                'source-layer': 'CCCLocations-bgcof4',
                'layout': {
                    'icon-image': "custom-green",
                    'icon-size': 0.65,
                    'icon-allow-overlap': true
                }
            });
        });