为传单做 L.tileLayer.wms 时将 env 添加到选项

Question

我有一个使用 ngx-leaflet 的应用程序，Angular 的传单，我正在尝试做一个 L.titleLayer.wms，但向 tileLayer.wms 添加了一个额外的选项。它看起来像这样：

L.tileLayer.wms(url, {
    layers: layerName,
    format: 'image/png8',
    version: '1.1.0',
    transparent: true,
    attribution: "",
    tileSize: 512,
    styles: styleName,
    env: env // This is the additional option that I am trying to add
});

但是，当我尝试这样做时，出现以下错误：Argument of type '{ layers: string; format: string; version: string; transparent: true; attribution: string; tileSize: number; styles: string; env: string; }' is not assignable to parameter of type 'WMSOptions'. Object literal may only specify known properties, and 'env' does not exist in type 'WMSOptions'

我很确定这是因为图书馆只接受 WMSOptions:

这些选项

export interface WMSOptions extends TileLayerOptions {
    layers?: string | undefined;
    styles?: string | undefined;
    format?: string | undefined;
    transparent?: boolean | undefined;
    version?: string | undefined;
    crs?: CRS | undefined;
    uppercase?: boolean | undefined;
}

所以我尝试扩展 TileLayer 并创建了另一个如下所示的文件：

import * as L from 'leaflet';

export namespace ExtendWMS {
    export class WMS extends L.TileLayer {
        constructor(baseUrl: string, options: ExtendOptions) {            
            super (baseUrl, options)
        };

        setParams(params: ExtendParams, noRedraw?: boolean): this {
            return this;
        }

        wmsParams: ExtendParams;
        options: ExtendOptions;
    }
}

export namespace extendLayer {
    function wms(baseUrl: string, options: ExtendOptions): L.TileLayer.WMS {
        return new ExtendWMS.WMS(baseUrl, options)
    };
}

export interface ExtendOptions extends L.WMSOptions{
    env?: string | undefined;
}


export interface ExtendParams extends L.WMSParams{
    env?: string | undefined;
}

这样 WMSOptions 就会有我需要添加到调用中的 env 变量，但是当我这样做并调用它时，

ExtendWMS.WMS(url, {
    layers: layerName,
    format: 'image/png8',
    version: '1.1.0',
    transparent: true,
    attribution: "",
    tileSize: 512,
    styles: styleName,
    env: env // This is the additional option that I am trying to add
});

我无法将图层添加到地图，我注意到缺少 wmsParams：t.WMS {_url: url, options: {…}, _events: {…}, _initHooksCalled: true} 当我尝试控制台记录 L.tileLayer.wms 调用时...（我注意到 url、options 和 wmsParams 都出现在 L.tileLayer.wms 调用中）

有没有一种方法可以将 env 选项包含在 WMSOption 中，这样当我进行 L.tileLayer.wms 调用时，它会接受 env 作为参数？我正在尝试这样做，因为我想更改 GeoServer 中特定图层的样式：https://docs.geoserver.org/stable/en/user/services/wms/vendor.html#env

非常感谢任何帮助！

Answer 1

我需要做的就是让它工作：

import * as L from 'leaflet';

export class ExtendWMS extends L.TileLayer {
    constructor(baseUrl: string, options: ExtendOptions ) {
        super (baseUrl, options)

        L.Util.setOptions(this, options);
    };
}

export interface ExtendOptions extends L.WMSOptions {
    layers: string ;
    styles?: string | undefined;
    format?: string | undefined;
    transparent?: boolean | undefined;
    version: string;
    crs?: L.CRS | undefined;
    uppercase?: boolean | undefined;
    env?: string | undefined;
    attribution?: string|undefined,
    tileSize?: number|undefined,
    icon: string|undefined,
    tiled: boolean|undefined,
}

为传单做 L.tileLayer.wms 时将 env 添加到选项

Adding env to options when doing L.tileLayer.wms for leaflet

wms

geoserver

leaflet

angular

ngx-leaflet