wangzhe
/
screen-demo


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>坡度坡向分析</title>
  <link rel="stylesheet" href="../../dist/index.css" />
  <link href="../../cesium/Source/Widgets/widgets.css" rel="stylesheet">
  <script src="../../cesium/Build/Cesium/Cesium.js"></script>
  <script src="../../dist/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map" style="height: 90vh; width: 100vw;"></div>
  <div style="height: 10vh; width: 100vw;">
    <p>最小坡度</p><input type="number" name="SlopeMin" min="0" max="90" step="0.1" value="0"
      onchange="SlopAnalysis.updateSlopeMin(this.value)" />
    <p>最大坡度</p><input type="number" name="SlopeMax" min="0" max="90" step="0.1" value="90"
      onchange="SlopAnalysis.updateSlopeMax(this.value)" />
    <p>透明度</p><input type="number" name="Opacity" min="0" max="1" step="0.1" value="0.4"
      onchange="SlopAnalysis.updateOpacity(this.value)" />
    显示坡度和坡向 <input type="radio" name="SlopeMode" checked="true" value="graphicandarrow"
      onchange="SlopAnalysis.updateSlopeMode(this.value)">
    显示坡度 <input type="radio" name="SlopeMode" value="graphic"  onchange="SlopAnalysis.updateSlopeMode(this.value)">
    显示坡向 <input type="radio" name="SlopeMode" value="arrow" onchange="SlopAnalysis.updateSlopeMode(this.value)">
    不显示 <input type="radio" name="SlopeMode" value="none" onchange="SlopAnalysis.updateSlopeMode(this.value)">
    <button type="button" onclick="SlopAnalysis.updateSlope()">更新坡度</button>
  </div>
</body>

<script>
  window.CESIUM_BASE_URL = '../../cesium/Build/CesiumUnminified';
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MjIyODA4ZS0zNmRmLTQwNGMtYjZkNC0wOGY2NDdmODgyZTUiLCJpZCI6ODMyOCwiaWF0IjoxNjA2MjkyNDE1fQ.ZhhxNIJ-TzstpcavQBNL7xRwytBat3G2__3jr7lJ8yg'
  var viewer = CTMapOl.thrdime.viewercontrol.globalviewer('map', CTMapOl.thrdime.viewercontrol.globalvieweroptions())
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  CTMapOl.thrdime.imagerylayercontrol.removeAll(viewer, true)
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('img', "img_w"))
  CTMapOl.thrdime.imagerylayercontrol.addImageryProvider(viewer, CTMapOl.thrdime.imagerylayercontrol.gettdtImagery('cia', "cia_w"))
  CTMapOl.thrdime.cameracontrol.setDEFAULT_VIEW_RECTANGLE(116.38, 39.90, 116.40, 39.92)
  CTMapOl.thrdime.cameracontrol.setcamera(viewer, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(116.39, 39.91, 5000, 0, -90, 0))
  CTMapOl.thrdime.viewercontrol.addterrain(viewer)
  let SlopAnalysis = new CTMapOl.cesiumComponent.SlopAnalysis(viewer, 0, 60, 0.4, 'graphicandarrow',()=>{
    console.log('分析结束')
  })
  SlopAnalysis.active()
</script>

</html>