Webpack Encore - OpenLayers：为什么导出不正确

Question

我正在尝试在我的 symfony 应用程序中使用 OpenLayers 库。我使用 Webpack encore 来管理我的资产。我已经使用 npm 下载了 OpenLayers 库。

当我试图在 js 文件中使用它时，只有第一个 'ol' class 可用，它下面的 classes 不可用。在浏览器中 ol.layer.Tile class 无法识别并抛出异常（未捕获类型错误）.

// map.js

require('../css/map.css');
const ol = require('ol');

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
    })
});

//map.html.twig

{% extends '::base.html.twig' %}

{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
    {{ parent() }}

    <link href="{{ asset('build/map.css') }}" rel="stylesheet" />
    {#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}

{% endblock %}

{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
    {{ parent() }}
    {#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
    <script src="{{ asset('build/map.js') }}"></script>
{% endblock %}

{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}

{% block body %}
<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
</body>
{% endblock %}

Answer 1

如果您使用 require

，则无需添加脚本标签

`{#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}`

您还应该需要 Tile、View

var ol_Map = require('ol/map').default;
var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;

var map = new ol_Map({
    target: 'map',
    layers: [
        new ol_layer_Tile({
            source: new ol_source_OSM()
        })
    ],
    view: new ol_View({
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
    })
});

查看来自 OpenLayers 的文档http://openlayers.org/en/latest/doc/tutorials/browserify.html

Webpack Encore - OpenLayers：为什么导出不正确

Webpack Encore - OpenLayers : why is not exported properly

gis

openlayers

symfony

webpack

webpack-encore