Question

我对mapbox-gl-js有一个奇怪的问题。当我将mapbox-gl.js文件作为CDN添加到html doc head时，地图渲染得很好。当我需要它并将其与browserify捆绑在一起时，如图所示，地图不会渲染，我收到类似这样的捆绑错误：Error: Cannot find module './feature' from '/home/.../mbtst/node_modules/mapbox-gl/dist'

文档描述了如何使用模块捆绑器： https://www.mapbox.com/mapbox-gl-js/api/。在发布此问题时（由于此问题已经更改）：

npm install --save mapbox-gl
import mapboxgl from 'mapbox-gl/dist/mapbox-gl';
// or "const mapboxgl = require('mapbox-gl/dist/mapbox-gl');"

我的地图是这样发起的：

mapboxgl.accessToken = 'pk.eyJ1IjoiZWxsdnRyemVnIiwiYSI6ImNpejl4M2M0NDAxbWoycXRlanZnc283dnYifQ.sPFCSTsdlCOp1hk6afDvJg';
this.map = new mapboxgl.Map({
    container: 'map-container', // container id
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [6.16342, 62.47126], // aalesund 
    zoom: 11
});

如果我只是要求模块require('mapbox-gl'); - 同样的错误。

我甚至尝试从CDN源保存文件并要求该文件 - 它抱怨缺少多个依赖模块。

代码在这个回购中： https://github.com/awesomemaptools/mbtst

PS：我需要捆绑脚本以便在Cordova应用程序中脱机使用，即使用cdn不是一种选择。

Answer 1

事实证明这是一个错误，mapbox中的人正在努力修复它，请参阅此处的问题：https://github.com/mapbox/mapbox-gl-js/issues/4453

与此同时，我从mapbox-gl版本“^ 0.33.1”升级到“^ 0.34.0”，现在它可以解决这个问题，包括src而不是像这样的dist：

const mapboxgl = require('mapbox-gl/src/index.js');

我尝试使用之前的版本，但它当时没有用。

Answer 2

您提供的代码似乎基本上没问题。尝试使用require代替import：

const mapboxgl = require('mapbox-gl/dist/mapbox-gl');

然后在终端中呼叫以下内容：

browserify your-main-js-file.js > bundle.js

这会将您的代码和所需模块添加到创建的JavaScript文件bundle.js中，因此即使您已离线，所有内容都应该可用。

然后通过script-tag将输出包添加到HTML页面：

<script src="bundle.js"></script>

有关详细信息，请参阅https://github.com/substack/browserify-handbook#bundling-for-the-browser，并查看options browserify用于自定义捆绑包。

mapbox-gl-js在与browserify捆绑时不会渲染

2 个答案: