如何在Angular.io中使用/实现Leaflet Bing层？

Question

正在尝试构建要在具有Bing地图提供程序的组件中使用的leaflet服务。可以让它在javascript中工作，没有问题。问题在于，在TypeScript中，不可能为对象定义新的属性。强制转换为“any”，但不要截断它。

我使用的javascript扩展是这样的：https://github.com/digidem/leaflet-bing-layer

组件代码相关部分如下(javascript版本不使用服务，只包含脚本)：

import * as L  from 'leaflet';

// ...

    var leafletHelperService = new LeafletHelperService();

    (L.TileLayer as any).Bing = L.TileLayer.extend(
        leafletHelperService.getExtensionObject(options)); // --> returns object with options, initialize(), getQuadKey, etc.

    (L.tileLayer as any).bing = function(options) {
        return new L.TileLayer.Bing(options); // --> property 'Bing' does not exist on type L.TileLayer
    }
    L.tileLayer
        .bing(options) // --> property 'bing' does not exist...
        .addTo(this.map);

主要的问题是不可能添加新的属性。我试图定义一个扩展L.TileLayer的接口，但它不起作用：

interface IBing extends L.TileLayer {
    Bing:Function;
}

是否需要直接修改leaflet的类型文件(.d.ts)？或者，对于这种情况，我是否应该将.js脚本导入到Angular/Typescript中(我已经让它像那样工作了，但它看起来像一个丑陋的变通方法)？

注意，我不喜欢使用别人的else端口，比如：https://github.com/Asymmetrik/ngx-leaflet

谢谢!

Answer 1

您可以通过将以下内容添加到项目的typings.d.ts来增加叶类型

import { tileLayer } from 'leaflet';

declare module 'leaflet' {
  namespace tileLayer {
    interface BingOptions extends TileLayerOptions {
      bingMapsKey?: string;
      imagerySet?: 'Aerial'|'AerialWithLabels'|'AerialWithLabelsOnDemand'|'CanvasDark'|'CanvasLight'|'CanvasGray'|'Road'|
        'RoadOnDemand'|'OrdnanceSurvey';
      culture?: string;
      style?: string;
    }

    export function bing(options: string|BingOptions): TileLayer;
  }
}