5

このシードを使用して、Angular 2 Typescript と Webpack を使い始めました: https://github.com/haoliangyu/angular2-leaflet-starter。

私は、使用されているほとんどのツールとテクノロジ (Angular 2、Typescript、Webpack) に不慣れです。これらについてはますます理解していますが、サードパーティの型指定されていない JS ライブラリがどのように含まれているかをまだ把握していないようです。

プロジェクトにleaflet-routing-machine.jsを含めたいと思います。私の知る限り、leaflet の型付けは存在しますが、leaflet-routing-machine の型付けは存在しません。

経由でパッケージをインストールしnpm install、必要なクイック スタート コードを追加してルートを表示しました。

map.service.ts

/// <reference path="../../typings/leaflet/leaflet.d.ts"/>

import {Injectable} from 'angular2/core';
import {Map} from 'leaflet';

Injectable()
export class MapService {
  map: Map; // holds reference to the normal leaflet map object

  showRoute(){
        L.Routing.control({
        waypoints: [
            L.latLng(47.569198, 7.5874886),
            L.latLng(47.5685418, 7.5886755)
        ]
    }).addTo(this.map);

  }

}

私が得るエラーnpm startは次のとおりです。

ERROR in ./app/services/map.service.ts
(56,11): error TS2339: Property 'Routing' does not exist on type 'typeof L'.

私が理解しているように、これは webpack によって自動的に行われる必要があるため、index.html に JS ファイルを含めるべきではありません。入力せずにサードパーティのライブラリを含める方法が一般的にわからないという事実に加えて（このLような回答は役に立ちませんでした）、オブジェクトは標準のリーフレットであり、Routingプロパティを知らないため、私のケースは少し異なるようです。ルーティング マシン ライブラリがリーフレット ライブラリを拡張する方法がわからないので、なんとなくわかります。

助言がありますか？

4

2 に答える 2

1

私は Angular 2 も TypeScript も使用していませんが、TypeScript は LRM がLオブジェクト/名前空間にアタッチすることを好まないのではないかと思います。

LRM もそれ自体を通常の CommonJS モジュールとしてエクスポートすることに注意してくださいL.Routing.Control。

var L = require('leaflet');
var Routing = require('leaflet-routing-machine');

var map = L.map(...);
var routingControl = Routing.control({ ... });
于 2016-06-08T06:31:53.100 に答える
0

これは私がしばらく苦労していたものでしたが、最終的に機能するようになりました。これをインポートする方法は次のとおりです。

import * as L from 'leaflet'; import 'leaflet-routing-machine';

そしてあなたのsystemjs.configで

   map: {
    'leaflet': 'npm:leaflet/dist/leaflet.js',
}
     packages: {
           leaflet: {
              defaultExtension: 'js'
              }
            }

コンポーネントでルーティングを設定するには、タイル レイヤーではなくマップにルーティングを追加していることを確認してください。

    ngAfterViewInit() {

     var map = new L.Map("map")

    let openmap = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ',
       }).addTo(map);

    let route = L.Routing.control({
        waypoints: [
          L.latLng(40.5663651,-75.6032277),
          L.latLng(40.00195, -76.073299),
          L.latLng(42.3673945,-83.0750408)
        ]
      }).addTo(map);}

この質問でこれに関する多くの情報を入手しました： 同じ名前空間で別のものを拡張するモジュールをインポートする方法

于 2018-02-06T20:16:32.827 に答える