wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!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: 100vh; width: 100vw;"></div>
  <div class="box">
    <div class="itembox">
      <div class="title">经度：</div>
      <input class="iteminput" type="number" id="lon" value="116.39492695742041">
    </div>
    <div class="itembox">
      <div class="title">纬度：</div>
      <input class="iteminput" type="number" id="lat" value="39.91">
    </div>
    <div class="itembox">
      <div class="title">海拔(m)：</div>
      <input class="iteminput" type="number" id="hb" value="200">
    </div>
    <div class="itembox">
      <div class="title">设置挂高(m)：</div>
      <input class="iteminput" type="number" id="gg" value="20">
    </div>
    <div class="itembox">
      <div class="title">水平视角(°)：</div>
      <input class="iteminput" type="number" id="spsj" value="90">
    </div>
    <div class="itembox">
      <div class="title">垂直视角(°)：</div>
      <input class="iteminput" type="number" id="czsj" value="90">
    </div>
    <div class="itembox">
      <div class="title">方向角(°)：</div>
      <input class="iteminput" type="number" id="fxj" value="3">
    </div>
    <div class="itembox">
      <div class="title">俯仰角(°)：</div>
      <input class="iteminput" type="number" id="fyj" value="-30">
    </div>
    <div class="itembox">
      <div class="title">视野距离(Km)：</div>
      <input class="iteminput" type="number" id="syjl" value="0.5">
    </div>
    <button class="btn" onclick="activeSearch()">绘制</button>
    <button class="btn" onclick="clearfunc()">清除</button>
  </div>
  </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.addterrainct(viewer)
  let CameraLocationAnalysi
  function activeSearch() {
    let form = {
      lon: Number(document.getElementById("lon").value),
      lat: Number(document.getElementById("lat").value),
      hb: Number(document.getElementById("hb").value),
      gg: Number(document.getElementById("gg").value),
      spsj: Number(document.getElementById("spsj").value),
      czsj: Number(document.getElementById("czsj").value),
      fxj: Number(document.getElementById("fxj").value),
      fyj: Number(document.getElementById("fyj").value),
      syjl: Number(document.getElementById("syjl").value),
    }
    let opt = {
      viewer: viewer,
      viewPosition: Cesium.Cartesian3.fromDegrees(form.lon, form.lat, form.hb + form.gg),
      direction: form.fxj % 360,
      pitch: form.fyj,
      horizontalViewAngle: form.spsj || 90,
      verticalViewAngle: form.czsj || 90,
      visualRange: form.syjl * 1000 || 100
    }
    CameraLocationAnalysis = new CTMapOl.cesiumComponent.ViewShed3D2(opt)
    CTMapOl.thrdime.cameracontrol.setcamera(viewer, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(form.lon,
    form.lat, 5000, 0, -90, 0))

  }
  function clearfunc() {
    CameraLocationAnalysis.clear()
  }
</script>
<style>
  .box {
    position: absolute;
    z-index: 01;
    top: 5px;
    background: #fff;
    padding: 5px;
  }

  .itembox {
    display: flex;
    margin-bottom: 7px;
  }

  .iteminput {
    width: 180px;
  }

  .title {
    width: 118px;
  }
</style>

</html>