Rails webpacker OpenLayers. Uncaught ReferenceError: ol is not defined. Fixed but not solved

Rails webpacker OpenLayers. Uncaught ReferenceError: ol is not defined. Fixed but not solved

完全错误:

layerSwitcherDemo.js:52 Uncaught ReferenceError: ol is not defined
    at Module../app/javascript/packs/layerSwitcherDemo.js (layerSwitcherDemo.js:52)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/packs/layerSwitcherDemo.js @   layerSwitcherDemo.js:52
__webpack_require__ @   bootstrap:19
(anonymous) @   bootstrap:83
(anonymous)

这是通过 <%= javascript_pack_tag 'layerSwitcherDemo' %>people/show.html.erb 调用的。

如果我使用 map/ol_layer_switcher.html.erb 中的相同 <%= javascript_pack_tag 'layerSwitcherDemo' %>,脚本工作正常。

// javascript/packs/layerSwitcherDemo.js
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerImage from 'ol/layer/Image';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import LayerSwitcher from 'ol-layerswitcher';
import {transformExtent, fromLonLat} from 'ol/proj';

var <a long list>

// the next line is line 52 in the error      
var map = new ol.Map({
    target: 'map',
    layers: [
// rest of the code

我正在尝试慢慢构建以制作 OpenLayers 地图。我将使用与 LayerSwitcherDemo 不同的东西,我制作它只是为了确保它会在 Rails 中加载。 Layer Switcher是我修改的demo

只是想比较编译的 layerSwitcherDemo-xx.js 脚本,所有 55k 行都是相同的。 application-xx.js 相同。

现已修复但未解决。正在工作的页面加载了 OpenLayers 的 CDN 版本。作为 Webpack 的新手,我不确定哪个最好。我想我携带的代码更少了。让 CDN 来做。这将是一个很少使用的应用程序。我猜我需要某种等同于 import $ from 'jquery'

的定义

包含在发布中。我通过使用 OpenLayers CDN 而不是依赖 webpack 来加载 ol 来修复。以下是无效页面的资源。 ol (openlayers) 在那里。

在您的示例中,您调用了 ol.Map,但您导入了 Map。按如下方式编辑您的 Webpack JS:

import Map from 'ol/Map'

// ... other imports

const map = new Map({   // replaces ol.Map
    target: 'map',
    layers: [
// ...

或者,根据 main entry point in the the openlayer module.

,以下将适用于 一些 导入
import * as ol from 'ol';

new ol.Map() // but not ol.LayerGroup, for example ...