Question

尝试构建要在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;
}

是否有必要直接修改传单的类型文件（.d.ts）？或者对于这种情况，我是否应该将.js脚本导入到Angular / Typescript中（我已经使它像这样工作但它看起来像一个丑陋的解决方法）？

请注意，我不想使用某人的其他端口，例如： 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;
  }
}

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

1 个答案: