Mapbox手稿

前端之家收集整理的这篇文章主要介绍了Mapbox手稿前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_404_0@ 我设法通过遵循这个项目让Leaflet与Angular 2和Webpack一起工作.

angular 2 leaflet starter

我可以在“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

这就是我被困住的地方.对于我的生活,我无法弄清楚如何做Leaflet设法做的事情.

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

我究竟做错了什么?

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

npm install mapBox.js –save

看这个例子.我们使用Webpack进行模块加载,使用TypeScript,您需要为非类型化模块显式导入*.

import * as L from 'mapBox.js';

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

// do stuff.
原文链接:https://www.f2er.com/angularjs/240360.html

猜你在找的Angularjs相关文章