electron - 在 Electron 应用中使用 Mapbox 和离线 map

Question

是否可以有一个显示离线 map 的 Electron 应用程序？
我下载了mbtiles并存储在 Electron 应用程序中，但我无法在 Electron 应用程序的角度侧显示它。
我有以下代码:

<mgl-map
  class="map"
  id = "map"
  [style]="'mbtiles://assets/resources/downloaded.mbtiles'"
  [center]="[mapCenter.longitude, mapCenter.latitude]"
  (load) = "onLoad($event)"
  (dragEnd)="mapDrag()"
  [doubleClickZoom]="false"
  [bearing]="[bearing]"
  [zoom]="[zoom]"
  [pitch]="[pitch]">
</mgl-map>

但我得到了错误

zone-evergreen.js:1068 Fetch API cannot load mbtiles://User/hello/path/to/file.mbtiles. URL scheme "mbtiles" is not supported.

所以，为了让它以在线方式工作，我必须改变风格

[style]="'mapbox://styles/mapbox/streets-v9'"

是否有可能让它从nodejs代码或以其他方式为mbtiles服务？

Answer 1

要提供本地 mbtiles 文件，您需要在 main.js 中注册 mbtiles 协议(protocol)。 .这样的事情应该这样做:

 const electron = require('electron');
 const protocol = electron.protocol;
 const path = require('path');
 
 protocol.registerHttpProtocol('mbtiles', (req, cb) => {
   const url = 'assets/resources/downloaded.mbtiles';
   cb({ path: path.normalize(`${__dirname}/${url}`) })
});

您可以在此处阅读 Electron 协议(protocol)处理程序: https://www.electronjs.org/docs/api/protocol#protocol