Использование leaflet-easyPrint с приложением Typescript

Question

У меня есть приложение, созданное с использованием Typescript и Leaflet, и я пытаюсь добавить в него плагин EasyPrint (https://github.com/rowanwins/leaflet-easyPrint); У меня есть файл наборов leaflet.aug.d.ts, созданный для расширения L.control, чтобы я могЯ могу добавить новые плагины к нему.

Ранее я добавил плагин для измерения листовок, у меня не было проблем, и я использовал ту же процедуру для плагина easyPrint. Я получаю Uncaught TypeError: L.control.easyPrint is not a function error

My Print.ts lookвот так:

import * as L from 'leaflet';
import 'leaflet-easyprint';

export default class Print {
    constructor(map: L.Map){

        let print = L.control.easyPrint({
            title: 'Print map',
            position: 'topright'
        }).addTo(map);
    };
};

И мой файл leaflet.aug.d.ts выглядит так:

    import 'leaflet';

    declare module 'leaflet' {
        export interface GeoJSONOptions<P = any> {
            name: string;
        }
        export interface WMSOptions<P = any> {
            name: string;
        }
        export interface PolylineOptions<P = any> {
            name: string;
        }

        namespace Map {
            export interface MapOptions {
                measureControl?: boolean;
                easyPrintControl? : boolean;
            }
        }

        export interface ControlStatic {
            Measure: Control.MeasureStatic;
            EasyPrint: Control.EasyPrintStatic;
        }

        namespace Control {

            export interface MeasureStatic {
                new (options?: IMeasureConstructorOptions): Measure;
            }

            export interface EasyPrintStatic {
                new (options?: IEasyPrintConstructorOptions): EasyPrint;

            }

            export interface IMeasureConstructorOptions {

                position?: string;

                parentContainerSelector?: string;

                primaryLengthUnit?: string;

                secondaryLengthUnit?: string;

                secondaryAreaUnit?: string;

                primaryAreaUnit?: string;

                activeColor?: string;

                completedColor?: string;

                popupOptions?: IMeasurePopupOptionsOptions;

                captureZIndex?: number;

                localization? :string;

                decPoint?: string;

                thousandsSep?: string;

            }

            export interface IEasyPrintConstructorOptions {
                title: string;
                position: string;



    }

        export interface IMeasurePopupOptionsOptions {
            className? : string;
            autoPanPadding?: Array<number>;
        }

        export interface Measure extends L.Control {

        }

        export interface EasyPrint extends L.Control {

        }

    }

    export namespace control {
            export function measure (options?: Control.IMeasureConstructorOptions): Control.Measure;
            export function easyPrint (options?: Control.IEasyPrintConstructorOptions): Control.EasyPrint;
    }
}

Как видите, для плагина меры не было ошибок, но только дляПлагин easyPrint, хотя функции были указаны.

Мой вопрос: почему интерпретатор видит функцию easyPrint () в L.control внутри моей IDE, но консоль браузера выдает ошибку?

Спасибо!

Answer 1

Я могу заставить это работать.Я сделал это:

В моем typings.d.ts

// Import Leaflet into L in case you want to reference Leaflet types
import * as L from 'leaflet';

// Declare the leaflet module so we can modify it
declare module 'leaflet' {

export interface IEasyPrintConstructorOptions {
  title: string;
  position: string;
  exportOnly: boolean;
  hideControlContainer: boolean;
  hidden:boolean;
}

export interface EasyPrint extends L.Control {
}

export function easyPrint(options?: IEasyPrintConstructorOptions): EasyPrint;

}

В app.component.ts:

import * as L from 'leaflet';
import 'leaflet-easyprint';

 //easyPrint initialization
 this.easyPrint = L.easyPrint({
  title: 'Print map',
  position: 'bottomright',
  exportOnly: true,
  hideControlContainer: true,
  hidden:true
}).addTo(map);

 //manually trigger export
 this.easyPrint.printMap('CurrentSize', 'Filename');

Это решение основано на коде, который выпоставить вопрос и https://asymmetrik.com/ngx-leaflet-and-leaflet-plugins/