Mapbox 打字稿 [英] Mapbox Typescript

本文介绍了Mapbox 打字稿的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!


通过关注这个项目,我设法让 Leaflet 与 Angular 2 和 Webpack 一起工作.

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

angular 2 传单启动器


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

/// <reference path="browserambientleafletleaflet.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:Developangular2-webpack-startersrc
 @ ./src/libs.ts 3:0-17


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

/// <reference path="browserambientleafletleaflet.d.ts" />
/// <reference path="browserambientmapboxmapbox.d.ts" />

我想也许 Mapbox 可以正常工作,因为它扩展了 Leaflet 库?

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


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 ='mapContainer', 'mapbox.streets');

// do stuff.

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

登录 关闭
发送“验证码”获取 | 15天全站免登陆