Cesium+Vue3学习系列（8）---图形标绘点、线、多边形

原创 已于 2025-11-05 14:25:44 修改 · 472 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习

于 2025-09-24 13:19:15 首次发布

 本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。 请关注微信公众号 “webgis学习”或扫描下方二维码，关注后，在公众号里输入“Cesium学习系列源码”，即可看到全部代码。

本篇主要介绍如何使用Cesium标绘简单的点、线以及多边形。

1、新建BaseDraw类，作为点、线、多边形的基类，在构造函数中注入事件分发器，用于回调标绘数据信息。

import { ScreenSpaceEventHandler, ScreenSpaceEventType, Viewer, Entity, HeightReference, Cartesian3, Color, JulianDate, Cartesian2 } from 'cesium';
import EventDispatcher from '../EventDispatcher/EventDispatcher';
export abstract class BaseDraw {
    protected viewer: Viewer;
    protected dispatcher: EventDispatcher;
    protected handler: ScreenSpaceEventHandler;
    protected active = false;          // 是否处于绘制状态
    protected finished = false;        // 是否已结束
    protected tempEntity?: Entity;     // 绘制过程中跟随鼠标的临时实体
    protected pointEntities: Entity[] = []; // 已落点的实体（可用于回退、编辑）
    constructor(viewer: Viewer, dispatcher: EventDispatcher) {
        this.viewer = viewer;
        this.dispatcher = dispatcher;
        this.handler = new ScreenSpaceEventHandler(viewer.canvas);
    }
    /** 子类必须实现：根据当前点序列生成最终实体 */
    protected abstract buildFinalEntity(): Entity;
    /** 子类可实现：生成跟随鼠标的临时图形 */
    protected abstract buildTempEntity(): Entity | undefined;
    /** 开始绘制 */
    start() {
        if (this.active || this.finished) return;
        this.active = true;
        this.finished = false;
        // 左键落点
        this.handler.setInputAction((e: any) => this.onLeftClick(e), ScreenSpaceEventType.LEFT_CLICK);
        // 鼠标移动
        this.handler.setInputAction((e: any) => this.onMouseMove(e), ScreenSpaceEventType.MOUSE_MOVE);
        // 右键结束
        this.handler.setInputAction(() => this.finish(), ScreenSpaceEventType.RIGHT_CLICK);
        this.dispatcher.dispatchEvent('DRAWSTART', { type: this.constructor.name,text:"开始绘制" });
    }
    protected onLeftClick(e: any) {        
        const cartesian = this.safePick(e.position || e.endPosition);
        if (!cartesian) return;
        this.addPoint(cartesian);
        this.dispatcher.dispatchEvent('DRAWUPDATE', { type: this.constructor.name, points: this.getPositions() });
    }
    protected onMouseMove(e: any) {
        const cartesian = this.safePick(e.position || e.endPosition);
        if (!cartesian) return;
        // 更新临时图形
        if (!this.tempEntity) {
            this.tempEntity = this.buildTempEntity();            
        }
        this.updateTempEntity(cartesian);
        this.dispatcher.dispatchEvent('MOUSEMOVE', { type: this.constructor.name, points: this.getPositions(), cursor: cartesian,text:"添加下一个点" });
    }
    protected addPoint(position: Cartesian3) {
        // 落点显示
        const point = this.viewer.entities.add({
            position,
            point: {
                pixelSize: 10,
                color: Color.YELLOW,
                heightReference: HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: Number.POSITIVE_INFINITY  // 始终不被地形遮挡 
            }
        });
        this.pointEntities.push(point);
    }
    /** 安全地拾取贴地点；失败返回 undefined */
    private safePick(windowPos: Cartesian2): Cartesian3 | undefined {   
        const ray = this.viewer.camera.getPickRay(windowPos);
        if (!ray) return undefined;
        return this.viewer.scene.globe.pick(ray, this.viewer.scene)
            ?? this.viewer.scene.globe.ellipsoid.scaleToGeodeticSurface(ray.origin);
    }
    /** 当前可用于成面的点数 */
    protected get validPositions(): Cartesian3[] {
        const pts = this.getPositions();
        return pts.length >= 2 ? pts : [];
    }
    /** 结束绘制 */
    finish() {
        if (!this.active) return;
        this.active = false;
        this.finished = true;
        this.handler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK);
        this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
        this.handler.removeInputAction(ScreenSpaceEventType.RIGHT_CLICK);
        // 移除临时
        if (this.tempEntity) {
            this.viewer.entities.remove(this.tempEntity);
            this.tempEntity = undefined;
        }
        const final = this.buildFinalEntity();
        this.dispatcher.dispatchEvent('DRAWEND', { type: this.constructor.name, entity: final, points: this.getPositions(),text:"绘制完成"});
    }
    /** 清理 */
    destroy() {
        this.finish();
        this.pointEntities.forEach(p => this.viewer.entities.remove(p));
        this.pointEntities = [];
        this.handler.destroy();
    }
    /** 子类可重写：返回当前已有点序列 */
    protected getPositions(): Cartesian3[] {
        return this.pointEntities.map(e => e.position!.getValue(JulianDate.now())!);
    }
    /** 更新临时图形（子类可重写） */
    protected updateTempEntity(cursor: Cartesian3) {
        // 默认空实现
    }
}

调用start函数开始绘制。onLeftClick函数响应左键落点。onMouseMove用于处理鼠标移动，移动过程中会有临时图形存放在buildTempEntity里，buildTempEntity是抽象函数，子类里会有具体实现。调用finish完成绘制。绘制的最终实体放在buildFinalEntity里，也是个抽象函数，子类具体实现。

2、新建CommonPoint类继承BaseDraw。实现buildTempEntity与buildFinalEntity。点图形不需要鼠标临时跟随，只需左键点击一次即可绘制。

import { Color, Entity, HeightReference, Viewer } from "cesium";
import { BaseDraw } from "../BaseDraw";
import EventDispatcher from "@/system/EventDispatcher/EventDispatcher";
export default class CommonPoint extends BaseDraw {
    constructor(viewer: Viewer, dispatcher: EventDispatcher) {
        super(viewer, dispatcher);
    }
    protected buildFinalEntity(): Entity {
        const pos = this.getPositions()[0];
        return this.viewer.entities.add({
            position: pos,
            point: { pixelSize: 12, color: Color.RED, heightReference: HeightReference.CLAMP_TO_GROUND }
        });
    }
    protected buildTempEntity(): Entity | undefined {
        return undefined; // 点绘制无需临时跟随
    }
    protected onLeftClick(e: any) {
        super.onLeftClick(e);
        // 点只需要 1 次点击即可结束
        this.finish();
    }
}

3、新建CommonLine类继承BaseDraw。实现buildTempEntity与buildFinalEntity。tempCursor用于记录鼠标位置。

import { CallbackProperty, Cartesian3, Color, Entity, PolylineGraphics } from "cesium"
import { BaseDraw } from "../BaseDraw";
export default class CommonLine extends BaseDraw {
    private tempCursor?: Cartesian3;
    protected buildFinalEntity(): Entity {
        return this.viewer.entities.add({
            polyline: new PolylineGraphics({
                positions: new CallbackProperty(() => this.getPositions(), false),
                width: 3,
                material: Color.ORANGE,
                clampToGround: true
            })
        });
    }
    protected buildTempEntity(): Entity | undefined {
        return this.viewer.entities.add({
            polyline: new PolylineGraphics({
                positions: new CallbackProperty(() => [...this.getPositions(), this.tempCursor || new Cartesian3()], false),
                width: 2,
                material: Color.YELLOW.withAlpha(0.6),
                clampToGround: true
            })
        });
    }
    protected updateTempEntity(cursor: Cartesian3) {
        this.tempCursor = cursor;
    }
}

4、新建PolygonDraw继承BaseDraw。实现buildTempEntity与buildFinalEntity生成临时多边形Entity与最终Entity。tempCursor用于记录鼠标位置。

import { Entity, PolygonGraphics, CallbackProperty, Color, Cartesian3, ClassificationType } from 'cesium';
import { BaseDraw } from '../BaseDraw';
export default class CommonPolygon extends BaseDraw {
    protected buildFinalEntity(): Entity {
        return this.viewer.entities.add({
            polygon: new PolygonGraphics({
                hierarchy: new CallbackProperty(() => ({
                    positions: [...this.validPositions || new Cartesian3()]
                }), false),
                classificationType: ClassificationType.BOTH,
                material: Color.BLUE.withAlpha(0.4)
            })
        });
    }
    protected buildTempEntity(): Entity | undefined {
        if (this.validPositions.length === 0) return undefined;   // 不创建
        return this.viewer.entities.add({
            polygon: new PolygonGraphics({
                hierarchy: new CallbackProperty(() => ({
                    positions: [...this.validPositions, this.tempCursor || new Cartesian3()]
                }), false),
                classificationType: ClassificationType.BOTH,
                material: Color.CYAN.withAlpha(0.3)
            })
        });
    }
    private tempCursor = new Cartesian3();
    protected updateTempEntity(cursor: Cartesian3) {
        this.tempCursor = cursor;
    }
}

5、前端页面，新建CommonDraw.vue。调用图形对象相应的start函数即可。利用事件总线回调的数据，显示标绘信息。

<template>
    <div class="common-draw-container">
        <span class="common-draw-title"> 普通标绘 </span>
        <div class="draw-btns">
            <el-button type="primary" @click="DrawPointOnScene">点</el-button>
            <el-button type="primary" @click="DrawLineOnScene">线</el-button>
            <el-button type="primary" @click="DrawPolygonOnScene">多边形</el-button>
        </div>
        <el-text>{{ drawInfo }}</el-text>
    </div>
</template>
<script lang="ts" setup>
import CommonLine from '@/system/Draw/Lines/CommonLine'
import CommonPoint from '@/system/Draw/Points/CommonPoint'
import CommonPolygon from '@/system/Draw/Polygons/CommonPolygon'
import EventDispatcher from '@/system/EventDispatcher/EventDispatcher'
import CesiumViewer from '@/Viewer/CesiumViewer'
const drawInfo = ref('')
let viewer = CesiumViewer.viewer
const dispatcher = new EventDispatcher();
// 监听绘制结果
dispatcher.on('DRAWEND', (payload:any) => {
    drawInfo.value = payload.text;    
});
dispatcher.on('DRAWSTART', (payload:any) => {
    drawInfo.value = payload.text;    
});
dispatcher.on('MOUSEMOVE', (payload:any) => {
    drawInfo.value = payload.text;    
});
const DrawPointOnScene = () => {
    const pointTool = new CommonPoint(viewer!, dispatcher);
    pointTool.start();
}
const DrawLineOnScene = () => {
    const lineTool = new CommonLine(viewer!, dispatcher);
    lineTool.start();
}
const DrawPolygonOnScene = () => {
    const polygonTool = new CommonPolygon(viewer!, dispatcher);
    polygonTool.start();
}
</script>
<style lang="scss" scoped>
.common-draw-container {
    padding: 20px;
    text-align: left;
    .common-draw-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .draw-btns {
        margin-top: 20px;
        margin-bottom: 20px;
        .el-button {
            margin-right: 10px;
            width: 60px;
        }
    }
    .el-text {
        color: yellow
    }
}
</style>

6、实现效果

117：vue+cesium 自定义绘制多边形
大剑师兰特的GIS世界
03-24 774
本示例在 Vue + cesium 项目中自定义绘制多边形。这里利用鼠标绘制，左键点击，一个点时候绘制一个点，两个点时候绘制一条线，三个点及以上绘制面。右键点击，去掉多边形。
【Cesium学习笔记】三、画点、画线、画多边形
jg10000119的博客
04-11 1935
对Cesium画点、画线、画多边形、组合图形
Cesium+Vue3学习系列（9）---编辑Entity图形控制点、拖拽Entity移动、删除Entity
XTTX110的博客
09-26 844
如果是图形控制点，在onMouseMove函数里更新当前顶点，如果是整个图形，在onMouseMove更新整体的图形位置。在MultiEditManager类中实现一个单例，用户绘制好图形后，通过register函数注册到当前的MultiEditManager对象里，将左键点击动作绑定到onClick函数里，当用户选中图形后，执行startEdit，startEdit里会调用helper.start()执行具体的编辑动作，具体的实现放在了EditHelper类里。
VUE3-Cesium（entities-创建多边形实体、折线实体）
damadashen的博客
06-12 1517
Cesium中多边形及折线实体的创建使用（polygon、polyline）
cesium +vue3 +vite 实现点线面功能
weixin_46156770的博客
01-29 1103
学习cesium
Vue3+Cesium实现地图标点画出点、线、面，并获取其坐标
小阮的笔记本
05-17 3592
Cesium地图功能实现摘要 本文介绍了基于Cesium实现的地图功能模块，主要包括： 图形绘制功能：支持通过标点绘制点、线、面图形，并可拖动端点调整位置和获取坐标 图层控制：可隐藏/展示地图文字图层 地图定位：实现地图下钻定位功能 全屏显示：支持全屏查看模式 视角控制：基于cesium-navigation-es6实现类似高德地图的视角控制器 文章详细介绍了Cesium的初始化配置，包括去除版权信息、设置缩放范围、视角控制等，并封装为hooks形式方便复用。
Cesium+Vue3学习教程系列（19）---多边形标绘代码封装修改，新增矩形绘制
XTTX110的博客
10-14 387
本文介绍基于Cesium+Vue3技术栈的GIS开发系列更新，重点讲解了多边形标绘功能的代码重构与矩形绘制实现。主要内容包括：1）将原有BaseArrow类重构为BasePolygon基类，支持多种多边形绘制；2）新增CommonRectangle矩形类继承BasePolygon；3）实现矩形坐标计算算法CreateRectanglePoints；4）展示前端调用方式和实现效果。文章预告后续将更新圆形、扇形等标绘功能，相关代码已开源在Git的master分支。
Cesium+Vue3学习系列（10）---态势标绘 直箭头、 细直线箭头画法
XTTX110的博客
09-26 258
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈实现态势标绘中直箭头和细直线箭头的绘制方法。通过创建StraightArrow和StraightLineArrow类继承BaseDraw，分别使用createStraightArrowPoints和createStraightLineArrowPoints函数计算箭头关键点坐标。文章详细展示了箭头绘制原理和代码实现，包括多边形箭头的宽度因子控制和直线箭头的长度缩放因子设置。完整源码可通过关注"webg
Cesium+Vue3学习教程系列（20）---圆形、扇形绘制与编辑
最新发布
XTTX110的博客
10-16 506
本教程基于Cesium+Vue3技术栈，新增圆形和扇形标绘功能。圆形通过Cesium的EllipseGraphics实现，使用两点确定圆心和半径；扇形则通过Polygon模拟，三点确定圆心、半径和角度，并借助ENU坐标系转换计算圆弧点坐标。代码封装了CommonCircle和CommonSector类，支持绘制和编辑功能。
Cesium+VUE实现16种态势标绘类型开源组件
- 标绘类型包括点、线、路径、多边形、圆形、扇形、多点、多线、多边形填充、圆环、复合路径等多种基础图形和复杂图形。 - 这些标绘类型可应用于实时动态的态势展示，如路径追踪、区域监控等。 知识点四：资源文件...
精选资源
cesium-draw_cesium_draw_
10-01
这个组件的亮点在于其可扩展性，意味着开发者可以根据需求添加或定制各种标绘工具，例如点、线、面、多边形、圆等，以满足不同应用场景的需求。这在地理信息系统（GIS）和地图应用开发中尤其有用，如地图测绘、灾害...
精选资源
cesium态势标绘与编辑
05-17
内容摘要：cesium态势标绘与编辑，点、线、面、圆、多边形、攻击箭头、钳击箭头、直线箭头标会与编辑，每个方法都用es6模块化处理，简单易读易懂， 适合人群：初学者 使用方式：解压压缩包 直接使用 技术范围：vue+...
Vue与WebGL结合
热门推荐
XTTX110的博客
03-28 1万+
本文将WebGL与当前前端比较火的Vue框架进行初步结合，以备后续项目开发需要。部分代码源自https://blog.youkuaiyun.com/GISuuser/article/details/82224057以及《WebGL编程指南》。 大家可以自己百度搜索vue的安装配置。这里仅介绍本项目的开发过程。 1、创建vue工程 在cmd窗口中输入vue init webpackvueproject，...
Vue与WebGL结合--纹理
XTTX110的博客
04-09 1275
本文介绍vue与WebGL结合给四边形添加纹理，文中部分代码及图片源自《WebGL编程指南》。 代码如下： <template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div> </template> &l...
Cesium+Vue3学习系列（16）---Cesium加载Geoserver发布的矢量（.shp）WMS数据服务
XTTX110的博客
10-11 1064
本文介绍了如何在Cesium+Vue3项目中加载Geoserver发布的WMS矢量数据服务。详细讲解了从创建工作区、发布Shapefile数据到自定义样式的完整流程，包括SLD样式文件配置和前端代码实现。文章提供了测试数据和样式文件，重点说明了Geoserver中数据发布的关键步骤和注意事项，如坐标系设置、字符集选择等，最后展示了如何在Cesium中动态加载和移除WMS图层。
Vue与WebGL结合--MVP矩阵
XTTX110的博客
04-11 955
本文主要介绍MVP矩阵，MVP矩阵实际上是由模型矩阵、视图矩阵以及投影矩阵组合而成，主要用于调整模型位置、观察模型位置以及相机投影信息。文中部分代码源自《WebGL编程指南》。 代码如下： <template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas...
Cesium+Vue3学习系列（4）---图层管理功能封装
XTTX110的博客
09-19 900
本文介绍了基于Cesium+Vue3+Vite+Typescript+elementplus技术栈的GIS数据图层管理方案。主要内容包括：1）封装CesiumViewer类，初始化基础地图视图；2）实现LayerManager类，采用单例模式管理各类GIS数据图层（影像、地形、矢量等），支持图层的添加、删除和层级控制；3）通过UI组件实现底图切换和注记管理的功能演示。文中提供了完整的代码实现，并开源相关项目源码。该方案可有效管理多种GIS数据格式，为WebGIS开发提供了实用的技术参考。
Cesium+Vue3学习系列（14）---Cesium加载与删除geojson、kml、glb、3dtiles、czml数据
XTTX110的博客
10-09 845
本文介绍了基于Cesium+Vue3技术栈实现GIS图层管理功能的方法，重点讲解了五种地理数据格式的加载与删除操作。文章详细展示了geojson、kml、glb、3dtiles和czml格式数据的配置参数、加载方式及对应的前端实现代码，并提供了统一的数据删除接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值