如何将传单路由机包含到 Angular 2 typescript webpack 应用程序中 [英] How to include leaflet-routing-machine into angular 2 typescript webpack application

问题描述

我使用这个种子开始使用 Angular 2 Typescript 和 Webpack:https://github.com/haoliangyu/angular2-leaflet-starter.

I used this seed to get started with Angular 2 Typescript and Webpack: https://github.com/haoliangyu/angular2-leaflet-starter.

我对大多数使用的工具和技术(Angular 2、Typescript、Webpack)都很陌生.虽然我对这些了解得越来越多，但似乎我仍然没有掌握如何包含第三方非类型化 JS 库:

I'm new to most of the used tools and technologies (Angular 2, Typescript, Webpack). While I understand more and more about these it seems that I still haven't grasped how third-party non-typed JS-libraries are included:

我想将 leaflet-routing-machine.js 包含在我的项目.据我所知，虽然传单确实存在分型，但传单路由机不存在分型.

I would like to include the leaflet-routing-machine.js into my project. To my knowledge, while there do exist typings for leaflet, there do not exist typings for leaflet-routing-machine.

我通过 npm install 安装了软件包并添加了所需的 快速启动代码剪切以显示路线.

I installed the package via npm install and added the required quick-start code snipped to display a route.

ma​​p.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 上遇到的错误是:

The error I get on npm start is:

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

据我了解，我不应该在 index.html 中包含 JS 文件，因为这应该由 webpack 自动完成.除了我通常不确定如何在没有打字的情况下包含第三方库的事实之外(答案如 this 没有帮助)似乎我的情况有点不同，因为 L 对象是标准传单并且不知道路由 属性.我以某种方式理解，因为我看不到路由机器库如何扩展传单库.

As I understand it I shouldn't include the JS file in the index.html as this should be automatically done by webpack. Next to the fact that I'm generally unsure how to include third-party libraries without typings (answers like this did not help) it seems my case is a bit different because the L Object is standard leaflet and does not know the Routing property. Which I somehow understand, since I don't see how the routing machine library extends the leaflet library.

有什么建议吗?

推荐答案

我没有使用过 Angular 2，也没有使用过 TypeScript，但我怀疑 TypeScript 不喜欢 LRM 将自身附加到 L 对象/命名空间.

I haven't worked with either Angular 2, nor TypeScript, but I suspect that TypeScript doesn't like that LRM attaches itself to the L object/namespace.

请注意，LRM 也将自身导出为普通的 CommonJS 模块，因此您可以这样做而不是使用 L.Routing.Control:

Note that LRM also exports itself as a normal CommonJS module, so you can do something like this instead of using L.Routing.Control:

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

var map = L.map(...);
var routingControl = Routing.control({ ... });

这篇关于如何将传单路由机包含到 Angular 2 typescript webpack 应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！