Cesium pit -- pit used by various API calls and API itself

cesium Into the pit 2 – Various API Called pit

Preface :

cesium As a 3D Rendered Map Library , Very powerful , But its official documents and API The search and processing of is really a poor experience , Used for a long time, right API Your search is ok , Start each API To carry out google Can be used , The following is the recommended treatment

One 、cesium Chinese net
at present cesium The official website is in English , have access to google With its own translation function , But this kind of translation is prone to deviation and translation of many prefix names , Recommended cesium Chinese web link : link, Specific address ：http://cesium.xin/,cesium Chinese net API link ：http://cesium.xin/cesium/cn/Documentation1.72/index.html

Two 、 Monitor camera height

const {
     camera } = this.viewer
//  Set the monitor camera height event , Here you need to modify the camera accuracy , The default is 5
//  If the accuracy is not modified, the camera will not trigger in real time 
camera.percentageChanged = 0.05
camera.changed.addEventListener(() => {
    
  const height = camera.positionCartographic.height
  this.$emit("camera-height-change", height)
})

3、 ... and 、viewer.flyto and viewer.camera.flyTo

viewer.camera.flyTo: Move the camera from the current position to the new position , Check the four usages of the official website instance 
 In general use camera.flyto More scenes , Because it has more attributes , And finish flyTo Callback event after , We need to implement a 
 Demand is flyto After that, the final perspective is 3D The positive direction of the model bus platform , At that time, priority was given to camera.flyTo, But was persuaded to retreat by the perspective 
, We will study this method later if there is a need 
// 1. Fly to a position with a top-down view, Through a specific Cartesian coordinate 
viewer.camera.flyTo({
    
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2. Fly to a Rectangle with a top-down view, Through the southeast and northwest corner 
viewer.camera.flyTo({
    
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 3. Fly to a position with an orientation using unit vectors, Through the upper and lower perspectives 
viewer.camera.flyTo({
    
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
    
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

// 4. Fly to a position with an orientation using heading, pitch and roll
 there heading,pitch,roll Of particular importance , It is the core of camera rotation and angle of view 
heading： Heading angle in radians , I think the mouse doesn't move x Rotation in axial direction 
pitch:  Pitch angle in radians , I think the mouse doesn't move y Rotation in axial direction 
roll:  Roll angle in radians , I think it's mouse scrolling z Rotation in axial direction 
 Take a look at this article , Explanation of these three attributes ：
https://blog.csdn.net/S3802608/article/details/114116558

viewer.camera.flyTo({
    

    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
    
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    }
});

viewer.flyTo: Move the camera to one or more entities or data sources provided . If the data source is still loading , Or the visualization is still loading , This method waits for the data to be ready before executing the flight
The requirement mentioned above is finally realized through this method , Because this method has its own perspectives, which are bound to entities entity above , I can modify it directly heading Property to control the direction of the entity being viewed , adopt pitch To adjust the tilt angle to complete the demand
this direction Is the direction angle of the current entity passed by the back end , subtract 180 In order to show the positive
const heading = Cesium.Math.toRadians(direction - 180);
const pitch = Cesium.Math.toRadians(-45);
const range = 0;
const hpr = new Cesium.HeadingPitchRange(heading, pitch, range);
this.viewer.flyTo(entity, { duration: 2, offset: hpr })

3、 ... and 、entity Of various 3D instances in disableDepthTestDistanced and eyeOffset attribute
disableDepthTestDistanced： Get or set the distance from the camera , Disable the depth test at this distance , for example , Prevent clipping the terrain . When set to zero , Always apply depth testing . When set to Number.POSITIVE_INFINITY when , Never apply depth testing

disableDepthTestDistanced The application scenarios of this attribute are mainly , The terrain of tilt photography or white film map will crop the entity by default , If the entity blocks the terrain , This can be done by setting disableDepthTestDistanced Property to cancel the influence of depth test within a certain height , But at that time, there was a need for an elliptical convergence circle at the top of the map 300m Floating , The terrain has a vehicle icon with a floating frame moving , I want the vehicle to be covered by the polymerization circle when moving under the suspension frame , But ellipse ellipse The example is 2d By no means disableDepthTestDistanced attribute , As a result, this effect cannot be completed , Then I found eyeOffset attribute

eyeOffset： Get or set Cartesian3 Specify the attribute of the offset of the billboard in the eye coordinates . Eye coordinates are left-handed coordinates ,x Point to the right of the viewer ,y Point up and z Point to the screen .
Eye deflection is usually used to place multiple billboards or objects in the same location , for example , Place the billboard in its corresponding 3D Above the model
This attribute also has only 3D Entities have , I think its function is within the height set by this attribute , It is displayed on the top layer by default , Because the polymerization circle is 300m, I give eyeOffset Set up 200m, So it won't block the polymerization circle , Fulfill demand