Cesium 自定义Primitive

1、为什么要自定义Primitive

��     a、在飞机飞行过程中，如果使用entity同时绘制飞机和线的时候，会发现飞机的飞行位置和线的位置不统一，出现差距，出现脱线。

      b、结合代码分析，cesium的线和飞机模型是分开渲染的，渲染的时段不一致，导致飞机在飞行过程的点位结合不上。

       c、采用同批次渲染就不会发生这个问题

2、如何自定义Primitive

        a、使用es6进行编码

        b、使用class

        c、提供update方法

        d、将自定义的primitive加入到primitivecollection中进行渲染

3、实现代码

        案例以初始实验为主，不以飞机案例来做。

        案例以点和文字加入一个渲染队列进行数据渲染。

        1、首先创建一个类CustomPrimitive

        包括类名、构造函数，以及对应的参数

import { LabelCollection, PointPrimitiveCollection, Cartesian3 } from "cesium";export default class CustomPrimitive {  /**   * 自定义对象   * @param options   * @param {Cartesian3} options.position 点位置   * @param {string} options.text 文本内容   * @param {number} options.pixelSize 点的像素大小   */  constructor(options) {    this._position = options.position;    this._label = options.text;    this._pixelSize = options.pixelSize;    this._ready = false;    /**     * 渲染队列     * @type {[]}     * @private     */    this._primitiveCollection = [];  }}

        2、编写update方法,当数据没有完成注册时，执行注册，初始化实体对象

/**   * 注册   * @param frameState   */  init(frameState) {}  /**   * 更新   * @param frameState   */  update(frameState) {    if (!this._ready) {      this._ready = true;      this.init(frameState);    }    this._primitiveCollection.forEach((primitive) => {      primitive && !primitive.isDestroyed() && primitive.update(frameState);    });  }

        3、编写注册对象，包括点集合和文本渲染

   

/**   * 注册   * @param frameState   */  init(frameState) {    const points = new PointPrimitiveCollection();    points.add({      position: this._position,      color: Color.fromCssColorString("#ff0000", new Color()),      disableDepthTestDistance: 5000,      outlineWidth: 1,      outlineColor: Color.fromCssColorString("#ffff00", new Color()),      pixelSize: this._pixelSize,    });    this._primitiveCollection.push(points);    let labels = new LabelCollection();    labels.add({      text: this._label,      position: this._position,      disableDepthTestDistance: 5000,      fillColor: Color.fromCssColorString("#ffffff", new Color()),      font: "32px sans-serif",      horizontalOrigin: HorizontalOrigin.CENTER,      verticalOrigin: VerticalOrigin.BOTTOM,      showBackground: true,      backgroundColor: Color.fromCssColorString("#0EE3F6C1", new Color()),      backgroundPadding: Cartesian2.fromArray([12, 7]),    });    this._primitiveCollection.push(labels);  }

        4、渲染代码：将定义的Primitive对象加入到渲染队列

let origin2 = Cartesian3.fromDegrees(106, 26, 1600);let origin21 = Cartesian3.fromDegrees(106, 26, 40);viewer.camera.flyTo({    destination: origin2,    complete: () => {      let primitive = new CustomPrimitive({        position: origin21,        text: "测试",        pixelSize: 8,      });      viewer.scene.primitives.add(primitive);    },});

   4、渲染效果

全部代码

import {  LabelCollection,  PointPrimitiveCollection,  Cartesian3,  Color,  Cartesian2,  HorizontalOrigin,  VerticalOrigin,} from "cesium";export default class CustomPrimitive {  /**   * 自定义对象   * @param options   * @param {Cartesian3} options.position 点位置   * @param {string} options.text 文本内容   * @param {number} options.pixelSize 点的像素大小   */  constructor(options) {    this._position = options.position;    this._label = options.text;    this._pixelSize = options.pixelSize;    this._ready = false;    /**     * 渲染队列     * @type {[]}     * @private     */    this._primitiveCollection = [];  }  /**   * 注册   * @param frameState   */  init(frameState) {    const points = new PointPrimitiveCollection();    points.add({      position: this._position,      color: Color.fromCssColorString("#ff0000", new Color()),      disableDepthTestDistance: 5000,      outlineWidth: 1,      outlineColor: Color.fromCssColorString("#ffff00", new Color()),      pixelSize: this._pixelSize,    });    this._primitiveCollection.push(points);    let labels = new LabelCollection();    labels.add({      text: this._label,      position: this._position,      disableDepthTestDistance: 5000,      fillColor: Color.fromCssColorString("#ffffff", new Color()),      font: "32px sans-serif",      horizontalOrigin: HorizontalOrigin.CENTER,      verticalOrigin: VerticalOrigin.BOTTOM,      showBackground: true,      backgroundColor: Color.fromCssColorString("#0EE3F6C1", new Color()),      backgroundPadding: Cartesian2.fromArray([12, 7]),    });    this._primitiveCollection.push(labels);  }  /**   * 更新   * @param frameState   */  update(frameState) {    if (!this._ready) {      this._ready = true;      this.init(frameState);    }    this._primitiveCollection.forEach((primitive) => {      primitive && !primitive.isDestroyed() && primitive.update(frameState);    });  }}