リーフレットcustomcontrol - 角度2+私Angular2 +コンポーネントにカスタムフォームのコントロールを統合する必要性に

Question

：

export class HeatMapComponent { 
... 
    onMapReady(map: L.Map) { 
    let div = L.DomUtil.create('div', 'info'); 
    let info = new L.Control(); 
    info.onAdd =() => { 
     return div; 
    }; 
    info.addTo(map); 
    } 
} 

そして、このような.hmtlファイル：

<div class="map container-fluid" 
    leaflet [leafletOptions]="options" 
    [leafletLayersControl]="layersControl" 
    (leafletMapReady)="onMapReady($event)"> 
</div> 

の.css：

... 

    .info { 
     padding: 2rem 1rem; 
     margin-left: 70rem; 
     margin-right: 15rem; 
     font: 1rem/1.5rem Arial, Helvetica, sans-serif; 
     background: white; 
     background: rgba(255,255,255,0.8); 
     box-shadow: 0 0 15px rgba(0,0,0,0.2); 
     border-radius: 5px; 
    } 

このような.JSで書かれたリーフレットの文書には、

var info = L.control();info.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" 
this.update(); 
return this._div; 
}; 
// method that we will use to update the control based on feature properties passed 
info.update = function (props) { 
    this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 
     '<b>' + props.name + '</b><br />' + props.density + ' people/mi<sup>2</sup>' 
     : 'Hover over a state'); 
}; 

info.addTo(map); 

誰かが私のonMapReadyにaddToメソッドを組み込むことができない理由を知っていますか？何かエラーはありませんが、マップには何も表示されません。

Answer 1

私は解決策がある。この問題を解決：

onMapReady(map: leaflet.Map) { 
let div = leaflet.DomUtil.create('div', 'infoControl'); 
let info = new leaflet.Control(); info.onAdd =() => { 
return div; 
    }; 
console.log(div); 
info.addTo(map); 
}