mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-06-24 03:27:29 +00:00
add examples
This commit is contained in:
ethan
parent
fb9175fa11
commit
b08872ae42
84
examples/index.html
Normal file
84
examples/index.html
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
<!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>
|
||||||
|
/* @import url(/node_modules/cesium/Source/Widgets/widgets.css); */
|
||||||
|
|
||||||
|
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>
|
||||||
|
<button id="hide">隐藏</button>
|
||||||
|
<button id="show">显示</button>
|
||||||
|
<button id="remove">删除</button>
|
||||||
|
<button id="addEvent">绑定事件</button>
|
||||||
|
<button id="removeEvent">解绑事件</button>
|
||||||
|
</div>
|
||||||
|
<!-- <script>
|
||||||
|
window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium';
|
||||||
|
</script> -->
|
||||||
|
<script src="../dist/CesiumPlot.umd.cjs"></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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user