带有 mapkitmutant 和 apple mapkit domToImage 的传单生成全灰图像

Question

带有 mapkitmutant 和 apple mapkit domToImage 的传单生成全灰图像

这与 openstreet、谷歌地图和必应地图的预期一样有效。 屏幕显示没问题，只是 domToImage 输出全是灰色。

要将地图添加到传单：

} else if ( ml.name === 'Apple Maps') {
  if ( this.appleMapsApiKey !== 'n/a' ) {
    ml.layer = (L as any).mapkitMutant ({
      type: 'hybrid', // valid 'type' are 'standard', 'satellite' and 'hybrid'
      authorizationCallback: function(done) {
        console.log ( 'Apple Maps Authorization Callback with ' + outerThis.appleMapsApiKey );
        done ( outerThis.appleMapsApiKey  );
      },
      language: 'en',
      debugRectangle: false,
      attribution: '© ' + ml.name
    });
  }

从地图创建 .png：

const node = document.getElementById('map');
if ( node != null ) {
const container = this.map.getContainer();
const options = {
  width: container.clientWidth,
  height: container.clientHeight
};
try {
    console.log ( 'swlGetMapViewDomToImageInt dimensions are: ' + JSON.stringify ( options ) );
    const dataUrl = await domToImage.toPng(node, options);
    if ( dataUrl != null ) {
      this.swlDataUrl = dataUrl;
      console.log ( 'swlGetMapViewDomToImageInt url is' + dataUrl );
    }
    return this.swlDataUrl;
  } catch (error) {
    console.error('ERROR: swlGetMapViewDomToImageInt error ' + error);
  }
} else {
  console.error ( 'ERROR: swlGetMapViewDomToImageInt - no document node with id "map"' );
}

Answer 1

无法以编程方式从

<canvas>

访问图像数据的常见原因是污染 - 请阅读 https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image。您应该在浏览器的控制台中收到有关此的警告。

简而言之，用于呈现

<canvas>

的任何和所有数据都必须具有适当的 CORS。

请注意，MapkitMutant 依赖于由底层 MapKitJS 库创建的

<canvas>

。

由于图形资源（图标图像、光栅图块等）来自 Apple 的网络服务器，而您无法在这些服务器中配置 CORS，因此您无能为力。