wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!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;
    }

    .regionSelect {
      position: absolute;
      top: 0px;
    }
  </style>
</head>

<body>
  <div id="map" style="height: 100vh; width: 100vw;"></div>
  <div class="regionSelect">
    <select name="region" id="region"></select>
  </div>
</body>

<script>
  window.CESIUM_BASE_URL = '../cesium/Build/Cesium';
  Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MjIyODA4ZS0zNmRmLTQwNGMtYjZkNC0wOGY2NDdmODgyZTUiLCJpZCI6ODMyOCwiaWF0IjoxNjA2MjkyNDE1fQ.ZhhxNIJ-TzstpcavQBNL7xRwytBat3G2__3jr7lJ8yg'
  let op = CTMapOl.thrdime.viewercontrol.globalvieweroptions()
  op.sceneMode = Cesium.SceneMode.COLUMBUS_VIEW
  var viewer = CTMapOl.thrdime.viewercontrol.globalviewer('map', op)
  viewer._cesiumWidget._creditContainer.style.display = 'none'
  CTMapOl.thrdime.imagerylayercontrol.removeAll(viewer, true)
  CTMapOl.thrdime.cameracontrol.setcamera(viewer, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile(116.39,
    39.91, 5000, 0, -90, 0))
  // 背景透明
  viewer.scene.globe.showGroundAtmosphere = false;
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
  viewer.scene.globe.translucency.enabled = true;
  viewer.scene.globe.undergroundColor = undefined;
  // 显示行政区划数据
  let SelectCodeGetRegion = new CTMapOl.cesiumComponent.SelectCodeGetRegion(viewer)
  SelectCodeGetRegion.active(100000)
  // 获取下拉行政区划
  fullfillregion(100000)
  var regionSelect = document.getElementById("region");
  // 点击下拉框切换数据
  regionSelect.addEventListener('change', function () {
    var selectedOption = regionSelect.options[regionSelect.selectedIndex];
    console.log(selectedOption.value);
    SelectCodeGetRegion.clear()
    SelectCodeGetRegion.active(selectedOption.value)
    fullfillregion(selectedOption.value)
  });
  async function fullfillregion(code) {
    var regiondata = await CTMapOl.getRegionGeojson(code)
    regionSelect.options.length = 0
    regiondata.childregion.features.forEach(item => {
      var option = document.createElement("option");
      option.value = item.properties.adcode
      option.text = item.properties.name;
      regionSelect.add(option);
    })
  }
</script>

</html>