मैपबॉक्स टाइपस्क्रिप्ट

Question

मैं इस परियोजना का पालन करके कोणीय 2 और वेबपैक के साथ काम करने के लिए पत्रक प्राप्त करने में कामयाब रहा।

angular 2 leaflet starter

मैं typings "browser.d.ts" में विन्यस्त देख सकते हैं:

... 
entry: { 
    'polyfills': './src/polyfills.ts', 
    'libs': './src/libs.ts', 
    'main': './src/main.ts' 
}, 
... 

":

/// <reference path="browser\ambient\leaflet\leaflet.d.ts" /> 

webpack.config.js एक प्रवेश के बिंदु को परिभाषित libs.ts "में पत्रक मॉड्यूल का आयात होता है:

import 'leaflet'; 

मैं एटम का उपयोग कोड संपादक के रूप में कर रहा हूं। अब यह सभी पत्रक वर्गों और विधियों को पहचानता है। अब मैं इस तरह की चीजें कोणीय 2:

import {Map, TileLayer} from 'leaflet'; 
... 
this.baseMaps = { 
    StreetMap: new TileLayer('mapbox.streets') 
}; 

यहां मेरी समस्याएं शुरू हो रही हैं। मैं mapbox.js का उपयोग करने की कोशिश कर रहा हूँ। मैंने जो किया वह मैपबॉक्स.जेएस लाइब्रेरी और टाइपिंग स्थापित किया गया था:

npm install mapbox.js --save 
typings install mapbox --save 

यह वह जगह है जहां मैं अटक गया हूं। मेरे जीवन के लिए मैं यह नहीं समझ सकता कि पत्रिका को क्या करना है।

import 'mapbox'; 

काम नहीं करता है। क्योंकि यह पत्रक पुस्तकालय फैली हुई है,

/// <reference path="browser\ambient\leaflet\leaflet.d.ts" /> 
/// <reference path="browser\ambient\mapbox\mapbox.d.ts" /> 

मुझे लगा MapBox सिर्फ काम करेंगे:

ERROR in ./src/libs.ts 
Module not found: Error: Cannot resolve module 'mapbox' in C:\Develop\angular2-webpack-starter\src 
@ ./src/libs.ts 3:0-17 

मैं "browser.d.ts" देख सकते हैं निम्नलिखित है?

ऐसा लगता है कि मैं मूल रूप से जो मानक है कुछ इस तरह कर सकते हैं, जावास्क्रिप्ट रास्ता:

this.baseMaps = { 
    StreetMap: L.mapbox.tileLayer('mapbox.streets') 
}; 

लेकिन यह नहीं:

this.baseMaps = { 
    StreetMap: new TileLayer('mapbox.streets') 
}; 

यह स्पष्ट रूप से या तो काम नहीं करता:

import {Map, TileLayer} from 'mapbox'; 

मैं क्या गलत कर रहा हूं?

Answer 1

आप केवल mapbox.js एनपीएम मॉड्यूल का उपयोग कर सकते हैं, और इसमें आपको जो कुछ भी चाहिए वह शामिल होगा।

npm install mapbox.js --save

इस उदाहरण देखें। हम मॉड्यूल लोडिंग करने के लिए वेबपैक का उपयोग कर रहे हैं, और टाइपस्क्रिप्ट के साथ आपको अवांछित मॉड्यूल के लिए स्पष्ट रूप से import * की आवश्यकता है।

import * as L from 'mapbox.js'; 

const map = L.mapbox.map('mapContainer', 'mapbox.streets'); 

// do stuff. 

Answer 2

मेरे जैसे किसी भी व्यक्ति के लिए जो सिर्फ अपनी परियोजना में दिखाने के लिए एक नक्शा प्राप्त करना चाहता था, यहां मुझे यह मिला है। ज्यादातर Angular2 Mapbox-gl Starter पर आधारित है।

कोणीय से 2 MapBox-जीएल जोड़ना - Webpack और टाइपप्रति

जरूरत संकुल स्थापित करें ...
npm install mapbox-gl --save
npm install @types/mapbox-gl --save
npm install @types/geojson --save

webpack में सामग्री जोड़ें ...

module.exports = function(options) { 
    return { 
    resolve: { 
     alias: { 
     'mapbox-gl': '../node_modules/mapbox-gl/dist/mapbox-gl.js' 
     } 
    }, 
    module: { 
     postLoaders: [ 
     { 
      include: /node_modules\/mapbox-gl-shaders/, 
      loader: 'transform', 
      query: 'brfs' 
     } 
     ] 
    } 
    } 
} 

एक map.service.ts जोड़ें (किसी कारण मैं आयात में पूर्ण संबंधित पथ का इस्तेमाल किया था के लिए) ...

import { Injectable } from '@angular/core'; 
import * as mapboxgl from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; 
import { Map } from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; 

@Injectable() 
export class MapService { 
    map: Map<any, any>; 

    constructor() { 
    (mapboxgl as any).accessToken = 'YOUR_MAPBOX_TOKEN_HERE'; 
    } 
} 

अपने घटक के नक्शे जोड़ें ...

import { Component } from '@angular/core'; 
import { MapService } from '../../api/resources/map.service'; 
import { Map } from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; 

@Component({ 
    selector: 'my-component', 
    styles: [ require('./my-component.component.less') ], 
    template: require('./my-component.component.html'), 
    providers: [ MapService ] 
}) 
export class MyComponentComponent { 
    constructor(private mapService: MapService) { } 
    ngOnInit() { 
    let map = new Map({ 
     container: 'map', 
     style: 'mapbox://styles/mapbox/light-v9', 
     zoom: 5, 
     center: [-78.880453, 42.897852] 
    }); 

    this.mapService.map = map; 
    } 
} 

मानचित्र जोड़ें अपने html में div ...

// my-component.component.html 
<div id="map" class="mapboxgl-map"></div> 

शैलियों के लिए, मैं LESS उपयोग करते हैं, तो मैं वहाँ MapBox शैलियों आयातित ...

// my-component.component.less 
@import (less) '../../../../node_modules/mapbox-gl/dist/mapbox-gl.css';