使用 Leaflet & Angular 6 创建 L.control() 的新实例时出错

Question

我遵循这个教程：https://leafletjs.com/examples/choropleth/

当我将鼠标悬停在地图上的 Geojson 上时，我尝试制作自定义控件。

但是我在 "info = L.control();"

上有一个错误

Cannot invoke an expression whose type lacks a call signature. Type 'type of control' has no compatible call signatures.

有人可以翻译我吗？谢谢你的帮助。

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 请求的构造函数。我为您要实现的目标准备了一个工作示例：Demo

使用 Leaflet & Angular 6 创建 L.control() 的新实例时出错

Error when creating a new instance of L.control() using Leaflet & Angular 6

javascript

geojson

leaflet

typescript

angular