在 Mapbox 上偏移标记

Question

我的地图标记如下所示：

如您所见，蓝色标记的中心实际上是我想要的坐标，有没有办法将标记稍微向上偏移一点，以便标记的尖端位于我的确切点上，而不是居中？

我的标记代码非常标准，就像在地图盒文档中一样。看起来像这样：

await nodeList.map((node) => {
    map.addSource(node.name, {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [{
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [node.longitude, node.latitude]
                },
                'properties': {}
            }]
        }
    });
    map.addLayer({
        'id': node.name,
        'type': 'symbol',
        'source': node.name,
        'layout': {
            'icon-image': 'custom-marker',
            'text-offset': [0, 1.25],
            'text-anchor': 'top'
        }
    });
});

Answer 1

如果您检查符号图层的文档，您会发现有一个选项可以将

icon-anchor

属性定义为字符串，指示应放置在最接近坐标集的标记部分。选项有 'center' 、 'top' 、 'bottom' 、 'left' 、 'right' 、 'top-left' 、 'top-right' 、 'bottom-left' 和 'bottom-right'

默认值为“center”，因此如果您在锚点选项中使用

icon-anchor: bottom

，它将正确定位。

await nodeList.map((node) => {
    map.addSource(node.name, {
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [{
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [node.longitude, node.latitude]
                },
                'properties': {}
            }]
        }
    });
    map.addLayer({
        'id': node.name,
        'type': 'symbol',
        'source': node.name,
        'layout': {
            'icon-image': 'custom-marker',
            'icon-anchor': 'bottom',
            'text-offset': [0, 1.25],
            'text-anchor': 'top'
        }
    });
});

Answer 2

Mapbox GL 的样式定义中已经有一个布局选项“icon-offset”。您可以将其用于基本样式或数据驱动样式。 AFAIK，您应该定义一个能够使用的图像。以下是取自 React Mapbox GL 应用程序的示例用法：

    <Source
      id="medya"
      type="geojson"
      data={filtered}
      generateId={true}
    />
    <Layer
      source="medya"
      id="medya"
      type="symbol"          
      layout={{
        "icon-image": "camera",
        "icon-offset": 0.2,
        "icon-size": 0.2,
        "icon-allow-overlap": true,
      }}          
    />