Использование шаблона-прототипа при создании карты листовок: ошибка с функцией onEachFeature

У меня есть следующий код, который я вызываю для создания копии объекта карты и инициализации карты Leaflet. Это работает и загружается правильно. Однако функции onEachFeature и/или clickFeature не работают должным образом.

var map = {
    mapUrl: "",
    maxZoom: 18,
    minZoom: 2,
    map: L.map('worldMap').setView([51.505, -0.09], 2),
    create: function(values) {
        var instance = Object.create(this);
        Object.keys(values).forEach(function(key) {
        instance[key] = values[key];
        });
        return instance;
    },
    initLeafletMap: function() {
        L.tileLayer(this.mapUrl, {
            attribution: '',
            maxZoom: this.maxZoom,
            minZoom: this.minZoom,
            id: 'mapbox.streets'
        }).addTo(this.map);
        //add continents' outlines
        $.getJSON("/static/continents.json", 
           (function(style, onEachFeature, map) {
                return function(continents) {
                    console.log(typeof(continents));
                    L.geoJson(continents, {
                        style: style,
                        onEachFeature: onEachFeature
                    }).addTo(map);
                };
            }(this.style, this.onEachFeature, this.map))
       );
    },
    style: function() {
        return {
            weight: 2,
            opacity: 1,
            color: 'beige',
            dashArray: '3',
            fillOpacity: 0
        };
    },
    onEachFeature: function(feature, layer) {
        layer.on({
            click: this.clickFeature
        });
    },
    clickFeature: function(e) {
            do something here();
    },

Поэтому, когда я нажимаю на карту, я знаю, что вызывается функция onEachFeature, но она не вызывает clickFeature. Вместо этого я получаю эту ошибку в консоли:

leaflet.js:5 Uncaught TypeError: Cannot read property 'call' of undefined
    at e.fire (leaflet.js:5)
    at e._fireDOMEvent (leaflet.js:5)
    at e._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.r (leaflet.js:5)

person KSS    schedule 25.03.2019    source источник
comment
Пожалуйста, используйте неминифицированный файл leaflet-src.js вместо leaflet.js - это даст вам более удобочитаемую трассировку стека.   -  person IvanSanchez    schedule 26.03.2019


Ответы (1)


Вероятно, многим просто нужно связать контекст this, когда вы передаете свой метод onEachFeature в качестве аргумента вашего IIFE для создания обратного вызова для вашего вызова AJAX:

this.onEachFeature.bind(this)

Смотрите также Событие клика по маркеру буклета работает нормально, но методы класса не определены в функции обратного вызова

Кстати, вы также можете прикрепить свой прослушиватель событий клика непосредственно к группе слоев Leaflet GeoJSON вместо того, чтобы делать это для каждого дочернего слоя.

person ghybs    schedule 26.03.2019