leaflet 与 ts 配合使用

leaflet 增加 ts 类型

使用 scrip

在 index.html 中引入 leaflet

<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css">

安装 leaflet 的类型定义文件：

npm i @types/leaflet

在 types/global.d.ts (这个文件需要包含在 tsconfig.jso 的 include 中) 增加全局声明

declare var  L: typeof import('leaflet');

or

import * as L from 'leaflet';

declare global {
  namespace L {
  }
}

使用 npm

使用 pnpm 安装 Leaflet，则只需安装类型定义文件即可获得TypeScript的类型提示：

pnpm i leaflet

pnpm i @types/leaflet

为插件增加 ts 类型

我们以 Leaflet.hotline 这个插件为例

通过 script 的方式引入

在<script>标签中引入 Leaflet.hotline 插件

<script src="https://cdn.jsdelivr.net/npm/leaflet-hotline@0.4.0/dist/leaflet.hotline.min.js"></script>

在 types/global.d.ts 文件中写入如下内容

// 引入 leaflet 的类型声明
import * as L from 'leaflet';

// 确保全局范围内 L 命名空间存在
declare global {
  namespace L {
    // 为 leaflet-hotline 插件定义 Hotline 命名空间
    namespace Hotline {
      // 定义 HotlineOptions 接口，扩展自 L.PathOptions
      interface HotlineOptions extends L.PathOptions {
        // 线条的宽度
        weight?: number;
        // 线条轮廓的宽度
        outlineWidth?: number;
        // 线条轮廓的颜色
        outlineColor?: string;
        // 颜色调色板，映射值到颜色
        palette?: Record<number, string>;
        // 最小值，定义颜色调色板的起点
        min?: number;
        // 最大值，定义颜色调色板的终点
        max?: number;
      }

      // 定义 Hotline 接口，扩展自 L.Layer
      interface Hotline extends L.Layer {
        // 设置经纬度数组的方法
        setLatLngs(latlngs: L.LatLngExpression[]): this;
        // 获取经纬度数组的方法
        getLatLngs(): L.LatLng[];
      }
    }

    // 定义创建 Hotline 实例的方法
    function hotline(
      latlngs: L.LatLngExpression[], // 经纬度数组
      options?: Hotline.HotlineOptions // 可选的 HotlineOptions 参数
    ): Hotline.Hotline; // 返回 Hotline 实例
  }
}

通过 npm 的方式引入

使用 pnpm 安装 Leaflet.hotline 插件：

pnpm install leaflet-hotline

可以参考已有具有TypeScript类型定义的插件如 @types/leaflet.markercluster

在 types/global.d.ts 文件中写入如下内容

import * as L from 'leaflet';

declare module 'leaflet' {
  namespace Hotline {
    interface HotlineOptions extends L.PathOptions {
      weight?: number;
      outlineWidth?: number;
      outlineColor?: string;
      palette?: Record<number, string>;
      min?: number;
      max?: number;
    }

    interface Hotline extends L.Layer {
      setLatLngs(latlngs: L.LatLngExpression[]): this;
      getLatLngs(): L.LatLng[];
    }
  }

  function hotline(latlngs: L.LatLngExpression[], options?: Hotline.HotlineOptions): Hotline.Hotline;
}