Ошибка при создании нового экземпляра L.control () с использованием Leaflet & Angular 6

Question

Я следую этому уроку: https://leafletjs.com/examples/choropleth/

Я пытаюсь создать пользовательский элемент управления, когда наведу курсор мыши на мой Geojson на карте.

Но у меня есть ошибка "info = L.control(); "

Невозможно вызвать выражение, тип которого не имеет подписи вызова.Тип «тип управления» не имеет совместимых подписей вызовов.

Кто-то может мне перевести?спасибо за вашу помощь.

var mapboxAccessToken = "key";

const myfrugalmap = L.map('frugalmap').setView([47.482019, -2], 7.5);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
    id: 'mapbox.light',
    attribution: 'SOS'
}).addTo(myfrugalmap); 

    this.http.get('assets/departements.json').subscribe((json: any) => {
      console.log(json);
      this.json = json;

var geojson;

geojson =  L.geoJSON(this.json, {
    style: function(feature) {
        switch (feature.properties.code) {
            case '44': return {color: "white",fillColor:"red", fillOpacity: 0.1};
            case '53':   return {color: "white",fillColor: "yellow", fillOpacity: 0.1};
            case '72':   return {color: "white",fillColor: "orange", fillOpacity: 0.1};
            case '85':   return {color: "white",fillColor: "green", fillOpacity: 0.1};
            case '49':   return {color: "white",fillColor: "blue", fillOpacity: 0.1};

        }
    },

    onEachFeature: function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

} ).addTo(myfrugalmap);

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.2
    });

    if (!L.Browser.ie &&  !L.Browser.edge) {
        layer.bringToFront();
    }

info.update(layer.feature.properties);    
}


function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}


function zoomToFeature(e) {
    myfrugalmap.fitBounds(e.target.getBounds());
}

var info;

info = L.control();

info.onAdd = function (myfrugalmap) {
    this._div = L.DomUtil.create('div', 'info'); 
    this.update();
    return this._div;
};


info.update = function (props) {
    this._div.innerHTML = '<h4>Pays de la Loire</h4>' +  (props ?   '<b>' + props.nom + '</b><br />'
        : '');
};

info.addTo(myfrugalmap);

    });

Answer 1

Чтобы избежать этой ошибки, вам нужно инициализировать элемент управления следующим образом: new L.Control()

Более того, некоторые части вашего кода не имеют смысла, например, у вас должна быть глобальная переменная jsonно нет никого, поскольку вы используете его как this.json впоследствии.вместо этого у вас есть переменная geojson.

Также нет конструктора для введения http для выполнения запроса get.Я подготовил рабочий пример того, чего вы пытаетесь достичь: Демо