import React from "react" ; import { CesiumMap } from "../../../lib/map" ; import { Debug } from "../../../lib/debug" ; import { Helper } from "../../../lib/helper" ; export default class Classification_2 extends React . Component { render ( ) { return ( < CesiumMap id = { this . constructor . name } onViewerLoaded = { this . handleViewerLoaded . bind ( this ) } / > ) ; } handleViewerLoaded ( viewer ) { let tileset = viewer . scene . primitives . add ( new Cesium . Cesium3DTileset ( { url : Cesium . IonResource . fromAssetId ( 17732 ) } ) ) as Cesium . Cesium3DTileset ; tileset . readyPromise . then ( ( ) => { viewer . zoomTo ( tileset ) ; this . doneClassify ( viewer ) ; this . addMouseInteractive ( viewer , tileset ) ; } ) ; } private doneClassify ( viewer ) { let pos = Cesium . Cartesian3 . fromRadians ( - 1.319405732682494 , 0.6988020232990926 , 18.5 ) ; this . addClassifyObject2 ( { viewer : viewer , position : pos , rotAngle : - 60 , dimensions : new Cesium . Cartesian3 ( 40.0 , 70.0 , 21.0 ) , onHoverColor : Cesium . Color . YELLOW } ) ; } private currentId : string ; private currentPirmitive : Cesium . ClassificationPrimitive ; private currentColor : Uint8Array ; private addMouseInteractive ( viewer , tileset ) { let handler = new Cesium . ScreenSpaceEventHandler ( ) ; handler . setInputAction ( ( event ) => { let ray = viewer . camera . getPickRay ( event . endPosition ) ; let picked = viewer . scene . pickFromRay ( ray , [ tileset ] ) ; } , Cesium . ScreenSpaceEventType . MOUSE_MOVE ) ; } private addClassifyObject ( options ) { let orientation = options . rotAngle != null ? Cesium . Transforms . headingPitchRollQuaternion ( options . position , new Cesium . HeadingPitchRoll ( options . rotAngle * Math . PI / 180 , 0 , 0 ) ) : Cesium . Transforms . headingPitchRollQuaternion ( options . position , new Cesium . HeadingPitchRoll ( ) ) ; let color = options . color || Cesium . Color . BLUE ; let obj = options . viewer . entities . add ( { position : options . position , orientation : orientation , box : { dimensions : options . dimensions , material : new Cesium . ImageMaterialProperty ( { image : "./images/riverNormal.jpg" , color : color } ) , outline : true , outlineColor : color . withAlpha ( 0.7 ) } } ) ; obj . onHover = new Cesium . Event ( ) ; obj . onEndHover = new Cesium . Event ( ) ; obj . onHover . addEventListener ( ( ) => { if ( options . onClassifitionHover != null ) { options . onClassifitionHover ( obj ) ; } obj . box . dimensions = Cesium . Cartesian3 . multiplyByScalar ( options . dimensions , 1.2 , new Cesium . Cartesian3 ( ) ) ; ( obj . box . material as Cesium . ImageMaterialProperty ) . color = options . onHoverColor ; obj . box . outlineColor = options . onHoverColor . withAlpha ( 0.7 ) ; } ) ; obj . onEndHover . addEventListener ( ( ) => { obj . box . dimensions = options . dimensions ; ( obj . box . material as Cesium . ImageMaterialProperty ) . color = color ; obj . box . outlineColor = color . withAlpha ( 0.7 ) ; } ) ; } private addClassifyObject2 ( options ) { let orientation = options . rotAngle != null ? Cesium . Transforms . headingPitchRollQuaternion ( options . position , new Cesium . HeadingPitchRoll ( options . rotAngle * Math . PI / 180 , 0 , 0 ) ) : Cesium . Transforms . headingPitchRollQuaternion ( options . position , new Cesium . HeadingPitchRoll ( ) ) ; let color = options . color || Cesium . Color . BLUE ; let mat = Cesium . Transforms . eastNorthUpToFixedFrame ( options . position ) ; let toWorldmat = Cesium . Matrix4 . multiplyByMatrix3 ( mat , Cesium . Matrix3 . fromRotationZ ( options . rotAngle != null ? options . rotAngle * Math . PI / 180 : 0 ) , new Cesium . Matrix4 ( ) ) ; var appearance = new Cesium . MaterialAppearance ( { translucent : false , renderState : { depthMask : true , blending : Cesium . BlendingState . ALPHA_BLEND , } , flat : true } ) ; appearance . material = new Cesium . Material ( { fabric : { type : 'Image' , uniforms : { image : './images/wall.png' , color : color } , } } ) ; let geometry = new Cesium . GeometryInstance ( { geometry : Cesium . BoxGeometry . fromDimensions ( { dimensions : options . dimensions , vertexFormat : Cesium . VertexFormat . POSITION_AND_ST , } ) , } ) ; let obj = options . viewer . scene . primitives . add ( new Cesium . Primitive ( { geometryInstances : geometry , appearance : appearance , modelMatrix : toWorldmat } ) ) ; } }