Jak zaimportować mapbox-gl-draw do Angular 2/4?

Question

Jestem importowanie modułu w moim kątowy 2/4 aplikacji tak:

import { MapboxDraw } from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'; 

i używając go w jednym ze składników tak:

var draw = new MapboxDraw({ 
    displayControlsDefault: false, 
    controls: { 
    polygon: true, 
    trash: true 
    } 
}); 

map.addControl(draw); 

ale otrzymuję błąd, gdy otwórz stronę:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor 

Jaki jest najlepszy sposób na importowanie mapbox-gl-draw?

Answer 1

Jest to minimalny przykład aplikacja, która działa na moim komputerze: Opiera się na tego małego projektu na github: https://github.com/haoliangyu/ngx-mapboxgl-starter

import { Component } from '@angular/core'; 
 
import * as mapboxgl from 'mapbox-gl'; 
 
import * as MapboxDraw from 'mapbox-gl-draw'; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 

 
export class AppComponent { 
 
    ngOnInit() { 
 
    mapboxgl.accessToken = 'your Token'; 
 
    let map = new mapboxgl.Map({ 
 
     container: 'map', 
 
     style: 'mapbox://styles/mapbox/light-v9', 
 
     zoom: 5, 
 
     center: [-78.880453, 42.897852] 
 
    }); 
 

 
    let Draw = new MapboxDraw(); 
 

 
    map.addControl(Draw) 
 

 
    map.on('load', function() { 
 
     // ALL YOUR APPLICATION CODE 
 
    }); 
 
    } 
 
}

#map { 
 
    width: 500px; 
 
    height: 500px; 
 
}

<div id='map'></div>

Zauważ, że używam 'mapbox-gl-draw' zamiast '@mapbox/mapbox-gl-draw'. Więc możesz spróbować zainstalować ten pakiet przez npm install mapbox-gl-draw. Próbowałem później, ale to powoduje błąd dla mnie. Nie zapomnij również dodać wymaganego CSS mapbox-gl-draw.

Answer 2

mam instalacji npm install @mapbox/mapbox-gl-draw

dodanej css do skośnych cli.json

"../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css", 

składnika

import { Component } from '@angular/core'; 
import * as mapboxgl from 'mapbox-gl'; 
import * as MapboxDraw from '@mapbox/mapbox-gl-draw'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    static t; 
    ngOnInit() { 
    mapboxgl.accessToken = 'Token'; 
    AppComponent.t.map= new mapboxgl.Map({ 
     container: 'map', 
     style: 'mapbox://styles/mapbox/light-v9', 
     zoom: 5, 
     center: [-78.880453, 42.897852] 
    }); 

    const draw = new MapboxDraw({ 
     displayControlsDefault: false, 
     controls: { 
      polygon: true, 
      trash: true 
     } 
    }); 
    AppComponent.t.map.addControl(draw); 
    } 
}