wangzhe
/
screen-demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!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>
</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;
  async function fullfillregion() {
    let regiondata = await CTMapOl.getRegionGeojson('110000')
    var bbox = CTMapOl.turf.bbox(regiondata.thisregion);
    let rec = new Cesium.Rectangle(Cesium.Math.toRadians(bbox[0]), Cesium.Math.toRadians(bbox[1]), Cesium.Math.toRadians(bbox[2]), Cesium.Math.toRadians(bbox[3]))
    let lengthrect = Cesium.Cartesian3.distance(Cesium.Cartographic.toCartesian(Cesium.Rectangle.northeast(rec)), Cesium.Cartographic.toCartesian(Cesium.Rectangle.southwest(rec)))
    let postemp = viewer.scene.camera.getRectangleCameraCoordinates(rec)
    viewer.scene.camera.position = postemp
    let op1 = CTMapOl.thrdime.datasourcecontrol.GeoJsonoptions()
    op1.fill = new Cesium.Color(0 / 255, 58 / 255, 255 / 255, 1),
      op1.clampToGround = false
    let data1 = await CTMapOl.thrdime.datasourcecontrol.addDataSource(viewer, regiondata.thisregion, op1)
    let wall1entitys = data1.entities.values
    for (let i = 0; i < wall1entitys.length; i++) {
      let coods = wall1entitys[i].polygon.hierarchy._value.positions
      let minimumHeights = []
      let maximumHeights = []
      let maximumHeights2 = []
      for (let j = 0; j < coods.length; j++) {
        minimumHeights.push(0)
        maximumHeights.push(lengthrect / 50)
        maximumHeights2.push(lengthrect / 25)
      }

      viewer.entities.add(new Cesium.Entity({
        wall: {
          show: true,
          //墙折线
          positions: coods,
          //下墙体高程
          minimumHeights: minimumHeights,
          //上墙体高程
          maximumHeights: maximumHeights,
          //弧度采样
          granularity: Cesium.Math.RADIANS_PER_DEGREE,
          //填充
          fill: true,
          //材质
          material: getColorRamp([0.0, 1.0], true),
          //轮廓线
          outline: false,
          //轮廓线材质
          outlineColor: Cesium.Color.BLACK,
          //轮廓线宽
          outlineWidth: 1.0,
          //造影模式
          shadows: Cesium.ShadowMode.ENABLED,
          //距离放缩回调
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, Number.max)
        }
      }))
      viewer.entities.add(new Cesium.Entity({
        wall: {
          show: true,
          //墙折线
          positions: coods,
          //下墙体高程
          minimumHeights: maximumHeights,
          //上墙体高程
          maximumHeights: maximumHeights2,
          //弧度采样
          granularity: Cesium.Math.RADIANS_PER_DEGREE,
          //填充
          fill: true,
          //材质
          material: getColorRamp2([0.0, 1.0], true),
          //轮廓线
          outline: false,
          //轮廓线材质
          outlineColor: Cesium.Color.BLACK,
          //轮廓线宽
          outlineWidth: 1.0,
          //造影模式
          shadows: Cesium.ShadowMode.ENABLED,
          //距离放缩回调
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, Number.max)
        }
      }))
    }
    let op2 = CTMapOl.thrdime.datasourcecontrol.GeoJsonoptions()
    op2.fill = new Cesium.Color(0 / 255, (2 * 16 + 6) / 255, (7 * 16 + 0) / 255, 1),
      op2.clampToGround = false
    let data2 = await CTMapOl.thrdime.datasourcecontrol.addDataSource(viewer, regiondata.thisregion, op2)
    for (let i = 0; i < data2.entities.values.length; i++) {
      let temptar = data2.entities.values[i].polygon
      temptar.height = lengthrect / 50
    }
    let op3 = CTMapOl.thrdime.datasourcecontrol.GeoJsonoptions()
    op3.fill = new Cesium.Color(3 / 255, (1 * 16 + 11) / 255, (4 * 16 + 7) / 255, 1),
      op3.clampToGround = false
    let data3 = await CTMapOl.thrdime.datasourcecontrol.addDataSource(viewer, regiondata.childregion, op3)
    for (let i = 0; i < data3.entities.values.length; i++) {
      let temptar = data3.entities.values[i].polygon
      temptar.height = lengthrect / 25
    }

  }
  function getColorRamp(elevationRamp) {
    var ramp = document.createElement('canvas');
    ramp.width = 1;
    ramp.height = 100;
    var ctx = ramp.getContext('2d');

    var values = elevationRamp;
    var grd = ctx.createLinearGradient(0, 0, 0, 100);
    grd.addColorStop(values[0], '#002670');
    grd.addColorStop(values[1], '#0030ff');
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 1, 100);
    return ramp;
  }
  function getColorRamp2(elevationRamp) {
    var ramp = document.createElement('canvas');
    ramp.width = 1;
    ramp.height = 100;
    var ctx = ramp.getContext('2d');

    var values = elevationRamp;
    var grd = ctx.createLinearGradient(0, 0, 0, 100);
    grd.addColorStop(values[0], '#031b47');
    grd.addColorStop(values[1], '#002670');
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 1, 100);
    return ramp;
  }
  fullfillregion()

</script>

</html>