偏移 Mapbox 上的标记

Question

我的地图标记是这样的：

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

我的标记代码非常标准，就像在 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'}});
});

Answer 1

如果您检查符号层的 documentation，您会发现有一个选项可以将 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,
      }}          
    />

偏移 Mapbox 上的标记

Offset a marker on Mapbox

javascript

three.js

mapbox

mapbox-gl-js

mapbox-marker