Question

I have an app created using Typescript and Leaflet and I am trying to add EasyPrint plugin into it (https://github.com/rowanwins/leaflet-easyPrint); I have a leaflet.aug.d.ts typings file created for extending L.control so that I can add new plugins to it.

Previously I have added leaflet-measure plugin and had no problems and using the same procedure for easyPrint plugin I get Uncaught TypeError: L.control.easyPrint is not a function error

My Print.ts looks like this:

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

And my leaflet.aug.d.ts file looks like this :

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

As you can see, for measure plugin no error appeared, but only for easyPrint plugin, although the functions were specified.

My question is : why does the interpretor sees the easyPrint() function on L.control inside my IDE but the browser`s console throws the error ?

Thanks!

Answer 1

我可以使它工作。我是这样做的：

在我的打字中.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/

中输入的代码

Using leaflet-easyPrint with Typescript app

1 个答案: