wangzhe
/
screen-demo


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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <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>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map" style="height: 100vh; width: 100%;">
    <div style="position: absolute; top: 0px; left: 0px;z-index: 9;">
      <button onclick="drawHeatmap()">热力图</button>
      <button onclick="clearHeatmap()">清除图层</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.viewercontrol.addterrainct(viewer)

  var CesiumHeatmap = new CTMapOl.cesiumComponent.CesiumHeatmap(viewer)
  var bounds = {
    west: 116.13833844,
    east: 116.18056899,
    south: 37.43582929,
    north: 37.47906916
  };
  var valueMin = 0
  var valueMax = 100
  CTMapOl.thrdime.cameracontrol.setDEFAULT_VIEW_RECTANGLE(bounds.west, bounds.south, bounds.east, bounds.north)
  CTMapOl.thrdime.cameracontrol.setcamera(viewer, CTMapOl.thrdime.cameracontrol.getcameraoptionswithdetile((bounds
      .west + bounds.east) / 2,
    (bounds.south + bounds.north) / 2, 10000, 0, -90, 0))

  function drawHeatmap() {
    CesiumHeatmap.create(
      bounds, {
        // radius: 40,
        blur: 0.75,
        maxOpacity: 0.85,
        minOpacity: 0.16,
        "gradient": {
          '0.7': '#546AA4',
          '0.9': '#0DB212',
          '0.95': '#D6CE3B',
          '0.96': '#CC9C1B',
          '0.998': '#DC0F2A'
        },
      }
    )
    var sourceData = getData(300)
    // 添加数据 最小值，最大值，数据集
    CesiumHeatmap.setWGS84Data(valueMin, valueMax, sourceData)

    function getData(len) {
      let points = []
      for (let i = 0; i < len; i++) {
        let point = {
          x: Math.random() * (bounds.east - bounds.west) + bounds.west,
          y: Math.random() * (bounds.north - bounds.south) + bounds.south,
          value: Math.random() * 100,
          radius: 100
        }
        points.push(point)
      }
      return points
    }
    // 镜头移动事件
    viewer.scene.camera.moveEnd.addEventListener(function () {
      var height = viewer.camera.positionCartographic.height
      sourceData.forEach(function (v) {
        v.radius = height / 50
      })
      console.log(sourceData, 'sourceData')
      CesiumHeatmap.setWGS84Data(valueMin, valueMax, sourceData)
    })
  }

  function clearHeatmap() {
    if (CesiumHeatmap) {
      CesiumHeatmap.removeLayer()

    }
  }
</script>

</html>