Question

老师您好，3D模型就是用的官网的cbd,我本来是在3D模型上加载热力图的，结果好像是加载到了cesium上面

先看一下页面效果页面代码：

//div
<div id="cesiummap" style="width:100%;height:100%;"></div>
    <div id="heatmap" style="overflow: hidden; width: 840px;height: 400px;">
      <div class="heatmap-canvas" width="50%" height="25%" >
      </div>
    </div>



//加载方法
          var len = 300;
          var points = [];
          var max = 100;
          var width = 600;
          var height = 400;
          var latMin = 39.8;
          var latMax = 40;
          var lonMin = 116.4;
          var lonMax = 116.5;

          var dataRaw = [];
          for (var i = 0; i < len; i++) {
            var point = {
              lat: latMin + Math.random() * (latMax - latMin),
              lon: lonMin + Math.random() * (lonMax - lonMin),
              value: Math.floor(Math.random() * 100)
            };
            dataRaw.push(point);
          }
//
          for (var i = 0; i < len; i++) {
            var dataItem = dataRaw[i];
            var point = {
              x: Math.floor((dataItem.lat - latMin) / (latMax - latMin) * width),
              y: Math.floor((dataItem.lon - lonMin) / (lonMax - lonMin) * height),
              value: Math.floor(dataItem.value)
            };
            max = Math.max(max, dataItem.value);
            points.push(point);
          }

          var heatmapInstance = h337.create({
            container: document.querySelector('#heatmap')
          });

          var data = {
            max: max,
            data: points
          };
//
          heatmapInstance.setData(data);
          var viewer = new Cesium.Viewer('cesiummap');
          viewer.scene.open('https://www.supermapol.com/proxy/realspace/services/3D-CBD/rest/realspace');
          //设置相机位置、视角
          viewer.scene.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees(116.45939, 	39.915676, 5000),
            orientation : {
              heading : 5.462824916628415,
              pitch :-1.5695598976662626,
              roll : 6.2831853071570976
            }
          });



          viewer._cesiumWidget._creditContainer.style.display = "none";

          var canvas = document.getElementsByClassName('heatmap-canvas');
          console.log(canvas);
          viewer.entities.add({
            name: 'heatmap',
            rectangle: {
              coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
              material: new Cesium.ImageMaterialProperty({
                image: canvas[1],
                transparent: true
              })
            }
          });
          viewer.zoomTo(viewer.entities);
        }

Answer 1

您好，WebGL中实现热力图参考一下范例http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#Project_heatmap

Comments

老师您好，就是根据这个示例写的，可以帮我看一下我的代码哪里搞错了么

---

您把entities设置为贴对象clampToS3M：true

---

老师您好，按照您说的方法，这个热力图加载上了，还有一个问题想请教您一下，这个热力图渲染的点的半径是怎么设置的

---

渲染的点的半径是什么意思呢？如果您想改变热力图范围的大小，修改一下coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),里面的坐标值就可以了

---

就类似于平面图的热力图点的半径：例如官网示例http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/leaflet/editor.html#12_heatMap_NY中源码第30行的   var radius = 30；这个不是点渲染热力图的半径么，

在三维图里面都这种属性么

---

这个是二维热力图贴模型还是三维热力图贴模型的效果？