我试图在Laravel 5.7项目中使用OpenLayers（v5.3.0），但是从node_modules导入ol时遇到很多麻烦。
我按照以下方式安装了ol（基于https://www.npmjs.com/package/ol）：
npm install ol
然后我更新了resources \ js \ app.js，该文件现在仅包含以下内容：
require('./bootstrap');
require('ol');
编辑：我也曾在resources \ js \ app.js中尝试以下操作，但未成功：
require('./bootstrap');
const ol = require('ol');
我的webpack.mix.js包含以下内容：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js/app.js', )
.sass('resources/sass/app.scss', 'public/css');
在名为map.blade.php的文件中也有以下相关行，我想在其中显示OpenLayers地图：
<script src="{!! mix('js/app.js') !!}"></script>
...
<div id='map' style='z-index: 1; width: 100%; height:calc(100% - 56px);'>
<script>
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
</script>
</div>
我也已经运行过npm run dev。
在Chrome中进行测试时，我在引用map.blade.php中的以下行时收到“ Uncaught SyntaxError：意外的标识符”：
import Map from 'ol/Map';
编辑：我还运行以下命令来确保已安装所有依赖项：
npm install --save-dev parcel-bundler
运行上述命令时没有出现任何错误，但Chrome中仍然存在相同的错误。
编辑：我还尝试将javascript从map.blade.php移出到新文件（mapscript.js）中，然后将其导入map.blade.php中（之后“地图” div），如下所示：
<script src="{!! asset('js/mapscript.js') !!}" type="module"></script>
但是我却收到以下错误：
Uncaught TypeError: Failed to resolve module specifier "ol/Map". Relative references must start with either "/", "./", or "../".
接着，我尝试将以下行从app.js移到mapscript.js：
require('ol');
还尝试了以下方法：
const ol = require('ol');
但是在两种情况下，相同的未捕获的TypeError仍然存在。
我已经尝试过在Stack Overflow和其他地方解决许多类似问题的解决方案，并且我还尝试在npm之外使用ol，但是我还没有找到任何能解决我问题的方法。我相信使用npm和Mix是将OpenLayers构建到我的项目中的最佳方法，但是我无法弄清为什么它不起作用。非常感谢您的帮助。
答案 0 :(得分：0)
经过反复试验，我让OpenLayers 6.1使用Mix，Webpack和ES6模块导入与Laravel 6.2一起工作。诀窍是将所有JavaScript都写在一个单独的文件中，然后将其捆绑到app.js中。
使用npm将openlayers安装到Laravel项目中：
npm install ol
在resources/js/myMap.js（与bootstrap.js和app.js一起）的Laravel项目中创建一个新文件，并将OpenLayers javascript代码放入其中。
让我们使用从官方文档中复制的简短代码示例，https://openlayers.org/en/latest/doc/tutorials/bundle.html
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'osm_map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
我们需要将其导出为文字对象，以使其可用于其他代码，因此请插入五行，如下所示。
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
var my_map = { // <-- add this line to declare the object
display: function () { // <-- add this line to declare a method
const map = new Map({
target: 'osm_map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
}; // <-- close the method
} // <-- close the object
export default my_map; // <-- and export the object
在bootstrap.js的末尾添加这两行，以使其合并我们的代码，并将对象my_map附加到全局窗口对象，以便我们可以从页面中引用它。
import my_map from './myMap.js';
window.my_map = my_map;
现在通过执行npm run dev将其捆绑在一起。请注意，我们正在使用Laravel的默认webpack和mix配置-根本不需要编辑webpack.mix.js。
npm run dev将我们的myMap.js文件中的代码复制到app.js中。每次我们编辑myMap.js时，都需要运行此程序。 （npm run watch可用于自动执行此步骤）。
要使地图显示在刀片模板中，我们需要使div ID与上述示例代码中的OpenLayers Map目标osm_map相匹配。这是最小的刀片。
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<style>
#osm_map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<div id="osm_map"></div>
</div>
<script src="{{ asset('js/app.js') }}" ></script>
<script type="text/javascript">
window.my_map.display();
</script>
</body>
</html>
注意：
这成功在Laravel刀片模板内显示了一个交互式OpenLayers映射。
答案 1 :(得分：0)
安装ol软件包：
npm install ol
在js文件夹（存在bootstrap.js和app.js的位置）的资源目录中，创建文件名map.js
resources/js/map.js
在map.js中编写您的Openlayer代码（示例代码）：
import 'ol/ol.css';
import {Map,View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 0
})
});
现在转到webpack.mix.js，通常在结尾。
在文件末尾添加.js('resources/js/map.js', 'public/js')
webpack.mix.js如下所示：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/map.js', 'public/js');
现在，npm run dev位于终端机
您的*.blade.php代码应为以下示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Using Webpack with OpenLayers</title>
<style>
#map {
height: 100%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
position: fixed;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="{{ asset('/js/map.js') }}"></script>
</body>
</html>
不允许直接从公用文件夹导入节点模块。在这里，我们将模块导入项目中，并在公用文件夹中的webpack的帮助下使用它。
对于生产环境：npm run production在终端机