Comment importer mapbox-gl-draw dans Angular 2/4?

J'importe le module dans mon angulaire 2/4 app comme ceci:Comment importer mapbox-gl-draw dans Angular 2/4?

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

et l'utiliser dans l'un des composants comme celui-ci:

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

map.addControl(draw);

mais je reçois une erreur lorsque je ouvrir la page:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor

Quelle est la meilleure façon d'importer mapbox-gl-draw?

Source

2017-08-18 Afeez Aziz

vérifier ce [lien] (https: //www.npmjs. com/paquet/angular2-mapbox) pourrait aider –

Salut Rahul, j'ai réussi à faire fonctionner mapbox-gl mais je ne peux pas dire la même chose pour mapbox-draw-gl. –

Ceci est un exemple d'application minimale qui fonctionne sur ma machine: Il est basé sur ce petit projet sur 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>

Notez que j'utilise 'mapbox-gl-draw' au lieu de '@mapbox/mapbox-gl-draw'. Donc, vous pouvez essayer d'installer ce paquet via npm install mapbox-gl-draw. J'ai essayé le dernier, mais cela me cause une erreur. N'oubliez pas non plus d'ajouter le fichier CSS mapbox-gl-draw requis.

Source

2017-08-18 11:42:47

Salut, j'ai essayé d'utiliser la fonction require, mais malheureusement, cela ne fonctionne pas car je pense que cela a à voir avec le fait qu'il s'agit d'une application Angular 2. –

@AfeezAziz Ma réponse dit que vous devriez utiliser 'import {MapboxDraw} de '@ mapbox/mapbox-gl-draw';' et ne pas exiger. La partie importante est que le chemin est différent de votre initiale. –

Salut, si c'est le cas, alors cela ne fonctionne toujours pas malheureusement. Le changement de ''@ mapbox/mapbox-gl-draw';' '' '' @ mapbox/mapbox-gl-draw/dist/mapbox-gl-draw '; 'est parce que je suivais les instructions de mapbox-gl qui travaux. –

i ont installer npm install @mapbox/mapbox-gl-draw

ajouté en-cli.json css angulaire

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

Component

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); 
    } 
}

Source

2017-11-22 11:20:41

Comment importer mapbox-gl-draw dans Angular 2/4?

Répondre

Questions connexes