响应地图框图层，图标未出现

问题描述

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

我为 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,layout: {
    'icon-image': marker || 'hollow-marker',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();
  });

解决方法

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