Author

卓奕烔

Cesium Draw Tool

一个CesiumJS 绘制工具，支持点、线、面的创建和编辑。

特性

• ✅ 创建和编辑点、线、多边形
• ✅ 交互式编辑功能

安装

npm install cesium-draw-tool

使用方法

import { CesiumDrawTool } from 'cesium-draw-tool';
import * as Cesium from 'cesium';
import * as turf from "@turf/turf";
window.Cesium = Cesium;

const viewer = new Cesium.Viewer('cesiumContainer');

// 将 Cesium 实例传入配置
const drawTool = new CesiumDrawTool(viewer, {
    cesium: window.Cesium,
    turf: turf,
    enableLogging: true,
  });

// 使用绘制工具
drawTool.createPoint();

API 文档

构造函数

new CesiumDrawTool(viewer, options)

参数：

• viewer - Cesium.Viewer 实例
• options - 配置选项对象
  • cesium?: any - Cesium 实例（可选，如果全局没有 Cesium 则必需）
  • enableLogging?: boolean - 是否启用日志输出（默认：true）

方法

创建点

drawTool.createPoint(options?)

选项：

{
    pixelSize: 10,
    color: Cesium.Color.YELLOW,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2,
    disableDepthTestDistance: 2000,
    // 或者使用图片
    image: 'path/to/image.png',
    scale: 1.0
}

创建线

drawTool.createLine(options?)

选项：

{
    width: 3,
    color: Cesium.Color.RED,
    clampToGround: true
}

创建多边形

drawTool.createPolygon(options?)

选项：

{
    fillColor: Cesium.Color.RED.withAlpha(0.4),
    outlineColor: Cesium.Color.RED,
    outlineWidth: 1,
    outline: true,
    perPositionHeight: false
}

事件

// 编辑完成事件
drawTool.EditEndEvent.addEventListener((result) => {
    console.log('编辑完成:', result);
    console.log('最终位置:', drawTool.editPositions);
});

销毁

drawTool.destroy();

依赖

• CesiumJS ^1.100.0 (peer dependency)
• @turf/turf ^6.5.0

实例

<template>
  <div style="width: 100%; height: 100%">
    <div id="cesiumContainer"></div>
    <div
      style="
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
        background: rgba(255, 255, 255, 0.9);
        padding: 15px;
        border-radius: 5px;
        max-width: 300px;
      "
    >
      <h4 style="margin: 0 0 10px 0; color: #333">几何体创建工具</h4>

      <div style="margin-bottom: 10px">
        <strong>点：</strong><br />
        <button
          @click="drawTool.createPoint()"
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          默认点
        </button>
        <button
          @click="
            drawTool.createPoint({ color: Cesium.Color.RED, pixelSize: 15 })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          红色大点
        </button>
        <button
          @click="
            drawTool.createPoint({
              image: pointIcon,
              scale: 0.8,
            })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          图标点
        </button>
      </div>

      <div style="margin-bottom: 10px">
        <strong>线：</strong><br />
        <button
          @click="drawTool.createLine()"
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          默认线
        </button>
        <button
          @click="drawTool.createLine({ color: Cesium.Color.BLUE, width: 5 })"
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          蓝色粗线
        </button>
        <button
          @click="drawTool.createLine({ color: Cesium.Color.GREEN, width: 2 })"
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          绿色细线
        </button>
      </div>

      <div style="margin-bottom: 5px">
        <strong>面：</strong><br />
        <button
          @click="drawTool.createPolygon()"
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          默认面
        </button>
        <button
          @click="
            drawTool.createPolygon({ color: Cesium.Color.GREEN.withAlpha(0.6) })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          绿色面
        </button>
        <button
          @click="
            drawTool.createPolygon({
              fillColor: Cesium.Color.PURPLE.withAlpha(0.5),
              outlineColor: Cesium.Color.RED,
              perPositionHeight: true,
            })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          紫色面
        </button>
        <button
          @click="
            drawTool.createPolygon({
              fillColor: Cesium.Color.PURPLE.withAlpha(0.5),
              outline: false,
            })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          无边框面
        </button>
        <button
          @click="
            drawTool.createPolygon({
              fillColor: Cesium.Color.YELLOW.withAlpha(0.6),
              outlineColor: Cesium.Color.ORANGE,
              outlineWidth: 5,
            })
          "
          style="margin: 2px; padding: 5px 8px; font-size: 12px"
        >
          粗边框面
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import * as turf from "@turf/turf";
import { CesiumDrawTool } from "cesium-draw-tools";
import pointIcon from "./assets/point.png";

window.Cesium = Cesium;
let drawTool = null;
onMounted(() => {
  let token =
    "your-token";

  Cesium.Ion.defaultAccessToken = token;
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false,
    homeButton: false,
    fullscreenButton: false,
    animation: false,
    sceneModePicker: false,
    timeline: false,
    navigationHelpButton: false,
    baseLayerPicker: false,
  });

  drawTool = new CesiumDrawTool(viewer, {
    cesium: window.Cesium,
    turf: turf,
    enableLogging: true,
  });
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
:deep(.cesium-viewer-bottom) {
  display: none !important;
}
</style>

许可证

MIT