能够使用 Geojson 数据源在 MapBoxGL JS 中添加标记吗？答案

【问题标题】：Ability to add a marker in MapBoxGL JS, using a Geojson datasource?能够使用 Geojson 数据源在 MapBoxGL JS 中添加标记吗？
【发布时间】：2019-10-04 16:05:34
【问题描述】：

我能够按照此处的示例进行聚类。问题是我希望我的非聚集点是一个图标而不是一个圆圈。

https://docs.mapbox.com/mapbox-gl-js/example/cluster/

这将详细介绍如何创建集群。我知道要创建您使用的标记

let marker = new mapboxgl.Marker({})

但是将这段代码用于非聚类点（注意过滤器部分）

map.addLayer({
id: "unclustered-point",
type: "circle",
source: "earthquakes",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#11b4da",
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});

现在他们输入的选项包括符号、光栅、填充、线条、圆、填充-拉伸、背景、热图、山体阴影、自定义。

我假设我必须使用自定义或符号类型，但我不确定。自定义不允许我添加过滤器，所以这是不等式的。

符号类型的文档在这里：

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-symbol

我只是不太确定那是向下的正确方向吗？任何想法或帮助将不胜感激。

编辑：好的，我看到他们提到在这里向下滚动几卷使用符号属性。我想这意味着我必须获得自己的标记图像......

https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/

【问题讨论】：

标签： mapbox-gl-js

【解决方案1】：

我最终做了什么

this.map.loadImage(
            '../../../../../../assets/img/BlueMarker.png',
            (error, image) => {
                this.map.addImage('blue-icon', image);
                this.map.addLayer({
                    id: 'comps-unclustered',
                    type: 'symbol',
                    filter: ['!', ['has', 'point_count']],
                    layout: {
                        'icon-allow-overlap': true,
                        'icon-image': 'blue-icon',
                        'icon-size': 0.5,
                    },
                    source: 'comps',
                });
            },
        );

我正在使用 Angular 来解释 this.map

显然他们有一些图标可以在图标图像中使用。这些可以在这里找到。 marker-15 不适用于我的streets-v11。

这里是链接

https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

至于我为什么选择 png，显然你不能使用 svg。它在加载过程中抛出错误。我认为唯一的选择是 png 或 jpeg。我想我的 png 是 50 x 65。 0.5 尺寸现在似乎已经足够了。如果其他人遇到更好的选择，我不会接受这个答案。

【讨论】：