OpenLayers: почему console.log в браузере может найти переменную - PullRequest
Новая
       9

OpenLayers: почему console.log в браузере может найти переменную

0 голосов
/ 25 апреля 2018

Я пытаюсь console.log(ol_map) из браузера, но выдает ошибку undefined . Команда работает через код. Почему это происходит?

Я использую Symfony Framework и 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);

файл: 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 %}

1 Ответ

0 голосов
/ 02 мая 2018

Вот более подробное объяснение моего комментария выше:

В Webpack каждый модуль (файл) импортирует и экспортирует код.Когда код передается / упаковывается для браузера, каждый из этих модулей помещается в замыкание , что гарантирует, что внутренний код не попадет в другие модули.Это очень важно, в противном случае вам всегда нужно будет убедиться, что вы случайно не перезаписываете переменные или функции из других модулей.

Полагаю, вы ошибочно предположили, что ваш модуль верхнего уровня отличается и чтоэкспортируется в область видимости верхнего уровня (окна) браузера.Это не тот случай!

Консоль браузера работает в основной области, где ваша внутренняя переменная ol_map неизвестна.Конечно, эта переменная где-то есть, но она где-то внутри некоторой функции (или даже глубже, в подподчиненной ...- функции).Возможно, ваша переменная также была переименована в веб-пакете (чтобы уменьшить объем кода), поэтому даже если вы добавите в код отладочную точку останова, вы можете не сразу распознать вашу переменную (но она есть!).

Однако есть некоторые глобальные вещи, к которым вы можете обратиться изнутри модуля: window - это объект окна браузера.Это представляет глобальную область.Например, когда вы пишете var x = 'hello'; в консоли, эта переменная x станет свойством window.

Поэтому, написав window.ol_map = ol_map в своем коде, вы создаете глобальную переменную, к которой затем легко получаете доступ в браузере и консоли браузера.

...