反应 mapbox 图层，图标未出现答案

【问题标题】：React mapbox layer with icon not appearing反应 mapbox 图层，图标未出现
【发布时间】：2021-01-12 12:21:30
【问题描述】：

我在 react 应用程序中设置了一个地图框，它使用图标（标记）来渲染一些图层。最近我将一个 css 绘制层更改为一个图标，并将相关的图像添加到地图实例中。问题是新添加的图标在本地可以正常工作，但在部署到服务器时无法正常工作。我还在控制台上看到如下警告。

我为 Image 实例添加了日志，工作标记似乎记录为 data:image 但不工作的标记有一个 src。

我不知道这在本地可以正常工作，但在部署时无法正常工作。这可能是什么问题。

与问题相关的层。

return [
{
  id: `selected-${name}`,
  type: 'symbol',
  source: name,
  layout: {
    'icon-image': selectedMarker || 'hollow-marker',
    'icon-size': 1.1,
    'icon-allow-overlap': true,
  },
  filter: ['match', ['get', 'isSelected'], 'true', true, false],
  paint: {
    'icon-color': borderColour,
    'text-color': borderColour,
  },
  maxzoom: 24,
  minzoom: 0,
  weight: weight + 1,
},
{
  id: name,
  type: 'symbol',
  source: name,
  layout: {
    'icon-image': marker || 'hollow-marker',
    'icon-size': 1.1,
    'icon-allow-overlap': true,
  },
  paint: {
    'icon-color': borderColour,
    'text-color': borderColour,
  },
  maxzoom: 24,
  minzoom: 0,
  weight,
},

];

向地图实例添加图像

const wellIcon = new Image(30, 30);
  const { default: wellImage } = await import('images/search/well.png');
  wellIcon.src = wellImage;

  const documentIcon = new Image(15, 15);
  const { default: documentImage } = await import(
    'images/search/document.png'
  );
  documentIcon.src = documentImage;
  const selectedDocumentIcon = new Image(30, 30);
  const { default: selectedDocumentImage } = await import(
    'images/search/selected-document.png'
  );
  selectedDocumentIcon.src = selectedDocumentImage;

  mapInstance.on('load', () => {
    innerSetMap(mapInstance);
    setMapReference(mapInstance);

    mapInstance.addImage(WELL_MARKER, wellIcon);
    mapInstance.addImage(DOCUMENT_MARKER, documentIcon);
    mapInstance.addImage(SELECTED_DOCUMENT_MARKER, selectedDocumentIcon);

    mapInstance.addControl(new Minimap(), 'bottom-left');
    mapInstance.addControl(drawMap, 'top-right');
    innerSetDraw(drawMap);

    mapInstance.resize();
  });

【问题讨论】：

似乎路径'static/media/selected-document.7859add7.png'上的图像不存在。如果你通过了完整的 base64 图像就可以了。
@Dolly 是的，由于 CORS 问题，图像尚未加载。我将所有图像更改为 base64 并存储在代码中。现在一切都好。
太棒了！我的评论很有帮助。

标签： reactjs mapbox mapbox-marker

【解决方案1】：

根据日志，由于 CORS 问题，未添加最后一张图片。这就是为什么最后一个图像记录为源链接而不是 base64 图像的原因。 Mapbox 需要一个预加载的图像，所以最后一个会导致错误，甚至其他图层的渲染也会受到干扰。

【讨论】：