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

使用Leaflet＆Angular 6创建L.control（）的新实例时出错

1 个答案: