Mapbox打字稿 [英] Mapbox Typescript

问题描述

通过跟踪该项目，我设法使Leaflet与Angular 2和Webpack一起使用.

I managed to get Leaflet working with Angular 2 and Webpack by following this project.

角度2传单入门

我可以看到在"browser.d.ts"中配置的类型:

I can see the typings configured in "browser.d.ts":

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

webpack.config.js定义一个入口点:

webpack.config.js defines an entry point:

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

"libs.ts"包含Leaflet模块的导入:

The "libs.ts" contains the import of the Leaflet module:

import 'leaflet';

我正在使用Atom作为代码编辑器.现在，它可以识别所有Leaflet类和方法.我现在可以在Angular 2中做这样的事情:

I'm using Atom as a code editor. It now recognises all the Leaflet classes and methods. I can now do things like this in Angular 2:

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

这是我的问题开始的地方.我正在尝试使用mapbox.js.我要做的是安装了mapbox.js库并输入以下内容:

Here is where my problems start. I'm trying to use mapbox.js. What I did was I installed mapbox.js library and typings:

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

这就是我被困住的地方.对于我的一生，我不知道该怎么做Leaflet设法做的事.

This is where I'm stuck. For the life of me I can't figure out how to do what Leaflet managed to do.

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"具有以下内容:

I can see "browser.d.ts" has the following:

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

我认为Mapbox可能会起作用，因为它扩展了Leaflet库?

I thought maybe Mapbox will just work, because it extends the Leaflet library?

看来我基本上可以做类似的事情，这是标准的javascript方式:

It seems that I can basically do something like this, which is the standard javascript way:

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

但不是这样:

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

这显然也不起作用:

import {Map, TileLayer} from 'mapbox';

我做错了什么?

推荐答案

您可以只使用mapbox.js NPM模块，它将包含您需要的所有内容.

You can just use the mapbox.js NPM module, and it'll include everything you need.

npm install mapbox.js --save

请参阅此示例.我们正在使用Webpack进行模块加载，并且使用TypeScript您需要显式地import *来输入未类型化的模块.

See this example. We're using Webpack to do the module loading, and with TypeScript you need to explicitly import * for untyped modules.

import * as L from 'mapbox.js';

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

// do stuff.

这篇关于Mapbox打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！