cesium getting started example - detection effect

Animation is realized by multiple canvas s https://www.yueyanshaosun.cn/ysCesium/views/5_geometricObj2_entityCanvas.html

Implementation steps of detection effect:

1. Create a Cylinder cone;

2. Set the map of material as dynamic attribute to realize dynamic detection, but the direction is not changed;

3. Dynamically modify the length, position and orientation of the cone to make the cone move along the vertex;

4. Remove the texture map at the bottom, and modify the source code implementation of cesium.

Step 4: consult the cesiumlab group. The cone contains the bottom surface. There is no parameter to modify. It can only move the source code. The classes involved include: Core/CylinderGeometry.js, DataSources/CylinderGraphics,js, DataSources/CylinderGeometryUpdater.js

The implementation code is as follows:

html part:

1 <div id="cesiumContainer"></div>
2 <canvas id="canvas-a" width="400px" height="400px"></canvas>
3 <canvas id="canvas-b" width="400px" height="400px"></canvas>
4 <canvas id="canvas-c" width="400px" height="400px"></canvas>

Three canvas s can also be created through js code.

js part:

  1 Cesium.Ion.defaultAccessToken = 'your token';
  2 var viewer = new Cesium.Viewer('cesiumContainer');
  3 viewer._cesiumWidget._creditContainer.style.display = "none";
  4 viewer.scene.debugShowFramesPerSecond = true;
  5 
  6 //Texture dynamic detection by alternating three canvases
  7 var changenum = 0;
  8 var curCanvas = 'a';
  9 
 10 function readyCanvas(convasid, radius) {
 11     var canvas = document.getElementById(convasid);
 12     let cwidth = 400;
 13     let cheight = 400;
 14     var ctx = canvas.getContext("2d");
 15     ctx.clearRect(0, 0, cwidth, cheight);
 16     ctx.fillStyle = 'rgba(255, 255, 255, 0)';
 17     ctx.fillRect(0, 0, cwidth, cheight);
 18 
 19     for (let ii = 0; radius <= 200; ii++) {
 20         ctx.lineWidth = 5;
 21         //Start a new drawing path
 22         ctx.beginPath();
 23         //Set the color of the arc
 24         var trans = 1.0 - (radius / 255);
 25         ctx.strokeStyle = "rgba(255, 0, 255, " + trans + ")";
 26         var circle = {
 27             x: 200, //x coordinate value of the center of the circle
 28             y: 200, //y coordinate value of the center of the circle
 29             r: radius //Radius of circle
 30         };
 31         //Take the coordinate point (200200) in canvas as the center, draw a circle with a radius of 50px
 32         ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
 33         //Draw the arc according to the specified path
 34         ctx.stroke();
 35         radius += 20;
 36     }
 37 }
 38 readyCanvas("canvas-a", 5);
 39 readyCanvas("canvas-b", 10);
 40 readyCanvas("canvas-c", 15);
 41 
 42 function drawCanvasImage(time, result) {
 43     changenum++;
 44     var canvas = document.getElementById("canvas-" + curCanvas);
 45     if (changenum >= 20) {
 46         changenum = 0;
 47         if (curCanvas === 'a')
 48             curCanvas = 'b';
 49         else if (curCanvas === 'b')
 50             curCanvas = 'c';
 51         else
 52             curCanvas = 'a';
 53     }
 54     return canvas;
 55 }
 56 //initial position 
 57 var lon = -118.760842;
 58 var lat = 38.132073;
 59 var planePosition = Cesium.Cartesian3.fromDegrees(lon, lat, 3000.0)
 60 //Change the position of the cone and circle the rectangle
 61 function changePosition() {
 62     if (lon > -118.755842 && lat < 38.138073) {
 63         lat += 0.00001;
 64     } else if (lat > 38.138073 && lon > -118.760842) {
 65         lon -= 0.00001;
 66     } else if (lon <= -118.760842 && lat > 38.132074) {
 67         lat -= 0.00001
 68     } else {
 69         lon += 0.00001;
 70     }
 71 
 72     planePosition = Cesium.Cartesian3.fromDegrees(lon, lat, 3000.0)
 73     return planePosition
 74 }
 75 //Dynamic calculation of orientation and cone length based on the position of cone center point
 76 var geoD = new Cesium.EllipsoidGeodesic();
 77 //Latitude and longitude of vertex
 78 var startPt = Cesium.Cartographic.fromDegrees(-118.760842, 38.132073, 0);
 79 
 80 function changeOrientation() {
 81     //Calculate the angle in the direction of longitude
 82     var endX = Cesium.Cartographic.fromDegrees(lon, 38.132073, 0);
 83     geoD.setEndPoints(startPt, endX);
 84     var innerS = geoD.surfaceDistance;
 85     var angleX = Math.atan(innerS / halfLen);
 86 
 87     //Calculate cone length
 88     var end = Cesium.Cartographic.fromDegrees(lon, lat, 0);
 89     geoD.setEndPoints(startPt, end);
 90     innerS = geoD.surfaceDistance;
 91     length = Math.sqrt(innerS * innerS + halfLen * halfLen);
 92 
 93     //Calculate the angle between latitudes
 94     var endY = Cesium.Cartographic.fromDegrees(-118.760842, lat, 0);
 95     geoD.setEndPoints(startPt, endY);
 96     innerS = geoD.surfaceDistance;
 97     var angleY = Math.asin(innerS / length);
 98 
 99     //Calculate orientation
100     var hpr = new Cesium.HeadingPitchRoll(0.0, angleX, angleY);
101     var orientation = Cesium.Transforms.headingPitchRollQuaternion(planePosition, hpr);
102 
103     return orientation
104 }
105 var halfLen = 1000.0
106 var length = 1000.0;
107 
108 function changeLength() {
109     return 2 * length;
110 }
111 //Create a cone solid
112 var cylinder = viewer.entities.add({
113     name: 'Red cone',
114     position: new Cesium.CallbackProperty(changePosition, false),
115     orientation: new Cesium.CallbackProperty(changeOrientation, false),
116     cylinder: {
117         length: new Cesium.CallbackProperty(changeLength, false),
118         topRadius: 0.0,
119         bottomRadius: 300.0,
120         //topSurface: false, / / add a new parameter to control whether the top renders
121         bottomSurface: false,    //Add a new parameter to control whether to render at the bottom
122         material: new Cesium.ImageMaterialProperty({
123             image: new Cesium.CallbackProperty(drawCanvasImage, false),
124             transparent: true
125         })
126     }
127 });
128 
129 //Position to cone
130 var initialPosition = Cesium.Cartesian3.fromDegrees(-118.760842, 38.089073, 8000); //Camera angle three elements: orientation (left and right offset), tilt (up and down offset), roll angle (camera cone axis rotation angle)
131 var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(1.27879878293835, -51.34390550872461, 0.0716951918898415);
132 viewer.scene.camera.setView({
133     destination: initialPosition,
134     orientation: initialOrientation,
135     endTransform: Cesium.Matrix4.IDENTITY
136 });

When creating a cone, comment lines 121 and 124 as follows:

If it is set to transparent, 124 lines are enabled, and the effect is as follows:

Note that where indicated by the arrow, the bottom of the cone is also rendered with texture. Two parameters, topSurface and bottomSurface, have been added to the source code to support turning off rendering at the bottom. The final result is as follows:

Tags: Attribute

Posted on Wed, 29 Apr 2020 07:48:55 -0700 by jasonyoung