Cesium 自定义Primitive - 绘制多边形

最新推荐文章于 2024-07-04 09:35:43 发布
原创 最新推荐文章于 2024-07-04 09:35:43 发布 · 3.3k 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

本文介绍了如何在Cesium中使用CustomPolygonPrimitive绘制多边形，包括创建自定义primitive，处理属性更新，以及通过DrawPolygonTool实现用户交互式绘制。

一、创作来源

        1、cesium的entity绘制多边形

        2、不使用entity的情况下，使用自定义的primitive来绘制多边形

        3、同时使用自定义Primitive来执行属性更新，动态绘制多边形

二、创建自定义Primitive

1、CustomPolygonPrimitive

        1、创建类CustomPolygonPrimitive 

        2、编写构造函数，定义该对象的一些私有属性

        3、编写更新属性函数updateProperty

        4、编写渲染代码

        5、编写销毁代码

export default class CustomPolygonPrimitive {
  constructor(options) {
    this._props = options;
    /**
     * 渲染列表
     * @type {*[]}
     * @private
     */
    this._primitiveCollection = [];

    this._dynamicPrimitive = undefined;
  }

  /**
   * 更新属性
   * @param options
   */
  updateProperty(options) {}

  /**
   * 渲染
   * @param frameState
   */
  update(frameState) {
    this._primitiveCollection.forEach((primitive) => {
      primitive && !primitive.isDestroyed() && primitive.update(frameState);
    });
    if (this._dynamicPrimitive) {
      this._dynamicPrimitive.update(frameState);
    }
  }

  /**
   * 销毁
   */
  destroy() {
    this._primitiveCollection.forEach((primitive) => {
      primitive && !primitive.isDestroyed() && primitive.destroy();
    });
    this._primitiveCollection = undefined;
    if (this._dynamicPrimitive) {
      this._dynamicPrimitive.destroy();
    }
    this._dynamicPrimitive = undefined;
  }
}

2、编写更新属性代码

        当点位个数大于1个点的时候，开启对象的渲染

/**
   * 更新属性
   * @param options
   */
  updateProperty(options) {
    this._props = {
      ...this._props,
      ...options,
    };
    let positions = this._props.positions;
    let complete = this._props.complete;
    if (positions.length >= 2) {
      let dynamicPrimitive = this._dynamicPrimitive;
      if (dynamicPrimitive) {
        dynamicPrimitive.destroy();
        dynamicPrimitive = null;
        this._dynamicPrimitive = null;
      }
      let primitive = this.initPolygonPrimitive(positions);
      if (complete) {
        this._primitiveCollection.push(primitive);
      } else {
        this._dynamicPrimitive = primitive;
      }
    }
  }

3、编写多边形线的渲染代码

        当点位数大于2的时候，闭合形成多边形

/**
   * 初始化渲染对象
   * @param positions
   * @return {module:cesium.GroundPolylinePrimitive}
   */
  initPolygonPrimitive(positions) {
    let instance = new GeometryInstance({
      geometry: new GroundPolylineGeometry({
        positions: positions,
        width: 4,
        loop: positions.length > 2,
      }),
    });
    return new GroundPolylinePrimitive({
      geometryInstances: instance,
      appearance: new PolylineMaterialAppearance({
        material: new Material({
          fabric: {
            type: "Color",
            uniforms: {
              color: Color.fromCssColorString("#ff0000"),
            },
          },
        }),
      }),
      asynchronous: false,
    });
  }

二、创建绘制类

1、创建DrawPolygonTool

        1、编写构造函数

        2、编写绘制方法调用

        3、编写销毁代码

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

  /**
   * 绘图
   */
  draw() {}
  /**
   * 销毁
   */
  destroy() {
    if (this._handler) {
      this._handler.isDestroyed() && this._handler.destroy();
      this._handler = null;
    }
  }
}

2、编写鼠标事件

        1、鼠标采点事件

        2、鼠标移动事件

        3、鼠标右键结束事件

/**
   * 绘图
   */
  draw() {
    this._handler = new ScreenSpaceEventHandler(this._viewer.canvas);
    let positions = [];
    let flag = this;
    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);
  }

3、获取点位并渲染

        =>初始为空的数组

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

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

        =>右键直接结束

/**
   * 绘图
   */
  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 CustomPolygonPrimitive();
          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 DrawPolygonTool(viewer);
tool.draw();

三、显示效果

四、全部代码

1、CustomPolygonPrimitive

import {
  Color,
  GeometryInstance,
  GroundPolylineGeometry,
  GroundPolylinePrimitive,
  Material,
  PolylineMaterialAppearance,
} from "cesium";

export default class CustomPolygonPrimitive {
  constructor(options) {
    this._props = options;
    /**
     * 渲染列表
     * @type {*[]}
     * @private
     */
    this._primitiveCollection = [];

    this._dynamicPrimitive = undefined;
  }

  /**
   * 更新属性
   * @param options
   */
  updateProperty(options) {
    this._props = {
      ...this._props,
      ...options,
    };
    let positions = this._props.positions;
    let complete = this._props.complete;
    if (positions.length >= 2) {
      let dynamicPrimitive = this._dynamicPrimitive;
      if (dynamicPrimitive) {
        dynamicPrimitive.destroy();
        dynamicPrimitive = null;
        this._dynamicPrimitive = null;
      }
      let primitive = this.initPolygonPrimitive(positions);
      if (complete) {
        this._primitiveCollection.push(primitive);
      } else {
        this._dynamicPrimitive = primitive;
      }
    }
  }

  /**
   * 初始化渲染对象
   * @param positions
   * @return {module:cesium.GroundPolylinePrimitive}
   */
  initPolygonPrimitive(positions) {
    let instance = new GeometryInstance({
      geometry: new GroundPolylineGeometry({
        positions: positions,
        width: 4,
        loop: positions.length > 2,
      }),
    });
    return new GroundPolylinePrimitive({
      geometryInstances: instance,
      appearance: new PolylineMaterialAppearance({
        material: new Material({
          fabric: {
            type: "Color",
            uniforms: {
              color: Color.fromCssColorString("#ff0000"),
            },
          },
        }),
      }),
      asynchronous: false,
    });
  }
  /**
   * 渲染
   * @param frameState
   */
  update(frameState) {
    this._primitiveCollection.forEach((primitive) => {
      primitive && !primitive.isDestroyed() && primitive.update(frameState);
    });
    if (this._dynamicPrimitive) {
      this._dynamicPrimitive.update(frameState);
    }
  }

  /**
   * 销毁
   */
  destroy() {
    this._primitiveCollection.forEach((primitive) => {
      primitive && !primitive.isDestroyed() && primitive.destroy();
    });
    this._primitiveCollection = undefined;
    if (this._dynamicPrimitive) {
      this._dynamicPrimitive.destroy();
    }
    this._dynamicPrimitive = undefined;
  }
}

2、DrawPolygonTool

import { Viewer, ScreenSpaceEventHandler, ScreenSpaceEventType } from "cesium";
import { pickPosition } from "@/components/MilitaryPlot/utils/PlotUtils";
import CustomPolygonPrimitive from "@/components/samples/CustomPolygonPrimitive";
export default class DrawPolygonTool {
  /**
   * 构造函数
   * @param {Viewer} viewer
   */
  constructor(viewer) {
    /**
     * 地球视图
     * @type {Viewer}
     * @private
     */
    this._viewer = viewer;
    /**
     * 线对象
     * @type {CustomPolygonPrimitive}
     * @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 CustomPolygonPrimitive();
          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;
    }
  }
}

CesiumJS【Basic】- #055 绘制渐变填充多边形（Primitive方式）
AlanL的专栏
07-03 288
绘制渐变填充多边形（Primitive方式）
CesiumJS【Basic】- #059 绘制网格填充多边形（Primitive方式）
AlanL的专栏
07-03 229
绘制网格填充多边形（Primitive方式）
Cesium学习笔记（五）几何和外观
Royal
07-14 9670
之前的笔记种记录了Cesium可以使用实体（如多边形和椭球）创建不同的地质类型。例如：使用点阵图在地球上创建一个矩形 let view = new Cesium.Viewer('cesiumDemo');view.entities.add({ rectangle : { coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20
cesium多边形描边_cesium--绘制多边形polygon
weixin_39889642的博客
12-20 860
查询结果截图:区别:名称 作用CoplanarPolygonGeometryCoplanarPolygonOutlineGeometryPolygonGeometry这个好像是给底层用的PolygonGeometryUpdater一般客户端不用PolygonHierarchy定义多边形及其孔的线性环的层次。这些孔本身也可能有嵌套内部多边形的孔。PolygonOutlineGeometry椭球上多边...
Cesium里自定义primitive
07-09 1356
在不改Cesium源码下，在外部添加一个primitive。
cesium系列篇:Entity vs Primitive 基础使用（Polygon）
u010206379的博客
01-30 2944
以创建Polygon为例展示基础使用时，使用Entity和primitive的区别
CESIUM例子学习（九）——Primitive(2)
luoyun620的博客
07-18 6199
上一节学习了Primitive加载BoxGeometry和RectangleGeometry。
Cesium 自定义Primitive
地理信息的专栏
03-01 1369
利用Cesium自带的Primitive对象，融合合并多个Primitive对象，执行同批次渲染
cesium绘制实时绘制多边形并编辑多边形
weixin_57538359的博客
12-28 3405
2.理清需要那些功能,在这里我们用到了cesium得画点,画线,画面,以及对鼠标得左键,右键,和移动得监听。3.接下来就开始创作了,其中还有一些细节,大家自行体会,完整代码如下,当然还有一些缺陷或者bug,请大家指正,我会改进。1.创建cesium (省略.....)前言:基于cesium实现画多边形以及对其编辑。也作为在工作当中的积累,展示在这里.如有不好的地方,欢迎指正.
Cesium 实战 06 - 自定义标绘多边形实现水面效果
非科班Java出身GISer的博客
01-03 2422
Cesium 实战 - 自定义标绘多边形实现水面效果。
CustomPrimitive-EarthSDK:自定义图元扩展，EarthSDK插件，方便在Cesium中实现各种三维效果
05-13
CustomPrimitive-EarthSDK 自定义图元扩展，EarthSDK插件，方便在Cesium中实现各种三维效果
CesiumJS【Basic】- #057 绘制纹理填充多边形（Primitive方式）
AlanL的专栏
07-03 152
绘制纹理填充多边形（Primitive方式）
Cesium 实战 25 - Primitive 创建一个每面（六个面）不同颜色的立方体（BOX）
非科班Java出身GISer的博客
02-18 1068
Cesium 实战 - Primitive 创建一个六个面不同颜色的立方体（BOX）。
CesiumJS【Basic】- #061 绘制条纹填充多边形（Primitive方式）
AlanL的专栏
07-04 146
绘制条纹填充多边形（Primitive方式）
Cesium 自定义Primitive - 绘制矩形
地理信息的专栏
03-06 1780
根据自定义Primitive的绘制矩形
Cesium 自定义Primitive-绘制圆
地理信息的专栏
03-05 2952
利用Cesium自定义Primitive的圆，实现动态绘制圆形
cesium--绘制多边形polygon
热门推荐
李卓书
06-13 3万+
前言 在线沙盒案例: https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Polygon.html api查询地址: https://cesiumjs.org/refdoc/ 查询结果截图: 区别: 名称 作用 CoplanarPolygonGeometry CoplanarPolygonOutlineGeo...
Cesium Vue（五）— 绘制多边形
qq_40120946的博客
10-20 1233
【代码】Cesium Vue（五）— 绘制多边形。
cesium动态绘制多边形(polygon)
qq_25519615的博客
07-27 3625
项目中需要通过三个坐标点位动态调整覆盖范围，于是使用cesium实体对象中的多边形来实现(polygon),实现效果如下。第一步，先创建多边形，使用Cesium.CallbackProperty函数来实时更新位置。注意：此案例是在cesium1.95版本上开发的。这样就完成了动态的多边形绘制了，完整代码如下。第二步，使用定时器定时调用模拟位置变化。
cesium自定义多边形
最新发布
11-11
在 Cesium 中创建**自定义多边形（Custom Polygon）** 是一个常见需求，比如绘制区域、高亮地块、动态编辑形状等。Cesium 提供了多种方式来实现多边形的添加与自定义，包括使用 `PolygonGraphics`、`Entity`、`...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

生活真难

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

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

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

打赏作者

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

抵扣说明：

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

余额充值