chw-gis-lodash

一个按 GIS 场景拆分的工具库，目前分为两个分区：

• chw-gis-lodash/cesium
• chw-gis-lodash/leaflet

当前已提供：

• CesiumExcavationController：Cesium 地形开挖/框选开挖控制器
• CesiumFlowLineController：Cesium 流动线（箭头流动）控制器，内置黄色箭头并支持自定义
• CesiumDrawController：Cesium 图形绘制控制器（矩形 / 圆形 / 闭合曲线）
• VectorTile：Leaflet PBF 矢量瓦片（状态式 API，支持配色 / 过滤 / 点击取要素，详见 src/leaflet/vectorTile/README.md）

安装

pnpm add chw-gis-lodash cesium leaflet

使用

import { CesiumExcavationController } from "chw-gis-lodash/cesium";

const excavation = new CesiumExcavationController({
  center: {
    lng: 113.150014,
    lat: 23.057504
  }
});

excavation.init(viewer);
excavation.startBoxSelect();

流动线

import { CesiumFlowLineController } from "chw-gis-lodash/cesium";

// 箭头默认是内置的黄色箭头，也可通过 image / color 自定义
const flowLine = new CesiumFlowLineController({
  // image: customArrowPng,   // 自定义箭头贴图（默认内置黄色箭头）
  // color: "#00e0ff",        // 叠加颜色（默认白色，即保留贴图本身的黄色）
  // width: 30,
  // duration: 3000,          // 流动一个循环的时长（毫秒）

  // 内置默认提示文案（开始绘制 / 绘制完成 / 路点不足），可部分覆盖
  // messages: { drawStart: "..." },
  // 提示输出回调：接到内置文案后由使用方决定如何展示（如接入 toast）
  onMessage: (text, type) => console.log(type, text),
  onDrawComplete: points => console.log("绘制完成", points)
});

flowLine.init(viewer);

// 方式一：交互式绘制（左键加点、右键结束）
flowLine.startDrawing();

// 方式二：直接根据经纬度生成
flowLine.createFlowingPath([
  [113.15, 23.05],
  [113.16, 23.06]
]);

// 清除
flowLine.clearPath();

图形绘制（矩形 / 圆形 / 曲线）

import { CesiumDrawController } from "chw-gis-lodash/cesium";

const drawer = new CesiumDrawController({
  // fillColor: "#7F4538",  // 填充颜色（默认 #7F4538）
  // borderColor: "#ffff00",// 边框/线条颜色（默认黄色）
  // messages: { drawStart: "..." }, // 覆盖内置文案
  onMessage: (text, type) => console.log(type, text)
});

drawer.init(viewer);

drawer.drawRectangle(); // 矩形：左键起点、移动、右键结束
drawer.drawCircle(); // 圆形：左键圆心、移动、右键结束
drawer.drawCurve(undefined, geojson => console.log(geojson)); // 闭合曲线

// 分别清除 / 全部清除
drawer.clearRectangle();
drawer.clearCircle();
drawer.clearCurve();
drawer.clearAll();

目录

src/
  cesium/
    excavation/
      index.ts
    flowLine/
      index.ts
      material.ts
      defaultArrow.ts
    draw/
      index.ts
    index.ts
  leaflet/
    index.ts
  index.ts

发布

pnpm install
pnpm build
npm publish