Ionic 2中的leaflet.freedraw

我想在我的Ionic 2項目中使用Leaflet.freedraw插件。宣傳單本身沒有問題。但添加let freeDraw = new FreeDraw();我MapPage組件時，我得到的錯誤信息：Ionic 2中的leaflet.freedraw

Uncaught Error: Cannot find module "L" at webpackMissingModule

在FreeDrawREADME它說我必須添加下面一行到我webpack.config：

resolve: { 
alias: { 
    L: 'leaflet' 
} 
};

我這樣做在node_modules/@ionic/app-scripts/config/webpack.config.js但這並沒有幫助。

我添加了傳單和leaflet.freedraw到我的declarations.d.ts文件中，就像它在第三方庫的ionic 2 documentation中所述。

declare module '*'; 
declare module 'leaflet'; 
declare module 'leaflet.freedraw';

我試圖像這樣將它添加到我的app.module.ts：

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import { Storage } from '@ionic/storage'; 
import { DbService } from '../providers/db-service'; 
import { MapPage } from '../pages/map/map'; 
import { JourneysPage } from '../pages/journeys/journeys'; 
import * as L from 'leaflet'; 
import { FreeDraw } from 'leaflet.freedraw'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    TabsPage, 
    MapPage, 
    JourneysPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    TabsPage, 
    MapPage, 
    JourneysPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Storage, DbService, L, FreeDraw] 
}) 
export class AppModule {}

我說小葉這樣的：

import * as L from 'leaflet';

，因爲當我嘗試這樣做：

import { L } from 'leaflet';

我得到一個錯誤，傳單沒有su ch一個導出組件。

這是我的地圖組件：

import { Component, OnInit} from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
//import * as fd from 'leaflet.freedraw'; 
import * as L from 'leaflet'; 
import { FreeDraw } from 'leaflet.freedraw'; 

@Component({ 
    selector: 'page-map', 
    templateUrl: 'map.html' 
}) 
export class MapPage implements OnInit{ 

    constructor(public navCtrl: NavController,) {} 

    ionViewDidLoad() { 
    console.log('Hello MapPage Page'); 
    } 

    ngOnInit() { 

    let map = L.map('map').setView([51.505, -0.09], 13); 
    let freeDraw = new FreeDraw(); 


    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token={accessToken}', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OSM</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery© <a href="http://mapbox.com">Mapbox</a>', 
     maxZoom: 18, 
     accessToken: "place holder for actual token" 
    }).addTo(map); 



    } 

}

我錯過了什麼？

來源

2016-12-15 cedricblaser01

您應該按如下方式使用所謂的DefinitelyTyped/tsd工具：

tsd install --save leaflet

這將增加一個打字稿定義文件到您的項目的文件夾下typings/leaflet，以便您可以使用傳單庫。您可以只需添加以下行使用的庫：

import 'leaflet';

至於leaflet.freedraw傳單插件，我覺得在打字稿JS插件是一個頭疼，除非他們有一個TS定義文件。我一直在努力尋找解決方案。

來源

2016-12-18 16:54:18

不要修改node_modules中的任何代碼，那些代碼是第三方庫。這些指令意味着在您的自己的本地Webpack配置中進行設置。你用下面的語法一個配置文件的WebPack運行：

webpack --config some.config.file.js

來源

2016-12-15 18:25:23

Ionic 2中的leaflet.freedraw

回答

相關問題