Cesium 多边形渐变色纹理（Canvas）类似 热力图

cesiumAPI查询地址cesium.xin/cesium/cn/D…

可以直接使用 ImageMaterialProperty(options)方法给Material赋值。

声明一个canvas标签，然后利用它在cesium绘制渐变色，类似于热力图

   //html=>
 <div id="cesiumContainer">
    <canvas id="myCanvas"></canvas>
  </div>
//js=>
// 绘制canvas渐变（这里用的是 径向/圆 渐变）
      var canvas = document.getElementById("myCanvas");
      if (canvas && canvas.getContext) {
        let ctx = canvas.getContext("2d");
        var grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) // 创建一个渐变色径向/圆对象
        grad.addColorStop(0, "rgba(240,250,40,1)"); // 设置渐变颜色
        grad.addColorStop(0.25, "rgba(327,201,64,1)");
        grad.addColorStop(0.5, "rgba(22,184,200,1)");
        grad.addColorStop(1, "rgba(82,67,192,1)");
        ctx.fillStyle = grad; // 设置fillStyle为当前的渐变对象
        ctx.fillRect(0, 0, 500, 500); // 绘制渐变图形
      }
​
      // 绘制多边形
      viewer.entities.add({
        polygon: {
          // 获取指定属性（positions，holes（图形内需要挖空的区域））
          hierarchy: {
            positions: Cesium.Cartesian3.fromDegreesArray([
              120.9677706, 30.7985748,
              110.20, 34.55,
              120.20, 50.55
            ]),
          },
          extrudedHeight: 0.0,
          // 这里可以直接使用canvas元素
          material: new Cesium.ImageMaterialProperty({
            image: document.getElementById('myCanvas'),
            transparent: true
          }),
          closeTop: false,
          closeBottom: false
        }
      });
​
      // 用完可以删除之前绘制的canvas
      document.getElementById('myCanvas').remove();

开启抗锯齿

// 是否支持图像渲染像素化处理
      if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
        viewer.resolutionScale = window.devicePixelRatio
      }
​
      // 开启抗锯齿
      viewer.scene.postProcessStages.fxaa.enabled = true;

cesium监听相机高度变化

  viewer.camera.changed.addEventListener(() => {
        // 当前高度
        let height = viewer.camera.positionCartographic.height;
        // 下面可以写其他的代码了
        console.log(99, height);
      });

Cesium 绘制线条/图形被地形高程遮挡的问题

图一： 图片中点1和点2之间是一条线，但是现在这条线有部分被遮挡了（图形的话也是一样的）

图二： 图片中的线是图一的完整正情况。

原因分析： depthTestAgainstTerrain 属性的设置问题。属性为true之后，相对于地形表面绘制，所以有地形的时候，会被地形的高程遮挡；如果设为false（默认值），那么将始终在顶部绘制。

// 相对于地形表面绘制
viewer.scene.globe.depthTestAgainstTerrain = true;
// 始终在顶部绘制（默认）
viewer.scene.globe.depthTestAgainstTerrain = false;