Mapbox Typescript

Question

Sono riuscito a far funzionare Leaflet con Angular 2 e Webpack seguendo questo progetto.

angular 2 leaflet starter

posso vedere le tipizzazioni configurate in "browser.d.ts":

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

webpack.config.js definisce un punto di ingresso:

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

Il " libs.ts "contiene l'importazione del modulo Leaflet:

import 'leaflet'; 

Sto usando Atom come editor di codice. Ora riconosce tutte le classi e i metodi di Leaflet. Ora posso fare cose come questa in Angular 2:

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

Qui è dove iniziano i miei problemi. Sto cercando di usare mapbox.js. Quello che ho fatto è stato installare la libreria mapbox.js e le digitazioni:

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

Questo è il punto in cui sono bloccato. Per la vita di me non riesco a capire come fare ciò che Leaflet è riuscito a fare.

import 'mapbox'; 

Non funziona.

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 

posso vedere "browser.d.ts" ha la seguente:

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

Ho pensato che forse Mapbox sarà solo lavorare, perché si estende la libreria Volantino?

Sembra che posso fondamentalmente fare qualcosa di simile, che è lo standard javascript modo:

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

Ma non questa:

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

Questo, ovviamente, non funziona neanche:

import {Map, TileLayer} from 'mapbox'; 

Cosa sto sbagliando?

Answer 1

È possibile utilizzare il modulo NPM mapbox.js e includerà tutto ciò di cui si ha bisogno.

npm install mapbox.js --save

Vedi questo esempio. Stiamo usando Webpack per caricare il modulo e con TypeScript è necessario esplicitamente import * per i moduli non tipizzati.

Answer 2

Per chi come me desiderava solo ottenere una mappa da mostrare nel proprio progetto, ecco come l'ho ottenuta. Basato principalmente su Angular2 Mapbox-gl Starter.

Aggiunta Mapbox-gl a angolare 2 - Webpack e tipografico

installare i pacchetti necessari ...
npm install mapbox-gl --save
npm install @types/mapbox-gl --save
npm install @types/geojson --save

Aggiungi roba da 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' 
     } 
     ] 
    } 
    } 
} 

Crea una map.service.ts (Per qualche motivo ho dovuto usare percorsi completi relativi a importazioni) ...

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

aggiungere mappe al componente ...

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

Aggiungere mappa div al tuo html ...

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

per gli stili, io uso LESS, così ho importato gli stili mapbox lì ...

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