cesium中用Primitive方式画线段

最新推荐文章于 2024-03-22 15:18:41 发布

热情仔

最新推荐文章于 2024-03-22 15:18:41 发布

阅读量4k

点赞数 4

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq1248409755/article/details/122307882

版权

js 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

个人理解，在cesium中有多种添加线点多边形等方法，我所了解到的有两种方式，一种是Entity方式，一种是Primitive。区别
entity是一种实体实例将多种形式的可视化聚合为一个高级对象。它们可以手工创建并添加到Viewe实体中
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('经度','维度')