一、創作思路
? ? ? ? 1、創建一個自定義CustomPrimitive
? ? ? ? 2、可動態更新線的點位
? ? ? ? 3、方便后期繪制線
二、實現代碼
? ? ? ? 1、創建一個CustomPolylinePrimitive類,并加入更新的代碼
export default class CustomPolylinePrimitive {constructor(options) {this._props = options;/*** 渲染列表* @type {*[]}* @private*/this._primitiveCollection = [];this._dynamicPrimitive = undefined;}updateProperty(options) {this._props = {...this._props,...options,};}/*** 更新* @param frameState*/update(frameState) {this._primitiveCollection.forEach((primitive) => {primitive && !primitive.isDestroyed() && primitive.update(frameState);});if (this._dynamicPrimitive) {this._dynamicPrimitive.update(frameState);}}
}
? ? ? ? 2、編寫更新代碼
updateProperty(options) {this._props = {...this._props,...options,};let positions = this._props.positions;let complete = this._props.complete;if (positions.length > 1) {let dynamicPrimitive = this._dynamicPrimitive;if (dynamicPrimitive) {dynamicPrimitive.destroy();dynamicPrimitive = null;this._dynamicPrimitive = null;}let primitive = this.initPolylinePrimitive(positions);if (complete) {this._primitiveCollection.push(primitive);} else {this._dynamicPrimitive = primitive;}}}initPolylinePrimitive(positions) {let instance = new GeometryInstance({geometry: new GroundPolylineGeometry({positions: positions,width: 4,}),});return new GroundPolylinePrimitive({geometryInstances: instance,appearance: new PolylineMaterialAppearance({material: new Material({fabric: {type: "Color",uniforms: {color: Color.fromCssColorString("#ff0000"),},},}),}),asynchronous: false,});}? ? ? ? 3、測試代碼，自定義動態更新點位
viewer.camera.flyTo({destination: origin2,complete: () => {let primitive = new CustomPolylinePrimitive({});viewer.scene.primitives.add(primitive);let count = 0;let lon = 106;let lat = 26;let positions = [];let interval = setInterval(() => {let lonTemp = lon + count * 0.00001;let latTemp = lat + (count % 2) * 0.00001;positions.push(Cartesian3.fromDegrees(lonTemp, latTemp));primitive.updateProperty({positions: positions,complete: count === 11,});if (count > 10) {clearInterval(interval);}count++;}, 1000);},});三、實現效果
)
