Webpack Encore - OpenLayers：为什么没有正确导出答案

【问题标题】：Webpack Encore - OpenLayers : why is not exported properlyWebpack Encore - OpenLayers：为什么没有正确导出
【发布时间】：2018-04-23 03:34:36
【问题描述】：

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

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

// 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 %}

【问题讨论】：

标签： symfony webpack gis openlayers webpack-encore

【解决方案1】：

如果您使用require，则无需添加脚本标签

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

您还应该需要平铺、视图

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

【讨论】：

谢谢，Tan，你是对的，我必须明确要求 TIle 类。我还必须将我的脚本标签 <script src="{{ asset('build/map.js') }}"></script> 移动到 map.html.twig 文件的正文中。为什么它在 javascripts 块中时不起作用？
很高兴为您提供帮助:)