三维引擎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 ) , 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 ; } } , } ,
11、获取实体位置并转化为经纬度坐标
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; } , 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的事件触发时返回视图坐标
let entitie = viewer. entities. getById ( 'id' ) ;
let Cartesian3 = entitie. position. _value;
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) ;
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) ) ; } }
}