Mapbox Typescript
通过遵循这个项目，我设法得到了与Angular 2和Webpack合作的传单。
我可以看到“browser.d.ts”中配置的类型：
/// <reference path="browser\ambient\leaflet\leaflet.d.ts" />webpack.config.js定义了入口点：
...
entry: {
'polyfills': './src/polyfills.ts',
'libs': './src/libs.ts',
'main': './src/main.ts'
},
..."libs.ts“包含Leaflet模块的导入：
import 'leaflet';我使用Atom作为代码编辑器。它现在可以识别所有的Leaflet类和方法。我现在可以在Angular 2中做这样的事情：
import {Map, TileLayer} from 'leaflet';
...
this.baseMaps = {
StreetMap: new TileLayer('mapbox.streets')
};这就是我的问题所在。我在试着用mapbox.js。我所做的是安装了mapbox.js库和类型：
npm install mapbox.js --save
typings install mapbox --save这就是我被卡住的地方。不管怎么说，我都想不出该怎么做小叶能做到的事情。
import '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“包含以下内容：
/// <reference path="browser\ambient\leaflet\leaflet.d.ts" />
/// <reference path="browser\ambient\mapbox\mapbox.d.ts" />我想也许Mapbox会正常工作，因为它扩展了Leaflet库？
看起来我基本上可以这样做，这是标准的javascript方式：
this.baseMaps = {
StreetMap: L.mapbox.tileLayer('mapbox.streets')
};但不是这样的：
this.baseMaps = {
StreetMap: new TileLayer('mapbox.streets')
};这显然也不起作用：
import {Map, TileLayer} from 'mapbox';我做错了什么？
回答 2
Stack Overflow用户
发布于 2016-03-12 06:35:48
您可以只使用mapbox.js NPM模块，它将包含您需要的所有内容。
npm install mapbox.js --save
请参阅此示例。我们使用Webpack来进行模块加载，而使用TypeScript时，您需要显式地为非类型化模块执行import *。
import * as L from 'mapbox.js';
const map = L.mapbox.map('mapContainer', 'mapbox.streets');
// do stuff.Stack Overflow用户
发布于 2016-12-23 01:22:37
对于像我这样只想在他们的项目中显示地图的人来说，我就是这样得到它的。主要基于Angular2 Mapbox-gl Starter。
将Mapbox-gl添加到Angular 2- Webpack和Typescript
安装所需的软件包...
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;
}
}将map div添加到您的html...
// 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';https://stackoverflow.com/questions/35931380
复制相似问题
腾讯云开发者
