如何在Angular项目中导入无类型Leaflet插件leaflet-mapwithlabels

问题概述 #

需将不支持NPM安装的Leaflet插件leaflet-mapwithlabels导入Angular项目，先后尝试两种导入方式均失败，报错信息如下：

ERROR TypeError: L.mapWithLabels is not a function
at _MapService.initMap (map.service.ts:16:14)

已尝试的操作步骤 #

初始导入尝试 #

1. 组件导入代码：

import * as L from 'leaflet';
import {GeoJSON} from "leaflet";
import "node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.js"

2. angular.json配置：

"styles": [
  "@angular/material/prebuilt-themes/azure-blue.css",
  "./node_modules/leaflet/dist/leaflet.css",
  "./node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.css",
  "src/styles.scss"
],
"scripts": [
  "./node_modules/leaflet/dist/leaflet.js",
  "./node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.js"
]

更新后的操作 #

1. 修改angular.json的scripts配置：

"scripts": [
  "node_modules/leaflet/dist/leaflet.js",
  "./node_modules/leaflet.fullscreen/Control.FullScreen.js",
  "./src/assets/scripts/leaflet-mapwithlabels.js"
]

2. 在src/types下创建leaflet-extensions.d.ts定义类型：

import * as L from 'leaflet';
import * as geojson from "geojson";
import {Layer} from "leaflet";

declare module 'leaflet' {
  interface LayerOptions {
    label?: string | ((layer: L.Layer) => string);
    labelPriority?: number | ((layer: L.Layer) => number);
    labelGap?: number;
    labelPos?: 'auto' | 'r' | 'l' | 'cc';
    labelStyle?: { [key: string]: string };
    labelRepeatAlongLines?: boolean;
    labelRepeatDistance?: number;
  }
  export class MapWithLabels extends
    Map
  {
    constructor(element: string | HTMLElement, options?: MapWithLabelsOptions);
  }
  export interface MapWithLabelsOptions extends MapOptions {
    labelPane?: string;
  }
  export function mapWithLabels(element: string | HTMLElement, options?: MapWithLabelsOptions): MapWithLabels;
  type TypeOrFn<T, Ly extends Layer> = T | ((layer: Ly) => T)
  interface LabelFns<Ly extends Layer> {
    label?: TypeOrFn<string, Ly>;
    labelStyle?: TypeOrFn<object, Ly>;
    labelPriority?: TypeOrFn<number, Ly>;
  }
  export interface LayerOptions extends LabelFns<LayerWithFeature> {
    labelPos?: string;
    // etc.
  }
  class LayerWithFeature<P = any, G extends geojson.GeometryObject = geojson.GeometryObject> extends Layer {
    feature?: geojson.Feature<G, P>
  }
  export interface GeoJSONOptions<P = any, G extends geojson.GeometryObject = geojson.GeometryObject>
    extends LabelFns<LayerWithFeature<P, G>> { }
}

declare module "leaflet-map-with-labels" {
  export = L;
}

3. MapService使用代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as L from 'leaflet';
import { Geometry } from 'geojson';
import { CountryProperties } from "../model/interfaces";

@Injectable({
  providedIn: 'root'
})
export class MapService {
  constructor(private http: HttpClient) {}
  initMap(elementId: string): L.MapWithLabels {
    return L.mapWithLabels(elementId, {
      center: [0, 0],
      zoom: 2,
      maxZoom: 10,
      zoomControl: true,
      attributionControl: false,
      inertia: true,
      inertiaDeceleration: 3000,
      inertiaMaxSpeed: 1500,
      easeLinearity: 0.1,
      zoomSnap: 0.5,
      preferCanvas: false
    })
  }
  loadGeoJSON(url: string): Observable<GeoJSON.FeatureCollection<Geometry, CountryProperties>> {
    return this.http.get<GeoJSON.FeatureCollection<Geometry, CountryProperties>>(url);
  }
}

解决方案 #

1. 确保脚本加载顺序与路径正确性 #

• 必须保证leaflet.js在leaflet-mapwithlabels.js之前加载，插件依赖Leaflet核心，顺序错误会导致无法挂载到L对象。
• 检查angular.json中脚本路径是否正确：若插件文件放在src/assets/scripts，路径应为./src/assets/scripts/leaflet-mapwithlabels.js，避免相对路径错误。
• 移除组件中的import "node_modules/leaflet-mapwithlabels/dist/leaflet-mapwithlabels.js"，angular.json的scripts已全局加载，重复导入易引发冲突。

2. 修正类型声明文件 #

• 在tsconfig.json的include数组中添加"src/types/**/*.d.ts"，确保TypeScript能识别自定义类型文件。
• 简化类型声明，先保证基础功能可用：

import * as L from 'leaflet';

declare module 'leaflet' {
  export interface MapWithLabelsOptions extends L.MapOptions {
    labelPane?: string;
  }

  export function mapWithLabels(element: string | HTMLElement, options?: MapWithLabelsOptions): L.Map;

  export interface LayerOptions {
    label?: string | ((layer: L.Layer) => string);
    labelPriority?: number | ((layer: L.Layer) => number);
    // 其他需要的属性按需添加
  }
}

• 删除declare module "leaflet-map-with-labels"，我们是扩展原生Leaflet的类型，无需额外模块声明。

3. 验证插件是否正确挂载到L对象 #

• 在index.html中添加调试代码，确认插件加载后L.mapWithLabels是否存在：

<script>
  window.addEventListener('load', () => {
    console.log('L.mapWithLabels exists:', typeof L.mapWithLabels === 'function');
  });
</script>

• 若控制台输出false，说明插件文件未正确加载，检查文件是否损坏、路径是否正确。

4. 调整MapService中的调用方式 #

• 暂时绕过类型检查，直接调用(L as any).mapWithLabels，确认功能是否能正常运行：

initMap(elementId: string): any {
  return (L as any).mapWithLabels(elementId, {
    // 配置项不变
  })
}

• 若此方式能正常创建地图，说明类型声明存在问题，再逐步调整类型定义。

5. 清理缓存并重启项目 #

• 执行ng clean清理Angular缓存，然后重启开发服务器，避免缓存导致的脚本加载异常。

内容的提问来源于stack exchange，提问作者Hadi Nounou