Mapbox Typescript

Question

Udało mi się uzyskać ulotkę współpracującą z Angular 2 i Webpack, wykonując ten projekt.

angular 2 leaflet starter

widzę typowania skonfigurowane "browser.d.ts":

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

webpack.config.js określa punkt wyjścia:

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

The " libs.ts "zawiera import modułu ulotki:

import 'leaflet'; 

Używam Atom jako edytora kodu. Teraz rozpoznaje wszystkie klasy i metody Leaflet. Teraz mogę robić takie rzeczy w Angular 2:

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

Tutaj zaczynają się moje problemy. Próbuję użyć mapbox.js. To, co zrobiłem, to zainstalowałem bibliotekę mapbox.js i wpisy:

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

To tutaj utknąłem. Dla mojego życia nie wiem, jak zrobić to, co udało się zrobić w Leaflet.

import 'mapbox'; 

Nie działa.

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 

widzę "browser.d.ts" ma następujące elementy:

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

Myślałem, że może Mapbox będzie po prostu pracować, ponieważ rozszerza bibliotekę ulotka?

Wydaje się, że mogę po prostu zrobić coś takiego, co jest standardowym sposobem javascript:

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

Ale nie to:

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

To oczywiście nie działa albo:

import {Map, TileLayer} from 'mapbox'; 

Co robię źle?

Answer 1

Możesz po prostu użyć modułu NPM mapbox.js, który będzie zawierał wszystko, czego potrzebujesz.

npm install mapbox.js --save

Zobacz ten przykład. Używamy pakietu Webpack do ładowania modułu, a przy TypeScript musisz jawnie import * dla modułów bez typu.

import * as L from 'mapbox.js'; 

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

// do stuff. 

Answer 2

Dla wszystkich takich jak ja, którzy chcieli uzyskać mapę do pokazania w swoim projekcie, oto jak ją zdobyłem. Oparte głównie na Angular2 Mapbox-gl Starter.

Dodawanie Mapbox-GL kątowy 2 - Webpack i maszynopis

zainstaluje potrzebne pakiety ...
npm install mapbox-gl --save
npm install @types/mapbox-gl --save
npm install @types/geojson --save

Dodaj do rzeczy 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' 
     } 
     ] 
    } 
    } 
} 

Dodaj map.service.ts (z jakiegoś powodu musiałem użyć pełnych ścieżek względnych w imporcie) ...

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

Dodaj mapy do swojego urządzenia ...

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

Dodaj mapę div do html ...

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

przypadku stylów, używam LESS, więc importowane style mapbox tam ...

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