174 lines
		
	
	
		
			5.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			174 lines
		
	
	
		
			5.6 KiB
		
	
	
	
		
			HTML
		
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
 
 | 
						|
<head>
 | 
						|
  <meta charset="utf-8">
 | 
						|
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 | 
						|
  <meta name="viewport"
 | 
						|
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 | 
						|
  <title>填挖方分析</title>
 | 
						|
  <script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
 | 
						|
  <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 | 
						|
  <style>
 | 
						|
    html,
 | 
						|
    body,
 | 
						|
    #cesiumContainer {
 | 
						|
      width: 100%;
 | 
						|
      height: 100%;
 | 
						|
      margin: 0;
 | 
						|
      padding: 0;
 | 
						|
      overflow: hidden;
 | 
						|
      background-color: #000000;
 | 
						|
    }
 | 
						|
  </style>
 | 
						|
 
 | 
						|
</head>
 | 
						|
 
 | 
						|
<body>
 | 
						|
  <div id="cesiumContainer">
 | 
						|
  </div>
 | 
						|
  <script>
 | 
						|
    Cesium.Ion.defaultAccessToken = 'your access token';
 | 
						|
 
 | 
						|
    var terrainProvider = Cesium.createWorldTerrain({
 | 
						|
      requestWaterMask: true,
 | 
						|
      requestVertexNormals: true
 | 
						|
    });
 | 
						|
    var viewer = new Cesium.Viewer('cesiumContainer', {
 | 
						|
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
 | 
						|
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
 | 
						|
      }),
 | 
						|
      terrainProvider: terrainProvider
 | 
						|
    });
 | 
						|
 
 | 
						|
    viewer.scene.globe.depthTestAgainstTerrain = true;
 | 
						|
 
 | 
						|
    var excavateHeight = 2300; // 开挖高度
 | 
						|
    var buryHeight = 6000; // 填埋高度
 | 
						|
 
 | 
						|
    var scope = [
 | 
						|
      Cesium.Cartesian3.fromDegrees(99, 29),
 | 
						|
      Cesium.Cartesian3.fromDegrees(100, 29),
 | 
						|
      Cesium.Cartesian3.fromDegrees(100, 30),
 | 
						|
      Cesium.Cartesian3.fromDegrees(99, 30)
 | 
						|
    ];
 | 
						|
 
 | 
						|
    // 显示施工区域
 | 
						|
    var entity = viewer.entities.add({
 | 
						|
      polygon: {
 | 
						|
        hierarchy: scope,
 | 
						|
        height: buryHeight,
 | 
						|
        extrudedHeight: excavateHeight,
 | 
						|
        material: Cesium.Color.RED.withAlpha(0.5),
 | 
						|
        outline: true,
 | 
						|
        closeTop: false
 | 
						|
      }
 | 
						|
    });
 | 
						|
 
 | 
						|
    viewer.trackedEntity = entity;
 | 
						|
 
 | 
						|
    function calc() {
 | 
						|
 
 | 
						|
      //===============================计算 开挖/填埋 的 开挖量/填方量 的 核心思想就是 剖分 微积分==========================//
 | 
						|
 
 | 
						|
      // 设置剖分最小单元 0.01°
 | 
						|
      var subdivisionCell = 0.01;
 | 
						|
 
 | 
						|
      // 所有的剖分矩形
 | 
						|
      var subRectangles = [];
 | 
						|
 
 | 
						|
      for (var i = 99; i <= 100; i = i + subdivisionCell) {
 | 
						|
        for (var j = 29; j <= 30; j = j + subdivisionCell) {
 | 
						|
          var subRectangle = new Cesium.Rectangle(
 | 
						|
            Cesium.Math.toRadians(i),
 | 
						|
            Cesium.Math.toRadians(j),
 | 
						|
            Cesium.Math.toRadians(i + subdivisionCell),
 | 
						|
            Cesium.Math.toRadians(j + subdivisionCell)
 | 
						|
          );
 | 
						|
          subRectangles.push(subRectangle);
 | 
						|
 
 | 
						|
          // 可视化部分
 | 
						|
          // viewer.entities.add({
 | 
						|
          //   rectangle: {
 | 
						|
          //     coordinates: subRectangle,
 | 
						|
          //     material: Cesium.Color.fromRandom().withAlpha(0.5),
 | 
						|
          //     height: 6000,
 | 
						|
          //     extrudedHeight: 2300,
 | 
						|
          //   }
 | 
						|
          // });
 | 
						|
        }
 | 
						|
      }
 | 
						|
 
 | 
						|
      // 计算每个矩形的中心点作为这个矩形的代表
 | 
						|
 
 | 
						|
      var subRectanglesCenterPoints = [];
 | 
						|
      subRectangles.forEach(subRectangle => {
 | 
						|
 
 | 
						|
        var centerPoint = Cesium.Cartographic.fromRadians((subRectangle.west + subRectangle.east) / 2, (subRectangle
 | 
						|
          .north +
 | 
						|
          subRectangle.south) / 2);
 | 
						|
 
 | 
						|
        subRectanglesCenterPoints.push(centerPoint);
 | 
						|
 
 | 
						|
        // 可视化部分
 | 
						|
        // var position = centerPoint.clone();
 | 
						|
        // position.height = buryHeight;
 | 
						|
 
 | 
						|
        // var position1 = centerPoint.clone();
 | 
						|
        // position1.height = excavateHeight;
 | 
						|
 
 | 
						|
        // viewer.entities.add({
 | 
						|
        //   polyline: {
 | 
						|
        //     positions: [Cesium.Cartographic.toCartesian(position), Cesium.Cartographic.toCartesian(position1)],
 | 
						|
        //     material: Cesium.Color.fromRandom().withAlpha(0.5),
 | 
						|
        //     width: 5
 | 
						|
        //   }
 | 
						|
        // });
 | 
						|
      });
 | 
						|
 
 | 
						|
      // 计算每个中心点到达地表的高度
 | 
						|
      // var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, subRectanglesCenterPoints);
 | 
						|
      var promise = Cesium.sampleTerrain(terrainProvider, 7, subRectanglesCenterPoints);
 | 
						|
      Cesium.when(promise, function (updatedPositions) {
 | 
						|
 
 | 
						|
        // 所有高度
 | 
						|
        var heights = [];
 | 
						|
        updatedPositions.forEach(point => {
 | 
						|
          heights.push(point.height);
 | 
						|
        });
 | 
						|
 
 | 
						|
 
 | 
						|
        // 开始计算土方
 | 
						|
        var excavateVolumes = 0; // 挖方
 | 
						|
        var buryVolumes = 0; // 填埋
 | 
						|
 
 | 
						|
        // 1.计算每个矩形的长、宽
 | 
						|
        for (var i = 0; i < subRectangles.length; i++) {
 | 
						|
          var subRectangle = subRectangles[i];
 | 
						|
          var leftBottom = Cesium.Cartesian3.fromRadians(subRectangle.west, subRectangle.south);
 | 
						|
          var leftTop = Cesium.Cartesian3.fromRadians(subRectangle.west, subRectangle.north);
 | 
						|
          var rightBottom = Cesium.Cartesian3.fromRadians(subRectangle.east, subRectangle.south);
 | 
						|
          var height = Cesium.Cartesian3.distance(leftBottom, leftTop); // 宽
 | 
						|
          var width = Cesium.Cartesian3.distance(leftBottom, rightBottom); // 长
 | 
						|
 
 | 
						|
          // 挖方
 | 
						|
          if (heights[i] > excavateHeight) { // 如果地形高度大于开挖高度才需要开挖
 | 
						|
            var excavateVolume = width * height * (heights[i] - excavateHeight);
 | 
						|
            excavateVolumes += excavateVolume;
 | 
						|
          }
 | 
						|
 
 | 
						|
          // 填埋
 | 
						|
          if (heights[i] < buryHeight) { // 如果地形高度小于填埋高度才需要填埋
 | 
						|
            var buryVolume = width * height * (buryHeight - heights[i]);
 | 
						|
            buryVolumes += buryVolume;
 | 
						|
          }
 | 
						|
        }
 | 
						|
 
 | 
						|
        console.log("挖方:" + excavateVolumes + "立方米(m³)");
 | 
						|
        console.log("填埋:" + buryVolumes + "立方米(m³)");
 | 
						|
      });
 | 
						|
    }
 | 
						|
  </script>
 | 
						|
</body>
 | 
						|
 
 | 
						|
</html> |