mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-06-23 19:17:29 +00:00
Merge branch 'demo-pages' of github.com:ethan-zf/cesium-plot-js
This commit is contained in:
ethan
commit
b32f9a3dc5
74
examples/index.html
Normal file
74
examples/index.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CesiumPlot</title>
|
||||
<script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
|
||||
<link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#cesiumContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button-container button {
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 10px;
|
||||
background-color: #3498db;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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="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>
|
||||
</div>
|
||||
<script src="https://unpkg.com/cesium-plot-js"></script>
|
||||
<script type="text/javascript" src="./index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
181
examples/index.js
Normal file
181
examples/index.js
Normal file
@ -0,0 +1,181 @@
|
||||
window.onload = () => {
|
||||
let raster = new Cesium.ArcGisMapServerImageryProvider({
|
||||
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
|
||||
});
|
||||
|
||||
const viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
animation: false,
|
||||
shouldAnimate: true,
|
||||
geocoder: false,
|
||||
homeButton: false,
|
||||
infoBox: false,
|
||||
fullscreenButton: false,
|
||||
sceneModePicker: false,
|
||||
selectionIndicator: false,
|
||||
timeline: false,
|
||||
navigationHelpButton: false,
|
||||
baseLayerPicker: false,
|
||||
imageryProvider: raster,
|
||||
contextOptions: {
|
||||
requestWebgl2: true,
|
||||
},
|
||||
});
|
||||
|
||||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||||
viewer.scene.camera.setView({
|
||||
destination: Cesium.Cartesian3.fromDegrees(107.857, 35.594498, 10000),
|
||||
});
|
||||
// let scene = viewer.scene;
|
||||
// viewer.scene.debugShowFramesPerSecond = true;
|
||||
|
||||
// viewer.camera.flyTo({
|
||||
// destination: new Cesium.Cartesian3(-2480561.3182985717, 4681691.324170088, 3539464.2534263907),
|
||||
// orientation: {
|
||||
// heading: 2.0002851646951996,
|
||||
// pitch: -0.25963088874216256,
|
||||
// roll: 6.283183024299778,
|
||||
// },
|
||||
// complete: function () {
|
||||
// console.error('fly complete');
|
||||
// },
|
||||
// });
|
||||
|
||||
// // let geometry = new CesiumPlot.Polygon(Cesium, viewer);
|
||||
// let geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
|
||||
// material: Cesium.Color.fromCssColorString('rgba(255, 178, 208, 0.5)'),
|
||||
// outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
|
||||
// outlineWidth: 3,
|
||||
// });
|
||||
let geometry;
|
||||
const dragStartHandler = () => {
|
||||
console.error('start');
|
||||
};
|
||||
const drawUpdateHandler = (cartesian) => {
|
||||
console.error('update', cartesian);
|
||||
};
|
||||
|
||||
const drawEndHandler = (geometryPoints) => {
|
||||
console.error('drawEnd', geometryPoints);
|
||||
};
|
||||
|
||||
const editStartHandler = () => {
|
||||
console.error('editStart');
|
||||
};
|
||||
|
||||
const editEndHandler = (geometryPoints) => {
|
||||
console.error('editEnd', geometryPoints);
|
||||
};
|
||||
const buttonGroup = document.getElementById('button-group');
|
||||
buttonGroup.onclick = (evt) => {
|
||||
const targetElement = evt.target;
|
||||
switch (targetElement.id) {
|
||||
case 'drawCircle':
|
||||
geometry = new CesiumPlot.Circle(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();
|
||||
break;
|
||||
case 'show':
|
||||
geometry && geometry.show();
|
||||
break;
|
||||
case 'remove':
|
||||
geometry && geometry.remove();
|
||||
geometry = null;
|
||||
break;
|
||||
case 'addEvent':
|
||||
if (geometry) {
|
||||
geometry.on('drawStart', dragStartHandler);
|
||||
geometry.on('drawUpdate', drawUpdateHandler);
|
||||
geometry.on('drawEnd', drawEndHandler);
|
||||
geometry.on('editStart', editStartHandler);
|
||||
geometry.on('editEnd', editEndHandler);
|
||||
}
|
||||
break;
|
||||
case 'removeEvent':
|
||||
if (geometry) {
|
||||
geometry.off('drawStart', dragStartHandler);
|
||||
geometry.off('drawUpdate', drawUpdateHandler);
|
||||
geometry.off('drawEnd', drawEndHandler);
|
||||
geometry.off('editStart', editStartHandler);
|
||||
geometry.off('editEnd', editEndHandler);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
};
|
||||
BIN
examples/plot.png
Normal file
BIN
examples/plot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
Loading…
Reference in New Issue
Block a user