2017-09-15 18 views
1

マニュアルに書かれたように、私はL.Class.include()を使用していくつかのカスタムのfunctionnalitiesを実装することができ付きL.Class.include()の等価:Lと、既存のクラスではより多くの機能を含む(リーフレット付き)JavaScriptで活字体

.Class.include() 新しいメソッドとオプションの追加 いくつかのメソッドの変更 addInitHookを使用して追加のコンストラクタコードを実行します。

これは動作します:

L.Rectangle.include({ 
    contains: function (markers: L.Marker[]) { 
     const markersContained: boolean[] = []; 
     markers.forEach(marker => { 
     console.log(marker); 
     markersContained.push(this.getBounds().contains(marker.getLatLng())); 
     }) 
     return markersContained; 
    } 
    }); 

今、私は活字体とAngular4アプリケーションで同じことを実現しようとしているが、include()機能が@types/leaflet

で入力するようには見えません

私のコードはLeaflet.Drawプラグイン用に調整された.tsファイルにあるので、この方法でファイルを初期化しなければなりませんでした:

原因 Leaflet.Drawプラグインは、したがって、私は、通常のリーフレットの種類をインポートすることはできません、何 @typesを持っていないという事実に代わり、正規

import * as L from 'leaflet'; 

declare const L: any; 
import 'leaflet-draw/dist/leaflet.draw-src'; 

(そうでなければ、new L.Control.Draw()は、コンパイルエラーになるだろう)。

これは、コンパイル時に壊れる:

map.on(L.Draw.Event.CREATED, (geometry: L.LayerEvent) => { 
    const layer = geometry.layer; 
    drawnItems.addLayer(layer); 

    // Set an array containing all the markers 
    const markers = LeafletService.prototype.jsonToArray(layerGroup.getLayers()); 

    // ===> Property 'contains' does not exist on type 'Layer'. 
    const result = geometry.layer.contains(markers); 
    console.log('result => ', result); 
    }); 

と明らかに、これは私がanyとして私のジオメトリタイプを設定した場合に動作しますが、私は可能であればL.LayerEventタイプを使用したい、と知ってほしいと思いますリーフレットinclude()メソッドを正しく使用するために、TypeScript構文を使用する方法は?

答えて

0

TL; DR:私は、彼らがLeaflet.Drawを入力しない限り、それは最終的には非常に明白だったので、そのため何の種類を持っていないLeaflet.Drawの...わかりました...

anyを使用する必要があり、 Leaflet.DrawプラグインをLeafletと統合するとき、コンパイルエラーを避けるためにはdeclare const L: anyにする必要があります。

ので、明らかに、私はL.Rectangleを呼び出すとき、Lは、タイプanyであるため、私はおそらく(私は、実行時に実際のメソッドを使用するのですLeafletから入力されたinclude()メソッドを使用することはできませんが、私はの活字体に認識させることができませんコンパイル時に)。

それはLeaflet.Drawイベントから返されたジオメトリは、それが実際のL.Rectangleリーフレットタイプにリンクされていないので、私が追加された新しい方法について知っていないことを唯一の論理的です。