Cesium 小技巧

1. Icon随缩放层级放大缩小 point 示例： fadeByDistance

2. 改变地图图层的透明度

globe.translucency.frontFaceAlphaByDistance.nearValue = alpha;
  globe.translucency.frontFaceAlphaByDistance.farValue = viewModel.fadeByDistance
    ? 1.0
    : alpha;

3. 示例groundAtmosphere

4. 示例development/Geometry and Appearances 该示例显示了各种几何形状的展示

5. 示例development Polylines 演示了如何按步骤添加图元

var polylines = scene.primitives.add(new Cesium.PolylineCollection());
// 往polylines这个集合中添加
var polyline = polylines.add({
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        -120.0,
        40.0,
        -110.0,
        30.0,
      ]),
    }),
    material: Cesium.Material.fromType("Color", {
      color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
    }),
  });
  
// 连续往polylines这个集合中添加
var widePolyline = polylines.add({
    positions: Cesium.PolylinePipeline.generateCartesianArc({
      positions: Cesium.Cartesian3.fromDegreesArray([
        -105.0,
        40.0,
        -100.0,
        38.0,
        -105.0,
        35.0,
        -100.0,
        32.0,
      ]),
    }),
    material: Cesium.Material.fromType(
      Cesium.Material.PolylineOutlineType,
      {
        outlineWidth: 5.0,
      }
    ),
    width: 10.0,
  });

也可以：

// 首先定义一个GeometryInstance
var redTube = new Cesium.GeometryInstance({
        geometry: new Cesium.PolylineVolumeGeometry({
          polylinePositions: Cesium.Cartesian3.fromDegreesArray([
            124.0,
            33.0,
            124.7,
            36.0,
            125.8,
            36.0
          ]),
          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
          
          // vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
          // 注意vertexFormat需与appearance类型保持一致：
          // Cesium.PolylineMaterialAppearance或者Cesium.PerInstanceColorAppearance
          shapePositions: computeCircle(6000.0)
        }),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            Cesium.Color.YELLOW
          )
        }
      });
// 然后一次性添加到
scene.primitives.add(
        new Cesium.Primitive({
          geometryInstances: [redTube,****],
          appearance: new Cesium.PolylineMaterialAppearance({
                material: Cesium.Material.fromType("Fade", {
                  fadeInColor: Cesium.Color.RED,
                  fadeOutColor: Cesium.Color.RED.withAlpha(0),
                  maximumDistance: 0.5, // 控制fadeDirection方向的渐变
                  fadeDirection: { x: true, y: false },
                  repeat: false
                  // time: new Cesium.Cartesian2(0.5, 0.5)
                })
              })
          })
      );

6. 按属性给线段分段 generateCartesianArc Cesium.GeometryPipeline.createLineSegmentsForVectors(geometry, attributeName, length)

7. 去除Cesium Logo 方法1：

viewer.cesiumWidget.creditContainer.style.display = 'none'

方法2：

/deep/ 

8. 获取相机高度

var currentMagnitude = viewer.camera.getMagnitude();
console.log('currentMagnitude - ' + currentMagnitude);

9. cesium监听相机事件

 viewer.scene.camera.moveEnd.addEventListener(function(){
  //获取当前相机高度
  height = Math.ceil(earth.camera.positionCartographic.height);
  heading = viewer.camera.heading;
  pitch = viewer.camere.pitch;
  roll = viewer.camera.roll;
})

10. cesium.js 设置缩放最大最小限制

viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1200;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 2500;

11. 在cesium地图上添加消息框； 利用Cesium自带的SelectionIndicator widget，为相应的entity添加Entity.description数据（含dom标签），在地图上点击要素后，即可开启infobox

SelectionIndicator widget

12. 自定义的消息框 const canvasPosition = scene.cartesianToCanvasCoordinates(position, cartesian2); // 笛卡尔坐标到画布坐标

• kml数据被 地形遮挡怎么办？

// 调节以下2个参数
// 是否显示地表下面的 things or objects
viewer.scene.globe.depthTestAgainstTerrain = true;
// 地下可视化
viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;