Question

我正在尝试从浏览器console.log(ol_map)，但它会给我一个 undefined 错误。该命令通过代码工作。为什么会发生这种情况？

我正在使用Symfony框架，使用Webpack Encore来管理我的资产。

档案：map.js

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

import View from 'ol/view';
import VectorLayer from 'ol/layer/vector';
import TileLayer from 'ol/layer/tile';
import Map from 'ol/map';

var proj = require('ol/proj').default;
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 coordinate = require('ol/coordinate').default;
//var VectorLayer = require('ol/layer/vector').default;
var VectorSource = require('ol/source/vector').default;
var GML = require('ol/format/gml').default;
var WFS = require('ol/format/wfs').default;

const ol_map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new ol_source_OSM()
        }),
        //new VectorLayer({
        //    source: new VectorSource({
        //        format: new WFS(),
        //        url: 'http://environment.data.gov.uk/ds/wfs?SERVICE=WFS&INTERFACE=ENVIRONMENTWFS--864c72de-d465-11e4-855f-f0def148f590'
        //    })
        //})
    ],
    view: new ol_View({
        //cordinates in ESPG3857
        center: [-254382.41,7068896.29],
        zoom: 6
    })
});

console.log(ol_map);

file：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 %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <div class="arrow_box" id="popup-container" style="display: none;"></div>

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

Answer 1

以上是对我上述评论的更长解释：

在Webpack中，每个module（文件）导入和导出代码。当为浏览器编译/打包代码时，每个模块都包含在closure中，确保内部代码不会泄漏到其他模块中。这非常重要，否则您必须始终确保不会意外地从其他模块覆盖变量或函数。

我猜你错误地认为，你的顶层模块是不同的，并且东西被导出到浏览器的顶级（窗口）范围。事实并非如此！

浏览器的控制台适用于主范围，内部变量ol_map未知。当然这个变量在某个地方，但它在里面某个函数（甚至更深，在子子函数中）。也许您的变量也被webpack重命名（使代码占用空间更小），所以即使在代码中添加调试断点，您也可能无法立即识别您的变量（但它就在那里！）。

但是，有些全局内容可以从模块内部访问：window是浏览器窗口对象。它代表了全球范围。例如，当您在控制台中编写var x = 'hello';时，该变量x将成为window的属性。

因此，通过在代码中编写window.ol_map = ol_map，您可以创建一个全局变量，然后您可以在浏览器和浏览器控制台中轻松访问该变量。

OpenLayers：为什么浏览器中的console.log可以找到变量

1 个答案: