Cesium 自定义Primitive - 绘制线

最新推荐文章于 2025-06-02 18:31:33 发布
最新推荐文章于 2025-06-02 18:31:33 发布
阅读量2.4k 收藏 19
点赞数 34
CC 4.0 BY-SA版权
分类专栏： Cesium 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/anglestar2012/article/details/136444432
本文介绍了如何使用Cesium库中的CustomPolylinePrimitive绘制线，并利用ScreenSpaceEventHandler处理鼠标事件，如左键点击、鼠标移动和右键结束编辑，实现动态线绘制和更新功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、创作来源

        1、cesium的entity绘制线

        2、不使用entity的情况下，使用自定义的primitive来动态绘制线

        3、结合上一篇文章的动态绘制线，执行动态线的更新

二、ScreenSpaceEventHandler

        1、概念

        cesium中的用户输入事件:ScreenSpaceEventHandler，处理用户输入事件。可以添加自定义功能以在用户输入时执行。

        API地址：CesiumApi传送门

        2、事件类型

        红色部分为常用类型

        

        3、方法

        destroy()

        移除此对象持有的侦听器。

        isDestroyed()

        如果此对象被销毁，则返回 true；否则为false。

        getInputAction(type, modifier)

        返回要在输入事件上执行的函数。

        removeInputAction(type, modifier)

        删除要在输入事件上执行的函数。

        setInputAction(action, type, modifier)

        设置要在输入事件上执行的功能。

       4、示例

        a、左键单击

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
	console.log('shift + 左键单击', event.position); 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

         b、鼠标移动事件

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
    console.log('shift + 鼠标移动', event.position); 
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        c、右键事件

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((event) => {
	console.log('shift + 右键单击', event.position); 
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

三、编写步骤

1、创建绘制线的类

        包括构造函数、绘图函数以及销毁函数

import { Viewer, ScreenSpaceEventHandler } from "cesium";
export default class DrawPolylineTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomPolylinePrimitive}
     * @private
     */
    this._primitive = undefined;
    /**
     * 事件
     * @type {ScreenSpaceEventHandler}
     * @private
     */
    this._handler = undefined;
  }
  draw() {}
  destroy() {}
}

2、事件确认

        鼠标点击事件、移动事件、右键结束编辑

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";
export default class DrawPolylineTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomPolylinePrimitive}
     * @private
     */
    this._primitive = undefined;
    /**
     * 事件
     * @type {ScreenSpaceEventHandler}
     * @private
     */
    this._handler = undefined;
  }

  /**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
    }, ScreenSpaceEventType.MOUSE_MOVE);
    this._handler.setInputAction((event) => {
      console.log("鼠标右键单机事件");
    }, ScreenSpaceEventType.RIGHT_CLICK);
  }
  /**
   * 销毁
   */
  destroy() {
    if (this._handler) {
      this._handler.isDestroyed() && this._handler.destroy();
      this._handler = null;
    }
  }
}

 3、点位变动逻辑

        =>初始为空的数组

        =>点击后当为空时直接push,当有两个点时，先pop后push

        =>移动：当只有一个点时直接push,当点位数大于1的时候，先移除后push

        =>右键直接结束

4、代码实现

        1、屏幕坐标转地球坐标

/**
 * 获取地图点位
 * @param {Cartesian2} screenPosition 屏幕坐标
 * @param {Viewer} viewer 地图
 * @returns {Cartesian3} 地图三维坐标
 */
export const pickPosition = (screenPosition, viewer) => {
  let ray = viewer.camera.getPickRay(screenPosition);
  return viewer.scene.globe.pick(ray, viewer.scene);
};

        2、鼠标事件代码

/**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
        } else {
          positions.pop();
          positions.push(position);
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
    this._handler.setInputAction((event) => {
      console.log("鼠标右键单机事件");
      this._primitive = undefined;
      positions = [];
    }, ScreenSpaceEventType.RIGHT_CLICK);
  }

            3、渲染线代码

/**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
          flag._primitive = new CustomPolylinePrimitive();
          this._viewer.scene.primitives.add(this._primitive);
        } else {
          let moveP = positions.pop();
          positions.push(position, moveP);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
    this._handler.setInputAction((event) => {
      console.log("鼠标右键单机事件");
      if (flag._primitive) {
        flag._primitive.updateProperty({
          positions: [...positions],
          complete: false,
        });
      }
      this._primitive = undefined;
      positions = [];
    }, ScreenSpaceEventType.RIGHT_CLICK);
  }

        4、测试

let tool = new DrawPolylineTool(viewer);
tool.draw();

四、演示结果

      

五、全部代码

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";
import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";
import CustomPolylinePrimitive from "@/components/entity/CustomPolylinePrimitive";
export default class DrawPolylineTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomPolylinePrimitive}
     * @private
     */
    this._primitive = undefined;
    /**
     * 事件
     * @type {ScreenSpaceEventHandler}
     * @private
     */
    this._handler = undefined;
  }

  /**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    this._handler.setInputAction((event) => {
      console.log("左键单机事件");
      let position = pickPosition(event.position, flag._viewer);
      if (position) {
        if (positions.length === 0) {
          positions.push(position);
          flag._primitive = new CustomPolylinePrimitive();
          this._viewer.scene.primitives.add(this._primitive);
        } else {
          let moveP = positions.pop();
          positions.push(position, moveP);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.LEFT_CLICK);
    this._handler.setInputAction((event) => {
      console.log("鼠标移动事件");
      let position = pickPosition(event.endPosition, flag._viewer);
      if (position) {
        if (positions.length === 1) {
          positions.push(position);
        } else if (positions.length > 1) {
          positions.pop();
          positions.push(position);
        }
        if (flag._primitive) {
          flag._primitive.updateProperty({
            positions: [...positions],
            complete: false,
          });
        }
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
    this._handler.setInputAction((event) => {
      console.log("鼠标右键单机事件");
      if (flag._primitive) {
        flag._primitive.updateProperty({
          positions: [...positions],
          complete: false,
        });
      }
      this._primitive = undefined;
      positions = [];
    }, ScreenSpaceEventType.RIGHT_CLICK);
  }
  /**
   * 销毁
   */
  destroy() {
    if (this._handler) {
      this._handler.isDestroyed() && this._handler.destroy();
      this._handler = null;
    }
  }
}

Cesium使用Polyline、Primitive画线条
qq_37312180的博客
01-27 1091
【代码】Cesium使用Polyline、Primitive画线条。
CesiumJS【Basic】- #030 绘制实线（Primitive方式）
AlanL的专栏
07-01 252
绘制实线（Primitive方式）
Cesium使用primitive添加点线面(贴地)
最新发布
胡萝卜先生的进阶之路
06-02 482
面贴地显示：为面图元设置了classificationType属性。
Cesium 自定义Primitive-线
地理信息的专栏
03-01 1282
利用Cesium自带的Primitive对象，动态更新贴地线
【Cesium】 Primitive创建形状基础---点、线、面、矩形、柱体、连廊、墙等
Wangzx的博客
12-03 3885
【代码】Cesium Primitive创建形状基础---点、线、面、矩形、柱体、连廊、墙等。
[Cesium] 使用primitive绘制多段线
chengzhf的专栏
08-26 3188
cesium里面绘制点线面可以通过entity或者primitive。今天先记录下使用primitive绘制线的代码。
cesium中用Primitive方式画线段
qq1248409755的博客
01-04 4626
cesium绘制线段
CesiumJS【Basic】- #059 绘制网格填充多边形（Primitive方式）
AlanL的专栏
07-03 191
绘制网格填充多边形（Primitive方式）
Cesium高阶学习三、使用DC自定义Primitive
程迷学习的博客
10-10 1090
Cesium高阶学习三、使用DC自定义Primitive
Cesium使用DrawCommand自定义Primitive初体验
梅子黄时雨
09-01 3446
Cesium使用DrawCommand自定义Primitive初体验
Cesium画点线面
01-25
Cesium画点线面，实现在Cesium地图上点几个点，画成一条线或者面。
Cesium地图上画图
08-29
Cesium，在地图上画图，用鼠标在地图上画可编辑的图。
Cesium画点线添加标注和描述
04-02
Cesium画点线，添加标注，添加后弹窗输入描述等。。。
Cesium 动态Polyline绘制
01-20
Cesium 用Entity绘制polyline，如果使用CallbackProperty方法进行动态绘制，depthFailMaterial属性将失效。 从官方github上的issue找了替代的方法。 动态Primitive线的绘制 // 绘制方法 this._candidateLinePrimitive = this.scene.primitives.add( new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGe
Cesium动态绘制面，线，点.vue
09-17
c
Cesium 实战 25 - Primitive 创建一个每面（六个面）不同颜色的立方体（BOX）
非科班Java出身GISer的博客
02-18 854
Cesium 实战 - Primitive 创建一个六个面不同颜色的立方体（BOX）。
重读Cesium(七):Primitive自定义几何并设置法线
GIS肆月
09-10 3000
我们可以看看上面四棱锥的构造，四棱锥一共由4个侧面，1个顶面构成。其中4个测面都是三角形，顶面为正方形（但是在图形渲染概念中没有正方形的概念），所以我们将正方形拆分成为2个三角形。所以我们得到的结果是 四棱锥 总共有 6个三角形。每个三角形有3个点，所以 四棱锥 一共有3*6 = 18 个顶点。虽然按照上述的分析一个四棱锥有18个顶点，但是你会发现这里面有很多顶点都是重复的，我们可以通过 **_ 索引的方式重建顶点 _ **的话，那么四棱锥就只会剩下 5 个顶点。
cesium polyline 自定义材质图片运动线
热门推荐
qq_34447899的博客
03-02 1万+
cesium shader编程实现支持自定义图片材质的polyline
cesium绘制primitive流动线
04-23
### Cesium 中使用 Primitive 绘制流动线效果实现方法 要在 Cesium 中使用 `Primitive` 绘制具有流动效果的线条，可以通过自定义材质并结合时间参数来模拟动态变化的效果。以下是详细的说明和代码示例。 #### 原理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生活真难

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值