cesium-动态编辑primitive探索 ( 一)

调试了一天,终于搞清楚了核心原理:

即扩展一个primitive类,实现一个函数update

当这个类加入到primitive中时,cesium底层会自动调用update函数进行渲染。

当动态primitive实现了之后,剩下的只需要与鼠标事件结合起来就可以搞定动态编辑primitive了

实现效果:

全部测试代码:

function changeLinePrimitive(options) {
    this.positions=options.positions
}

changeLinePrimitive.prototype.getGeometry = function () {
    return new Cesium.PolylineGeometry({
        positions: this.positions,
        height: 50,
        width:5,
        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXchangeLinePrimitiveFORMAT,

    });
};
changeLinePrimitive.prototype.update = function (context, frameState, commandList) {
    var geometry = this.getGeometry();
    if (!geometry) {
        return;
    }

    this._primitive = new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
            geometry: geometry,
            id: "111",
        }),
        appearance: new Cesium.PolylineMaterialAppearance({
            aboveGround: false
        }),
        asynchronous: false
    });
    var primitive=this._primitive

    primitive.update(context, frameState, commandList);

};

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
});
var positionWord = [];
positionWord.push(Cesium.Cartesian3.fromDegrees(110.20, 34.55, 0));
positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 34.55, 0));
positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 39.55, 0));
var pr=new changeLinePrimitive({positions: positionWord})
console.log(pr)
viewer.scene.primitives.add(pr);
发布了243 篇原创文章 · 获赞 36 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/A873054267/article/details/104022659
今日推荐