cesium中用Primitive方式画线段

个人理解,在cesium中有多种添加线点多边形等方法,我所了解到的有两种方式,一种是Entity方式,一种是Primitive。区别
entity是一种实体实例将多种形式的可视化聚合为一个高级对象。它们可以手工创建并添加到Viewe实体中
Primitive画一些几何什么的如果处理好的话性能会稍微好一些
基础方法类定义
cesium中用Primitive方式画线段

/**
 * 方法支持坐标颜色和线的宽度
 * @param options {positions,color,width}
 */
function zPrimitivesPolyline(options) {
    this.oldPositions = null;
    this.positions = options.positions;
    this.color = options.color || '#67ADDF';
    this._options = options;
}
zPrimitivesPolyline.prototype.getGeometry = function () {
    return new Cesium.PolylineGeometry({
        positions: this.positions,
        width: this._options.width
    });
};
zPrimitivesPolyline.prototype.destroy = function name() {
    this._primitive.destroy()
}
zPrimitivesPolyline.prototype.update = function (context) {
    if (!this.oldPositions || this.oldPositions[0] !== this.positions[0] || this.oldPositions[1] !== this.positions[1]) {
        var geometry = this.getGeometry();
        if (!geometry) return
        this._primitive = new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
                },
                id: this._options.id,
            }),
            releaseGeometryInstances: false,
            appearance: new Cesium.PolylineMaterialAppearance({
                aboveGround: false
            }),
            asynchronous: false
        });
        if (!this.oldPositions) {
            this.oldPositions = []
        }
        this.oldPositions[0] = this.positions[0];
        this.oldPositions[1] = this.positions[1];
    }
    var primitive = this._primitive
    primitive.update(context);
};

使用方法

var viewer = new Cesium.Viewer(id, {
            animation: false,//是否显示动画控件(左下方那个)
            geocoder: false,//是否显示地名查找控件
            infoBox: false,
            timeline: false,//是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            fullscreenButton: false, //全屏按钮不显示
            homeButton: false,//主页按钮
            navigationHelpButton: false,//帮助按钮
            baseLayerPicker: false,//是否显示图层选择控件
            scene3DOnly: true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
            imageryProvider: false
});
var primitivesPolylineCollection = viewer.scene.primitives.add(new Cesium.PrimitiveCollection());
var primitivesPolyline = new zPrimitivesPolyline({
  	 positions: [Cesium.Cartesian3.fromDegrees('经度','维度'),Cesium.Cartesian3.fromDegrees('经度','维度')],
     width:  8,
     color: '#67ADDF'
})
primitivesPolylineCollection.add(primitivesPolyline)
primitivesPolyline.positions[0] = Cesium.Cartesian3.fromDegrees('经度','维度')

这里主要是应用 primitive.update 的方法来实时更新他的位置进行折现位置改变的绘制
引入oldPositions主要原因是只有当点发生变化的时候才进行实例的重新创建以及绘制用来节约性能

上一篇:cesium 图层构建的那些事 (二十三)


下一篇:cesium 实现卷帘