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 ...
完全错误:
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 ...