2016-08-13 23 views
5

Chciałem narysować wielokąt na mapie ulotek w mojej aplikacji ionic2, ponieważ znalazłem wtyczkę do rysowania liści, ale otrzymuję ten błąd TypeError: L.Control .Draw nie jest konstruktoremTypeError: L.Control.Draw nie jest konstruktorem

Mój kod wygląda to

this.map = L 
    .map("map") 
    .setView(this.latLng, 13) 
    .on("click", this.onMapClicked.bind(this)) 

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png") 
    .addTo(this.map); 

this.marker = L 
    .marker(this.latLng, { draggable: true }) 
    .on("dragend", this.onMarkerPositionChanged.bind(this)) 
    .addTo(this.map); 

var drawnItems = new L.FeatureGroup(); 
this.map.addLayer(drawnItems); 
console.log(drawnItems); 
var drawControl = new L.Control.Draw({ 

    edit: { 
    featureGroup: drawnItems 
    } 
}); 
this.map.addControl(drawControl); 
+2

[ 'Leaflet.draw'] (https://github.com/Leaflet/Leaflet.draw) jest plugin. To nie jest część rdzenia Leaflet. Czy postępowałeś zgodnie z [instrukcjami instalacji] (https://github.com/Leaflet/Leaflet.draw#install) i czy zawierałeś odpowiedni plik JavaScript? – cartant

+0

Podążyłem za instrukcją instalacji. Ale aby móc go używać z mojego kodu maszynopisowego, zainstalowałem typowanie do rysowania ulotek i zawarte w mojej klasie przez ścieżkę referencyjną: /// <ścieżka referencyjna = "../../../ typings/globals/ulotka/index.d.ts "/>. Czy jest tu coś, o czym mnie tu mylę? – Nishant

+0

Również gdy debugowałem go z przeglądarki Chrome, zobaczyłem, że L.Control jest funkcją zdefiniowaną w pliku maszynopisu ulotki, natomiast w pliku-ulotce-pismo "Control" to przestrzeń nazw, wewnątrz który Draw jest zdefiniowany, więc myślę, że ten fragment kodu nie odnosi się do skorygowanej "Kontroli" – Nishant

Odpowiedz

2

trzeba dodać do głowy HTML CDN's

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>

i dodać do mapy { drawControl: true }

var map = L.map('mapid', { drawControl: true }).setView([25, 25], 2);

+0

Tęskniłem za tym samemu! Dzięki. Myślę, że problem polega na tym, że w dokumentacji nie ma potrzeby importowania skryptu, wydawało mi się, że jest już zawarty w pliku leaflet.js –

Powiązane problemy