mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-06-23 19:17:29 +00:00
createGeometryFromData
This commit is contained in:
ethan
parent
85f2111f45
commit
fd84d28a84
101
debug/index.ts
101
debug/index.ts
@ -29,6 +29,7 @@ viewer.scene.camera.setView({
|
||||
});
|
||||
|
||||
let geometry: any;
|
||||
let geometryType: string;
|
||||
const dragStartHandler = () => {
|
||||
console.error('start');
|
||||
};
|
||||
@ -50,88 +51,19 @@ const editEndHandler = (geometryPoints: any) => {
|
||||
|
||||
const buttonGroup = document.getElementById('button-group') as HTMLElement;
|
||||
buttonGroup.onclick = (evt) => {
|
||||
const targetElement = evt.target as HTMLElement;
|
||||
geometryType = targetElement.id;
|
||||
geometry = new CesiumPlot[geometryType](Cesium, viewer, {
|
||||
material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
|
||||
outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
|
||||
outlineWidth: 3,
|
||||
});
|
||||
};
|
||||
|
||||
const operationButtonGroup = document.getElementById('operation-button-group') as HTMLElement;
|
||||
operationButtonGroup.onclick = (evt) => {
|
||||
const targetElement = evt.target as HTMLElement;
|
||||
switch (targetElement.id) {
|
||||
case 'drawCircle':
|
||||
geometry = new CesiumPlot.Circle(Cesium, viewer);
|
||||
break;
|
||||
case 'drawSector':
|
||||
geometry = new CesiumPlot.Sector(Cesium, viewer);
|
||||
break;
|
||||
case 'drawPolygon':
|
||||
geometry = new CesiumPlot.Polygon(Cesium, viewer);
|
||||
break;
|
||||
case 'drawReactangle':
|
||||
geometry = new CesiumPlot.Reactangle(Cesium, viewer);
|
||||
break;
|
||||
case 'drawTriangle':
|
||||
geometry = new CesiumPlot.Triangle(Cesium, viewer);
|
||||
break;
|
||||
case 'drawFineArrow':
|
||||
geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
|
||||
material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
|
||||
outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
|
||||
outlineWidth: 3,
|
||||
});
|
||||
break;
|
||||
case 'drawAttackArrow':
|
||||
geometry = new CesiumPlot.AttackArrow(Cesium, viewer, {
|
||||
outlineMaterial: Cesium.Color.RED,
|
||||
});
|
||||
break;
|
||||
case 'drawSwallowtailAttackArrow':
|
||||
geometry = new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
|
||||
outlineMaterial: Cesium.Color.BLUE,
|
||||
});
|
||||
break;
|
||||
case 'drawSquadCombat':
|
||||
geometry = new CesiumPlot.SquadCombat(Cesium, viewer, {
|
||||
outlineMaterial: new Cesium.PolylineDashMaterialProperty({
|
||||
color: Cesium.Color.RED,
|
||||
dashLength: 16.0,
|
||||
}),
|
||||
});
|
||||
break;
|
||||
case 'drawSwallowtailSquadCombat':
|
||||
geometry = new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
|
||||
break;
|
||||
case 'drawStraightArrow':
|
||||
geometry = new CesiumPlot.StraightArrow(Cesium, viewer, {
|
||||
material: Cesium.Color.RED,
|
||||
});
|
||||
break;
|
||||
case 'drawAssaultDirection':
|
||||
geometry = new CesiumPlot.AssaultDirection(Cesium, viewer);
|
||||
break;
|
||||
case 'drawCurvedArrow':
|
||||
geometry = new CesiumPlot.CurvedArrow(Cesium, viewer, {
|
||||
material: Cesium.Color.BLUE,
|
||||
});
|
||||
break;
|
||||
case 'drawDoubleArrow':
|
||||
geometry = new CesiumPlot.DoubleArrow(Cesium, viewer, {
|
||||
outlineMaterial: Cesium.Color.GREEN,
|
||||
});
|
||||
break;
|
||||
case 'drawFreehandLine':
|
||||
geometry = new CesiumPlot.FreehandLine(Cesium, viewer);
|
||||
break;
|
||||
case 'drawCurve':
|
||||
geometry = new CesiumPlot.Curve(Cesium, viewer);
|
||||
break;
|
||||
case 'drawEllipse':
|
||||
geometry = new CesiumPlot.Ellipse(Cesium, viewer);
|
||||
break;
|
||||
case 'drawLune':
|
||||
geometry = new CesiumPlot.Lune(Cesium, viewer);
|
||||
break;
|
||||
case 'drawFreehandPolygon':
|
||||
geometry = new CesiumPlot.FreehandPolygon(Cesium, viewer, {
|
||||
material: Cesium.Color.GREEN,
|
||||
outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
|
||||
outlineWidth: 2,
|
||||
});
|
||||
break;
|
||||
case 'hide':
|
||||
geometry &&
|
||||
geometry.hide({
|
||||
@ -164,7 +96,6 @@ buttonGroup.onclick = (evt) => {
|
||||
geometry.off('editEnd', editEndHandler);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'startGrowthAnimation':
|
||||
if (geometry) {
|
||||
geometry.startGrowthAnimation();
|
||||
@ -173,15 +104,11 @@ buttonGroup.onclick = (evt) => {
|
||||
case 'createGeometryFromData':
|
||||
if (geometry) {
|
||||
const points = geometry.getPoints();
|
||||
// debugger;
|
||||
// CesiumPlot.createGeometryFromData(points);
|
||||
|
||||
CesiumPlot.createGeometryFromData(Cesium, viewer, {
|
||||
type: 'FineArrow',
|
||||
geometry = CesiumPlot.createGeometryFromData(Cesium, viewer, {
|
||||
type: geometryType,
|
||||
cartesianPoints: points,
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
case 'cancelDraw':
|
||||
if (geometry) {
|
||||
|
||||
48
index.html
48
index.html
@ -45,25 +45,35 @@
|
||||
<div id="root"></div>
|
||||
<div id="cesiumContainer"></div>
|
||||
<div class="button-container" id="button-group">
|
||||
<button id="drawPolygon">多边形</button>
|
||||
<button id="drawReactangle">矩形</button>
|
||||
<button id="drawTriangle">三角形</button>
|
||||
<button id="drawCircle">圆形</button>
|
||||
<button id="drawSector">扇形</button>
|
||||
<button id="drawStraightArrow">细直箭头</button>
|
||||
<button id="drawCurvedArrow">曲线箭头</button>
|
||||
<button id="drawFineArrow">直箭头</button>
|
||||
<button id="drawAttackArrow">进攻方向箭头</button>
|
||||
<button id="drawSwallowtailAttackArrow">进攻方向箭头(燕尾)</button>
|
||||
<button id="drawSquadCombat">分队战斗方向</button>
|
||||
<button id="drawSwallowtailSquadCombat">分队战斗方向(燕尾)</button>
|
||||
<button id="drawAssaultDirection">突击方向</button>
|
||||
<button id="drawDoubleArrow">双箭头</button>
|
||||
<button id="drawFreehandLine">自由线</button>
|
||||
<button id="drawFreehandPolygon">自由面</button>
|
||||
<button id="drawCurve">曲线</button>
|
||||
<button id="drawEllipse">椭圆</button>
|
||||
<button id="drawLune">半月面</button>
|
||||
<button id="Polygon">多边形</button>
|
||||
<button id="Reactangle">矩形</button>
|
||||
<button id="Triangle">三角形</button>
|
||||
<button id="Circle">圆形</button>
|
||||
<button id="Sector">扇形</button>
|
||||
<button id="StraightArrow">细直箭头</button>
|
||||
<button id="CurvedArrow">曲线箭头</button>
|
||||
<button id="FineArrow">直箭头</button>
|
||||
<button id="AttackArrow">进攻方向箭头</button>
|
||||
<button id="SwallowtailAttackArrow">进攻方向箭头(燕尾)</button>
|
||||
<button id="SquadCombat">分队战斗方向</button>
|
||||
<button id="SwallowtailSquadCombat">分队战斗方向(燕尾)</button>
|
||||
<button id="AssaultDirection">突击方向</button>
|
||||
<button id="DoubleArrow">双箭头</button>
|
||||
<button id="FreehandLine">自由线</button>
|
||||
<button id="FreehandPolygon">自由面</button>
|
||||
<button id="Curve">曲线</button>
|
||||
<button id="Ellipse">椭圆</button>
|
||||
<button id="Lune">半月面</button>
|
||||
<!-- <button id="hide">隐藏</button>
|
||||
<button id="show">显示</button>
|
||||
<button id="remove">删除</button>
|
||||
<button id="addEvent">绑定事件</button>
|
||||
<button id="removeEvent">解绑事件</button>
|
||||
<button id="startGrowthAnimation">生长动画</button>
|
||||
<button id="createGeometryFromData">根据数据生成图形</button>
|
||||
<button id="cancelDraw">取消绘制</button> -->
|
||||
</div>
|
||||
<div class="button-container" id="operation-button-group" style="top: 50px;">
|
||||
<button id="hide">隐藏</button>
|
||||
<button id="show">显示</button>
|
||||
<button id="remove">删除</button>
|
||||
|
||||
@ -66,6 +66,7 @@ CesiumPlot.createGeometryFromData = (cesium: any, viewer: any, opts: CreateGeome
|
||||
}
|
||||
geometry.finishDrawing();
|
||||
geometry.onClick();
|
||||
return geometry;
|
||||
};
|
||||
|
||||
export default CesiumPlot;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user