代码之家 › 专栏 › 技术社区 › evilmandarine

如何在Angular中使用/实施传单Bing层。伊奥?

leaflet typescript angular javascript

1

evilmandarine · 技术社区 · 8 年前

正在尝试构建一个传单服务,以便在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

非常感谢。

0 回复 | 直到 8 年前

1

2

eppsilon 7 年前

您可以通过将其添加到项目的 打字。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;
  }
}