एंगुलर 2/4 में मैपबॉक्स-ग्ल-ड्रॉ कैसे आयात करें?

Question

मैं इस तरह मेरे कोणीय 2/4 अनुप्रयोग में मॉड्यूल का आयात कर रहा हूँ:

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

और इस तरह घटकों में से एक में इसका उपयोग करने:

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

map.addControl(draw); 

लेकिन मुझे एक त्रुटि जब मैं हो रही है पृष्ठ खोलें:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor 

मैपबॉक्स-ग्ल-ड्रा आयात करने का सबसे अच्छा तरीका क्या है?

Answer 1

यह है कि मेरे मशीन पर काम करता है एक न्यूनतम उदाहरण अनुप्रयोग है: यह 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>

ध्यान दें कि मैं 'mapbox-gl-draw' बजाय '@mapbox/mapbox-gl-draw' उपयोग कर रहा हूँ। तो आप npm install mapbox-gl-draw के माध्यम से इस पैकेज को स्थापित करने का प्रयास करना चाहेंगे। मैंने बाद में कोशिश की लेकिन यह मेरे लिए एक त्रुटि फेंकता है। आवश्यक नक्शाबॉक्स-ग्ल-ड्रा सीएसएस जोड़ने के लिए भी मत भूलना। //www.npmjs:

Answer 2

मैं कोणीय cli.json

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

घटक

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