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

【问题标题】：How to use/implement Leaflet Bing Layer in Angular.io?如何在 Angular.io 中使用/实现 Leaflet Bing 层？
【发布时间】：2018-06-18 11:06:43
【问题描述】：

尝试使用 Bing 地图提供程序构建要在组件中使用的传单服务。可以使它在javascript中正常工作。问题是在 TypeScript 中，无法为对象定义新属性。投射到“任何”只是不要削减它。

我使用的 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的types文件（.d.ts）？或者对于这种情况，我是否应该将 .js 脚本导入 Angular/Typescript（我已经让它也这样工作，但它看起来像一个丑陋的解决方法）？

请注意，我不喜欢使用其他人的端口，例如： https://github.com/Asymmetrik/ngx-leaflet

谢谢！

【问题讨论】：

标签： javascript angular typescript leaflet

【解决方案1】：

您可以通过将其添加到项目的 typings.d.ts 来扩充 Leaflet 类型：

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;
  }
}

【讨论】：