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

dynamic drawing while mouse is moving

Browse Source
This commit is contained in:
ethan 2023-08-10 10:23:56 +08:00
parent 9b1506bc7c
commit aa7b0698f0
2 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/arrow/fine-arrow.ts
View File

@ -1,19 +1,48 @@
import Draw from '../draw';
import * as Utils from '../utils';
export default class FineArrow extends Draw {
points: any = [];
constructor(cesium, viewer, style) {
super(cesium, viewer);
this.cesium = cesium;
this.setPoints = this.setPoints.bind(this);
this.onClick(this.setPoints);
// this.setPoints = this.setPoints.bind(this);
this.onClick();
}
setPoints(cartesian) {
addPoint(cartesian) {
this.points.push(cartesian);
if (this.points.length == 2) {
this.addToMap(this.points);
const geometryPoints = this.createPolygon(this.points);
this.setGeometryPoints(geometryPoints);
this.addToMap();
this.removeEventListener();
}
}
updateMovingPoint(cartesian) {
let tempPoints = [].concat(this.points);
tempPoints = tempPoints.concat([cartesian]);
const geometryPoints = this.createPolygon(tempPoints);
this.setGeometryPoints(geometryPoints);
this.addToMap();
}
createPolygon(positions) {
const p1 = this.cartesianToLnglat(positions[0]);
const p2 = this.cartesianToLnglat(positions[1]);
const len = Utils.getBaseLength([p1, p2]);
const tailWidth = len * this.tailWidthFactor;
const neckWidth = len * this.neckWidthFactor;
const headWidth = len * this.headWidthFactor;
const tailLeft = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, true);
const tailRight = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, false);
const headLeft = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, false);
const headRight = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, true);
const neckLeft = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, false);
const neckRight = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, true);
const points = [...tailLeft, ...neckLeft, ...headLeft, ...p2, ...headRight, ...neckRight, ...tailRight, ...p1];
const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
return cartesianPoints;
}
}

58
src/draw.ts
View File

@ -12,6 +12,9 @@ export default class Draw {
neckAngle: number;
eventHandler: any;
clickListener: any;
entity: any;
renderingPoints: any;
geometryPoints: any;
constructor(cesium, viewer) {
this.cesium = cesium;
@ -23,13 +26,13 @@ export default class Draw {
this.neckAngle = Math.PI / 13;
}
onClick(callback?: Function) {
onClick() {
// 添加点击事件监听器
this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas);
this.clickListener = this.eventHandler.setInputAction((evt) => {
const ray = this.viewer.camera.getPickRay(evt.position);
const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
callback && callback(cartesian);
const cartesian = this.pixelToCartesian(evt.position);
this.addPoint(cartesian);
this.onMouseMove();
}, this.cesium.ScreenSpaceEventType.LEFT_CLICK);
}
@ -37,28 +40,30 @@ export default class Draw {
this.eventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_CLICK, this.clickListener);
}
onMove() {}
onMouseMove() {
this.eventHandler.setInputAction((evt) => {
const cartesian = this.pixelToCartesian(evt.endPosition);
const lnglat = this.cartesianToLnglat(cartesian);
const lastPoint = this.cartesianToLnglat(this.points[this.points.length - 1]);
const distance = Utils.MathDistance(lnglat, lastPoint);
addToMap(positions) {
if (distance < 0.0001) {
return false;
}
this.updateMovingPoint(cartesian);
}, this.cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
setGeometryPoints(geometryPoints) {
this.geometryPoints = geometryPoints;
}
addToMap() {
const callback = () => {
const p1 = this.cartesianToLnglat(positions[0]);
const p2 = this.cartesianToLnglat(positions[1]);
const len = Utils.getBaseLength([p1, p2]);
const tailWidth = len * this.tailWidthFactor;
const neckWidth = len * this.neckWidthFactor;
const headWidth = len * this.headWidthFactor;
const tailLeft = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, true);
const tailRight = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, false);
const headLeft = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, false);
const headRight = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, true);
const neckLeft = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, false);
const neckRight = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, true);
const points = [...tailLeft, ...neckLeft, ...headLeft, ...p2, ...headRight, ...neckRight, ...tailRight, ...p1];
const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
debugger;
return new this.cesium.PolygonHierarchy(cartesianPoints);
return new this.cesium.PolygonHierarchy(this.geometryPoints);
};
return this.viewer.entities.add({
if (!this.entity) {
this.entity = this.viewer.entities.add({
polygon: new this.cesium.PolygonGraphics({
hierarchy: new this.cesium.CallbackProperty(callback, false),
show: true,
@ -67,6 +72,7 @@ export default class Draw {
}),
});
}
}
cartesianToLnglat(cartesian) {
var lnglat = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
@ -74,4 +80,10 @@ export default class Draw {
var lng = this.cesium.Math.toDegrees(lnglat.longitude);
return [lng, lat];
}
pixelToCartesian(position) {
const ray = this.viewer.camera.getPickRay(position);
const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
return cartesian;
}
}