Cesium常用操作

1、控制点击事件只点击一次

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (click) {
        // .........
        if (handler) {
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2、将世界坐标转换成经纬度坐标

changeLngLat(position) {
      const cartographic = Cesium.Cartographic.fromCartesian(position);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude);
      let height = cartographic.height;
      if (height < 0) {
        height = 0;
      }
      return {
        lng: longitude,
        lat: latitude,
        height: height,
      };
    },

3、实体位置的几种方法

(1)加载带高度的数据
这个positionArr是一个一维数组，依次是经度，纬度，高度，经度，纬度，高度…

Cesium.Cartesian3.fromDegreesArrayHeights(positionArr)

(2)根据经纬度加载数据
这个positionArr是一个一维数组，依次是经度，纬度，经度，纬度…

Cesium.Cartesian3.fromDegreesArray(positionArr)

(3)加载点的位置

new Cesium.Cartesian3.fromDegrees(经度, 纬度, 高度)

4、Entity添加标注

position: Cesium.Cartesian3.fromDegrees(item.lng, item.lat, 0),
label: {
            //文字标签
            text: item.enterpriseName,
            font: '200 15px Helvetica', // 15pt monospace
            scale: 1,
            style: Cesium.LabelStyle.FILL,
            fillColor: Cesium.Color.WHITE,
            pixelOffset: new Cesium.Cartesian2(25, -60), //偏移量
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,//让标注居中显示
            verticalOrigin: Cesium.VerticalOrigin.CENTER,//让标注居中显示
            showBackground: true,
            backgroundColor: Cesium.Color.BLACK.withAlpha(0.6), //背景顔色
          },

5、随机颜色

全部随机

Cesium.Color.fromRandom({alpha: 0.5})

在一定颜色范围内随机

Cesium.Color.fromRandom({
               red : 0.6,
               maximumGreen : 0.8,
               minimumBlue : 0.3,
               alpha : 0.5
            });

6、实体在加载地形之后被遮挡的解决办法

在实体中加上这个，可以在高度小于这个数值的时候不被深度检测干扰，可以完整显示

 disableDepthTestDistance: 150000

7、一次性读取geojson数据并加载

这种方式可以无需处理拼接feature的数组数据，直接就把每一个要素都添加上去，后面的遍历只是给要素添加显示效果，目前的效果就是有红色边界的填充色为黄色的面

Cesium.GeoJsonDataSource.load('/tempShp.json', {
        clampToGround: true,
      }).then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        let entities = dataSource.entities.values;
        for (let i = 0; i < entities.length; i++) {
          let entity = entities[i];
          let color = Cesium.Color.YELLOW;
          let color1 = Cesium.Color.RED;
          //单独设置线条样式
          entity.polygon.material = color;
          var positions = entity.polygon.hierarchy._value.positions;
          entity.polyline = {
            positions: positions,
            width: 1,
            material: color1,
            clampToGround: true,
          };
          entity.layerId = entity.properties.itemId + '**polygonItem**';
        }
      });

还有一种方式是把要素一个一个绘制出来

this.polygonArr = featuresJson;
if (this.polygonArr.length > 0) {
  this.polygonArr.forEach((item) => {
    let tempPosArr = [];
    if (item.geometry.coordinates.length !== 0) {
      item.geometry.coordinates[0].forEach((i) => {
        tempPosArr.push(i[0]);
        tempPosArr.push(i[1]);
      });
      let polygonEntity = window.companyDataCollection.entities.add({
        polygon: new Cesium.PolygonGraphics({
          hierarchy: Cesium.Cartesian3.fromDegreesArray(tempPosArr),
          material: Cesium.Color.fromRandom({ alpha: 0.9 }),
        }),
      });
      polygonEntity.layerId =
        item.properties.itemId  + '**polygonItem**';
    }
  });
}

8、获取当前的视角信息

const camera = viewer.scene.camera;
const cartographic = Cesium.Cartographic.fromCartesian(camera.position);
const x = Cesium.Math.toDegrees(cartographic.longitude);
const y = Cesium.Math.toDegrees(cartographic.latitude);
const z = cartographic.height;
// 方位角和俯仰角
let heading = Cesium.Math.toDegrees(viewer.camera.heading);
let pitch = Cesium.Math.toDegrees(viewer.camera.pitch);

9、Entity中的box遇到的问题

box这个实体可以绘制一个长宽高自己设置的六面体，可以用来绘制一个柱子，在项目中我是通过鼠标点击事件来指定这个柱子的位置，绘制了之后发现这个柱子高度好像不太对，并不是我设置的高度。找了一下原因，发现是这个柱子有一半的高度在我点击的位置的下面，那么提高这个柱子的高度基准就可以了，不过看了cesium的官方文档，好像box里面并没有这个配置项，我是通过更改这个柱子的position里面的高度来把被遮住的一半正常显示出来的，就是高度这个数值是我点击的位置的高程加上我为这个柱子设置的高度的一半

position: Cesium.Cartesian3.fromDegrees(
   codePosition.lng,
   codePosition.lat,
   codePosition.height +
      _this.optionsData.addFormData.lineHeight / 2
),
box: {
   dimensions: new Cesium.Cartesian3(
      _this.optionsData.addFormData.lineWidth,
      _this.optionsData.addFormData.lineWidth,
      _this.optionsData.addFormData.lineHeight
   ),
    fill: true,
    material: Cesium.Color.fromCssColorString(
      _this.optionsData.addFormData.lineColor
    ).withAlpha(_this.optionsData.opcityData),
    outline: false,
},

10、viewer.zoomTo()

这个zoomTo有一点像ArcMap里面的缩放到图层范围的效果
可以在括号里面写你想要跳转到的实体集合或者位置或者某一个实体
比如我想显示地图上加载的所有的实体的范围

 viewer.zoomTo(viewer.entities)