在Typescript应用程序中使用leaflet-easyPrint

Question

我有一个使用Typescript和Leaflet创建的应用程序，我正在尝试将EasyPrint插件添加到其中(https://github.com/rowanwins/leaflet-easyPrint)；我有一个为扩展L.control而创建的leaflet.aug.d.ts类型文件，以便我可以向其中添加新的插件。

以前我添加了leaflet-measure插件，没有问题，对easyPrint插件使用相同的过程，我得到了Uncaught TypeError: L.control.easyPrint is not a function错误

我的Print.ts看起来像这样：

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插件出现错误。

我的问题是:为什么解释器在我的集成开发环境中看到L.control上的easyPrint()函数，而浏览器的控制台抛出错误？

谢谢!

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/中输入的代码