调试了一天,终于搞清楚了核心原理:
即扩展一个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);