繁体   English   中英

Mapbox手稿

[英]Mapbox Typescript

我设法通过遵循这个项目让Leaflet与Angular 2和Webpack一起工作。

角2小叶起动器

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

我究竟做错了什么?

对于像我这样只想在他们的项目中展示地图的人来说,这就是我如何得到它的。 主要基于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;
  }
}

将地图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';

您可以使用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.

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM