三维引擎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), //注意：颜色必须大写，即不能为bluestrokeWidth: 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/100let color = this.shape.rectangle.material.color.getValue().clone();     this.shape.rectangle.material.color.setValue(color.withAlpha(this.rectangleAlpha));}}
}