cesium/cesium-plot-js
1
0
Fork 0
mirror of https://github.com/ethan-zf/cesium-plot-js.git synced 2025-11-04 01:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upd: entity改为datasource实现

Browse Source
This commit is contained in:
muxuming1 2025-09-11 16:07:52 +08:00
parent ab3aa61521
commit 20d5741675
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/base.ts
View File

@ -36,6 +36,7 @@ export default class Base {
styleCache: GeometryStyle | undefined; styleCache: GeometryStyle | undefined;
minPointsForShape: number = 0; minPointsForShape: number = 0;
tempLineEntity: CesiumTypeOnly.Entity; tempLineEntity: CesiumTypeOnly.Entity;
dataSource: CesiumTypeOnly.CustomDataSource;
constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style?: GeometryStyle) { constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style?: GeometryStyle) {
this.cesium = cesium; this.cesium = cesium;
@ -49,7 +50,8 @@ export default class Base {
// Disable default behavior for double-clicking on entities. // Disable default behavior for double-clicking on entities.
viewer.trackedEntity = undefined; viewer.trackedEntity = undefined;
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
this.dataSource = new this.cesium.CustomDataSource("entity");
viewer.dataSources.add(this.dataSource);
this.onClick(); this.onClick();
} }
@ -134,6 +136,7 @@ export default class Base {
this.eventDispatcher.dispatchEvent('editEnd', this.getPoints()); this.eventDispatcher.dispatchEvent('editEnd', this.getPoints());
} }
} else if (this.state === 'static') { } else if (this.state === 'static') {
console.log('here')
//When drawing multiple shapes, the click events for all shapes are triggered. Only when hitting a completed shape should it enter editing mode. //When drawing multiple shapes, the click events for all shapes are triggered. Only when hitting a completed shape should it enter editing mode.
if (hitEntities && activeEntity.id === pickedObject.id.id) { if (hitEntities && activeEntity.id === pickedObject.id.id) {
const pickedGraphics = this.type === 'line' ? pickedObject.id.polyline : pickedObject.id.polygon; const pickedGraphics = this.type === 'line' ? pickedObject.id.polyline : pickedObject.id.polygon;
@ -182,7 +185,7 @@ export default class Base {
finishDrawing() { finishDrawing() {
// Some polygons draw a separate line between the first two points before drawing the complete shape; // Some polygons draw a separate line between the first two points before drawing the complete shape;
// this line should be removed after drawing is complete. // this line should be removed after drawing is complete.
this.type === 'polygon' && this.lineEntity && this.viewer.entities.remove(this.lineEntity); this.type === 'polygon' && this.lineEntity && this.dataSource.entities.remove(this.lineEntity);
this.removeMoveListener(); this.removeMoveListener();
// Editable upon initial drawing completion. // Editable upon initial drawing completion.
@ -238,7 +241,7 @@ export default class Base {
}; };
if (!this.polygonEntity) { if (!this.polygonEntity) {
const style = this.style as PolygonStyle; const style = this.style as PolygonStyle;
this.polygonEntity = this.viewer.entities.add({ this.polygonEntity = this.dataSource.entities.add({
polygon: new this.cesium.PolygonGraphics({ polygon: new this.cesium.PolygonGraphics({
hierarchy: new this.cesium.CallbackProperty(callback, false), hierarchy: new this.cesium.CallbackProperty(callback, false),
show: true, show: true,
@ -247,7 +250,7 @@ export default class Base {
}); });
// Due to limitations in PolygonGraphics outlining, a separate line style is drawn. // Due to limitations in PolygonGraphics outlining, a separate line style is drawn.
this.outlineEntity = this.viewer.entities.add({ this.outlineEntity = this.dataSource.entities.add({
polyline: { polyline: {
positions: new this.cesium.CallbackProperty(() => { positions: new this.cesium.CallbackProperty(() => {
return [...this.geometryPoints, this.geometryPoints[0]]; return [...this.geometryPoints, this.geometryPoints[0]];
@ -281,12 +284,12 @@ export default class Base {
removeTempLine() { removeTempLine() {
if (this.tempLineEntity) { if (this.tempLineEntity) {
this.viewer.entities.remove(this.tempLineEntity); this.dataSource.entities.remove(this.tempLineEntity);
} }
} }
addLineEntity(style: LineStyle) { addLineEntity(style: LineStyle) {
const entity = this.viewer.entities.add({ const entity = this.dataSource.entities.add({
polyline: { polyline: {
positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false), positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
width: style.lineWidth, width: style.lineWidth,
@ -323,7 +326,7 @@ export default class Base {
// }, // },
// }); // });
return this.viewer.entities.add({ return this.dataSource.entities.add({
position, position,
point: { point: {
pixelSize: 10, pixelSize: 10,
@ -385,7 +388,7 @@ export default class Base {
removeControlPoints() { removeControlPoints() {
if (this.controlPoints.length > 0) { if (this.controlPoints.length > 0) {
this.controlPoints.forEach((entity: CesiumTypeOnly.Entity) => { this.controlPoints.forEach((entity: CesiumTypeOnly.Entity) => {
this.viewer.entities.remove(entity); this.dataSource.entities.remove(entity);
}); });
this.controlPointsEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_DOWN); this.controlPointsEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_DOWN);
this.controlPointsEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.MOUSE_MOVE); this.controlPointsEventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.MOUSE_MOVE);
@ -574,7 +577,7 @@ export default class Base {
setTimeout(() => { setTimeout(() => {
const graphics = entity.polygon || entity.polyline || entity.billboard; const graphics = entity.polygon || entity.polyline || entity.billboard;
let startAlpha: number; let startAlpha: number;
let material = graphics.material; const material = graphics.material;
if (material) { if (material) {
if (material.image && material.color.alpha !== undefined) { if (material.image && material.color.alpha !== undefined) {
// Texture material, setting the alpha channel in the color of the custom ImageFlowMaterialProperty. // Texture material, setting the alpha channel in the color of the custom ImageFlowMaterialProperty.
@ -712,7 +715,7 @@ export default class Base {
// The face-arrow determined by three points, with the animation starting from the midpoint of the line connecting the first two points. // The face-arrow determined by three points, with the animation starting from the midpoint of the line connecting the first two points.
startPoint = this.cesium.Cartesian3.midpoint(points[0], points[1], new this.cesium.Cartesian3()); startPoint = this.cesium.Cartesian3.midpoint(points[0], points[1], new this.cesium.Cartesian3());
} }
let endPoint = points[movingPointIndex]; const endPoint = points[movingPointIndex];
// To dynamically add points between the startPoint and endPoint, consistent with the initial drawing logic, // To dynamically add points between the startPoint and endPoint, consistent with the initial drawing logic,
// update the point at index movingPointIndex in the points array with the newPosition, // update the point at index movingPointIndex in the points array with the newPosition,
// generate the arrow, and execute the animation. // generate the arrow, and execute the animation.
@ -754,12 +757,12 @@ export default class Base {
const startPointLeft = this.cesium.Cartesian3.midpoint(points[0], midPoint, new this.cesium.Cartesian3()); const startPointLeft = this.cesium.Cartesian3.midpoint(points[0], midPoint, new this.cesium.Cartesian3());
const startPointRight = this.cesium.Cartesian3.midpoint(midPoint, points[1], new this.cesium.Cartesian3()); const startPointRight = this.cesium.Cartesian3.midpoint(midPoint, points[1], new this.cesium.Cartesian3());
let endPointLeft = points[3]; const endPointLeft = points[3];
let endPointRight = points[2]; const endPointRight = points[2];
const t = elapsedTime / duration; const t = elapsedTime / duration;
const controlPoint = this.getBezierControlPointforGrowthAnimation(); const controlPoint = this.getBezierControlPointforGrowthAnimation();
let curveControlPointsLeft = [startPointLeft, controlPoint.left, endPointLeft]; const curveControlPointsLeft = [startPointLeft, controlPoint.left, endPointLeft];
let curveControlPointsRight = [startPointRight, controlPoint.right, endPointRight]; const curveControlPointsRight = [startPointRight, controlPoint.right, endPointRight];
const newPositionLeft = this.getNewPosition(curveControlPointsLeft, t); const newPositionLeft = this.getNewPosition(curveControlPointsLeft, t);
const newPositionRight = this.getNewPosition(curveControlPointsRight, t); const newPositionRight = this.getNewPosition(curveControlPointsRight, t);
@ -800,7 +803,7 @@ export default class Base {
return this.cesium.Cartesian3.fromDegrees(p[0], p[1]); return this.cesium.Cartesian3.fromDegrees(p[0], p[1]);
}); });
let newPosition = this.interpolateAlongCurve(curvePoints, t); const newPosition = this.interpolateAlongCurve(curvePoints, t);
return newPosition; return newPosition;
} }
@ -819,13 +822,13 @@ export default class Base {
remove() { remove() {
if (this.type === 'polygon') { if (this.type === 'polygon') {
this.viewer.entities.remove(this.polygonEntity); this.dataSource.entities.remove(this.polygonEntity);
this.viewer.entities.remove(this.outlineEntity); this.dataSource.entities.remove(this.outlineEntity);
this.polygonEntity = null; this.polygonEntity = null;
this.outlineEntity = null; this.outlineEntity = null;
this.lineEntity = null; this.lineEntity = null;
} else if (this.type === 'line') { } else if (this.type === 'line') {
this.viewer.entities.remove(this.lineEntity); this.dataSource.entities.remove(this.lineEntity);
} }
this.removeClickListener(); this.removeClickListener();
this.removeMoveListener(); this.removeMoveListener();