Question

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

当我试图在js文件中使用它时，只有第一个＆＃39; ol＆＃39; class是可用的，它下面的类不是。在浏览器中， 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 %}

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：为什么导出不正确

1 个答案: