mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
96 lines
3.6 KiB
HTML
96 lines
3.6 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
|
<script src="./turf.min.js"></script>
|
|
<script src="./measureVolume.js"></script>
|
|
<script src="./jquery-1.8.3.min.js"></script>
|
|
<style>
|
|
#menu {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
padding: 10px;
|
|
background: #72a8eafa;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
|
color: #ffffff;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
|
|
z-index: 9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
|
|
|
<div id="menu">
|
|
<p>
|
|
<button onclick="load()">绘制</button>
|
|
<button onclick="clears()">清除</button>
|
|
<button onclick="tz()">调整</button>
|
|
</p>
|
|
<p>
|
|
基准面高 <input id="txtHeight" type="text"><br>
|
|
围墙底高 <input id="txtMinHeight" type="text"> <br>
|
|
围墙顶高<input id="txtMaxHeight" type="text">(墙显示效果，与结算结果无关)
|
|
</p>
|
|
<p>
|
|
1. 挖方量: 计算“基准面”到地表之间的凸出部分进行挖掉的体积。 <br>
|
|
2. 填方量：计算“基准面”与“墙底部”之间的缺少部分进行填平的体积。
|
|
</p>
|
|
</div>
|
|
<script type="text/javascript">
|
|
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'
|
|
const viewer = new Cesium.Viewer('map', {
|
|
});
|
|
// 开启帧率
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
// 深度监测
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
|
|
// 加载默认地形
|
|
viewer.terrainProvider = Cesium.createWorldTerrain({
|
|
requestWaterMask: true, // 请求水掩膜以实现水体效果
|
|
requestVertexNormals: true // 请求法线以实现光照效果
|
|
});
|
|
|
|
viewer.camera.setView({
|
|
destination: Cesium.Cartesian3.fromDegrees(115.15, 27.15, 50000.0)
|
|
});
|
|
var measureVolume = new MeasureVolume(viewer);
|
|
|
|
function load() {
|
|
// 挖填方返回的数据
|
|
measureVolume.initMeasureVolume((data) => {
|
|
$('#txtHeight').val(data.planeHeight.toFixed(1));
|
|
$('#txtMinHeight').val(data.wallMinHeight.toFixed(1));
|
|
$('#txtMaxHeight').val(data.wallMaxHeight.toFixed(1));
|
|
});
|
|
}
|
|
|
|
function clears() {
|
|
measureVolume.clear();
|
|
}
|
|
|
|
function tz() {
|
|
measureVolume.setParameters({
|
|
planeHeight: Number($('#txtHeight').val()), //基准面高
|
|
wallMinHeight: Number($('#txtMinHeight').val()), //围墙底高
|
|
wallMaxHeight: Number($('#txtMaxHeight').val()), //围墙顶高 围墙顶高只是展示效果，与计算结果无关。
|
|
}, (data) => {
|
|
console.log(data)
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |