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);
  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值