在 Mapbox 上偏移标记

问题描述

我的地图标记如下所示：

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

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

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'}});
});

解决方法

如果您检查符号图层的 documentation，您会发现有一个选项可以将 icon-anchor 属性定义为一个字符串，该字符串指示应该放置在最靠近坐标集的 Marker 部分.选项是 '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'}});
});

,

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,}}          
    />