Cesium 自定义Primitive-线

最新推荐文章于 2025-06-02 18:31:33 发布

原创最新推荐文章于 2025-06-02 18:31:33 发布 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Cesium 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何创建一个自定义的CustomPolylinePrimitive，演示了如何动态更新线的点位，以及如何在Three.js中实现线的绘制和更新。通过实例展示了如何在场景中添加并实时修改点位以达到预期效果。

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

一、创作思路

1、创建一个自定义CustomPrimitive

2、可动态更新线的点位

3、方便后期绘制线

二、实现代码

1、创建一个CustomPolylinePrimitive类,并加入更新的代码

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

    this._dynamicPrimitive = undefined;
  }
  updateProperty(options) {
    this._props = {
      ...this._props,
      ...options,
    };
  }
  /**
   * 更新
   * @param frameState
   */
  update(frameState) {
    this._primitiveCollection.forEach((primitive) => {
      primitive && !primitive.isDestroyed() && primitive.update(frameState);
    });
    if (this._dynamicPrimitive) {
      this._dynamicPrimitive.update(frameState);
    }
  }
}

2、编写更新代码

updateProperty(options) {
    this._props = {
      ...this._props,
      ...options,
    };
    let positions = this._props.positions;
    let complete = this._props.complete;
    if (positions.length > 1) {
      let dynamicPrimitive = this._dynamicPrimitive;
      if (dynamicPrimitive) {
        dynamicPrimitive.destroy();
        dynamicPrimitive = null;
        this._dynamicPrimitive = null;
      }
      let primitive = this.initPolylinePrimitive(positions);
      if (complete) {
        this._primitiveCollection.push(primitive);
      } else {
        this._dynamicPrimitive = primitive;
      }
    }
  }
  initPolylinePrimitive(positions) {
    let instance = new GeometryInstance({
      geometry: new GroundPolylineGeometry({
        positions: positions,
        width: 4,
      }),
    });
    return new GroundPolylinePrimitive({
      geometryInstances: instance,
      appearance: new PolylineMaterialAppearance({
        material: new Material({
          fabric: {
            type: "Color",
            uniforms: {
              color: Color.fromCssColorString("#ff0000"),
            },
          },
        }),
      }),
      asynchronous: false,
    });
  }

3、测试代码，自定义动态更新点位

viewer.camera.flyTo({
    destination: origin2,
    complete: () => {
      let primitive = new CustomPolylinePrimitive({});
      viewer.scene.primitives.add(primitive);
      let count = 0;
      let lon = 106;
      let lat = 26;
      let positions = [];
      let interval = setInterval(() => {
        let lonTemp = lon + count * 0.00001;
        let latTemp = lat + (count % 2) * 0.00001;
        positions.push(Cartesian3.fromDegrees(lonTemp, latTemp));
        primitive.updateProperty({
          positions: positions,
          complete: count === 11,
        });
        if (count > 10) {
          clearInterval(interval);
        }
        count++;
      }, 1000);
    },
  });