三维引擎cesium学习经验

三维引擎cesium学习经验：

1、初始化viewer对象

2、对entity的操作：添加，隐藏，修改，去除，居中显示

3、去除掉entity的双击事件

4、获取当前视角高度

5、获取经纬度在屏幕上的位置

6、获取三维场景屏幕中心点坐标

7、响应鼠标单击事件，获取屏幕点击坐标

8、跟踪相机视角的改变

9、让视角到达一个地点

10、加载GeoJson文件数据

 addGeoJson() {
      let res = await Cesium.GeoJsonDataSource.load("sichuan.json", {
        stroke: Cesium.Color.WHITE,
        fill: Cesium.Color.BLUE.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
        strokeWidth: 5,
      });
      this.viewer.dataSources.add(res);
 
      let entities = res.entities.values;
      let colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        let name = entity.name;
        let color = colorHash[name];
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1,
          });
          colorHash[name] = color;
        }
        entity.polygon.material = color;
        entity.polygon.outline = false;
        entity.polygon.extrudedHeight = entity.properties.childrenNum * 5000; //高度扩大5000倍，便于观察
      }
    },
  },

11、获取实体位置并转化为经纬度坐标

/**
   * 获取实体的位置 并转换成string
   * @param {\} entity 多边形 矩形 点 圆形 多段线
   * @returns
   */
  getPositionsByEnity(entity) {
    if (entity) {
      if (entity.polygon) {
        return JSON.stringify(
          this.getLngLatByCartesian3(
            entity.polygon.hierarchy.getValue().positions
          )
        );
      } else if (entity.rectangle) {
        let rectangle = entity.rectangle.coordinates.getValue();
        let result = [];
        Cesium.Rectangle.subsample(
          rectangle,
          Cesium.Ellipsoid.WGS84,
          rectangle.height,
          result
        );
        return JSON.stringify(this.getLngLatByCartesian3(result));
      } else if (entity.point) {
        return JSON.stringify(
          this.getLngLatByCartesian3(entity.position._value)
        );
      } else if (entity.ellipse) {
        let res = {
          center: this.getLngLatByCartesian3(entity.position._value),
          radius: entity.ellipse.semiMajorAxis.getValue(),
        };
 
        return JSON.stringify(res);
      } else if (entity.polyline) {
        return this.getLngLatByCartesian3(entity.polyline.positions.getValue(), 'polyline')
      }
    }
    return undefined;
  },
 
 
/**
   * 笛卡尔坐标转换经纬度坐标
   * @param {*} car3_ps
   * @returns
   */
  getLngLatByCartesian3(car3_ps, type) {
    let result = null;
    if (car3_ps instanceof Cesium.Cartesian3) {
      let _cartographic = Cesium.Cartographic.fromCartesian(car3_ps);
      let _lat = Cesium.Math.toDegrees(_cartographic.latitude);
      let _lng = Cesium.Math.toDegrees(_cartographic.longitude);
      let _alt = _cartographic.height;
      if (type == 'polyline') {
        result = { longitude: _lng, latitude: _lat, elevation: _alt }
      } else {
        result = { lng: _lng, lat: _lat, alt: _alt }
      }
      return result;
    } else if (car3_ps instanceof Array) {
      let res = [];
      for (let i = 0; i < car3_ps.length; i++) {
        let _cartographic = Cesium.Cartographic.fromCartesian(car3_ps[i]);
        let _lat = Cesium.Math.toDegrees(_cartographic.latitude);
        let _lng = Cesium.Math.toDegrees(_cartographic.longitude);
        let _alt = _cartographic.height;
        if (type == 'polyline') {
          res.push({ longitude: _lng, latitude: _lat, elevation: _alt })
        } else {
          res.push({ lng: _lng, lat: _lat, alt: _alt })
        }
      }
      return res;
    }
  },

12、获取entity的事件触发时返回视图坐标

// 获取entities实体
let entitie = viewer.entities.getById('id');
let Cartesian3 = entitie.position._value;

// 添加地形后，用scene把Cartesian3重新转换一下
let cartographic= viewer.scene.globe.ellipsoid.cartesianToCartographic(Cartesian3);
cartesian3 = Cesium.Cartesian3.fromDegrees(
    Cesium.Math.toDegrees(cartographic.longitude),
    Cesium.Math.toDegrees(cartographic.latitude),
    Math.round((viewer.scene.globe.getHeight(cartographic)) * 100) / 100
);

// 获取视图坐标
let position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3);

//获取的pick对象
let pick = viewer.scene.pick(position);

13、动态修改添加的实体entity的透明度

1 添加实体

this.shape = this.viewer.entities.add({
  name: "Redrectangle",
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(
      -110.0,
      20.0,
      -80.0,
      25.0
    ),
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});

2使用滑块组件控制透明度

<el-slider v-model="value" :format-tooltip="formatTooltip" @input="changeSlide"></el-slider>
 
export default {
  data() {
    return {
      value:50,
      rectangleAlpha:0.5, //矩形透明
      shape:null,
    };
  },
 
 methods:{
    //滑块归一化
  formatTooltip(val){
   return val/100;
  },
 //滑块改变时触发改变透明度
  changeSlide(val){
   this.rectangleAlpha = val/100
   let color = this.shape.rectangle.material.color.getValue().clone();     
   this.shape.rectangle.material.color.setValue(color.withAlpha(this.rectangleAlpha));
   }
 }
}