javascript - Eroare la crearea unei noi instanțe a L.control() folosind Leaflet și Angular 6

Urmez acest tutorial: https://leafletjs.com/examples/choropleth/

Încerc să creez un control personalizat când trec cu mouse-ul peste Geojson-ul meu pe hartă.

Dar am o eroare la "info=L.control();"

Nu se poate invoca o expresie al cărei tip nu are o semnătură de apel. Tipul 'type of control' nu are semnături de apel compatibile.

Cineva mă poate traduce? Mulțumesc pentru ajutor.

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);

    });

Răspuns #1

Pentru a evita apariția acestei erori, trebuie să inițializați controlul astfel: new L.Control()

În plus, unele părți din codul tău nu au sens, de exemplu ai presupus că ai o variabilă globală json, dar nu există niciuna, deoarece o folosești ca this.json mai târziu. În schimb, ai o variabilă geojson.

De asemenea, nu există un constructor pentru injectarea http pentru a face o cerere get. Am pregătit un exemplu funcțional pentru ceea ce încerci să realizezi: Demo