cesium入门示例-探测效果

动画实现方式通过多个canvas实现，参考的https://www.yueyanshaosun.cn/ysCesium/views/5_geometricObj2_entityCanvas.html

探测效果实现步骤：

1、创建Cylinder圆锥体；

2、设置材质的贴图为动态属性，实现动态探测，但方向不变；

3、动态修改圆锥体长度length、位置position、朝向orientation，让圆锥体沿着顶点动起来；

4、去掉底部的纹理贴图，修改了cesium的源码实现。

第4步请教cesiumlab群，圆锥体是包含底面的，没有参数可以修改，只能动源码了，涉及的类包括：Core/CylinderGeometry.js、DataSources/CylinderGraphics,js、DataSources/CylinderGeometryUpdater.js

实现代码如下：

html部分：

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

三个canvas也可以通过js代码创建。

js部分：

 Cesium.Ion.defaultAccessToken = ‘your token';
 var viewer = new Cesium.Viewer('cesiumContainer');
 viewer._cesiumWidget._creditContainer.style.display = "none";
 viewer.scene.debugShowFramesPerSecond = true;

 //通过3个画布交替切换实现探测纹理动态
 var changenum = 0;
 var curCanvas = 'a';

 function readyCanvas(convasid, radius) {
     var canvas = document.getElementById(convasid);
     let cwidth = 400;
     let cheight = 400;
     var ctx = canvas.getContext("2d");
     ctx.clearRect(0, 0, cwidth, cheight);
     ctx.fillStyle = 'rgba(255, 255, 255, 0)';
     ctx.fillRect(0, 0, cwidth, cheight);

     for (let ii = 0; radius <= 200; ii++) {
         ctx.lineWidth = 5;
         //开始一个新的绘制路径
         ctx.beginPath();
         //设置弧线的颜色
         var trans = 1.0 - (radius / 255);
         ctx.strokeStyle = "rgba(255, 0, 255, " + trans + ")";
         var circle = {
             x: 200, //圆心的x轴坐标值
             y: 200, //圆心的y轴坐标值
             r: radius //圆的半径
         };
         //以canvas中的坐标点(200,200)为圆心，绘制一个半径为50px的圆形
         ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
         //按照指定的路径绘制弧线
         ctx.stroke();
         radius += 20;
     }
 }
 readyCanvas("canvas-a", 5);
 readyCanvas("canvas-b", 10);
 readyCanvas("canvas-c", 15);

 function drawCanvasImage(time, result) {
     changenum++;
     var canvas = document.getElementById("canvas-" + curCanvas);
     if (changenum >= 20) {
         changenum = 0;
         if (curCanvas === 'a')
             curCanvas = 'b';
         else if (curCanvas === 'b')
             curCanvas = 'c';
         else
             curCanvas = 'a';
     }
     return canvas;
 }
 //初始位置
 var lon = -118.760842;
 var lat = 38.132073;
 var planePosition = Cesium.Cartesian3.fromDegrees(lon, lat, 3000.0)
 //改变圆锥体位置，循环画矩形
 function changePosition() {
     if (lon > -118.755842 && lat < 38.138073) {
         lat += 0.00001;
     } else if (lat > 38.138073 && lon > -118.760842) {
         lon -= 0.00001;
     } else if (lon <= -118.760842 && lat > 38.132074) {
         lat -= 0.00001
     } else {
         lon += 0.00001;
     }

     planePosition = Cesium.Cartesian3.fromDegrees(lon, lat, 3000.0)
     return planePosition
 }
 //根据圆锥中心点位置动态计算朝向、圆锥体长度
 var geoD = new Cesium.EllipsoidGeodesic();
 //顶点经纬度
 var startPt = Cesium.Cartographic.fromDegrees(-118.760842, 38.132073, 0);

 function changeOrientation() {
     //计算经度方向的夹角
     var endX = Cesium.Cartographic.fromDegrees(lon, 38.132073, 0);
     geoD.setEndPoints(startPt, endX);
     var innerS = geoD.surfaceDistance;
     var angleX = Math.atan(innerS / halfLen);

     //计算圆锥体长度
     var end = Cesium.Cartographic.fromDegrees(lon, lat, 0);
     geoD.setEndPoints(startPt, end);
     innerS = geoD.surfaceDistance;
     length = Math.sqrt(innerS * innerS + halfLen * halfLen);

     //计算纬度方向的夹角
     var endY = Cesium.Cartographic.fromDegrees(-118.760842, lat, 0);
     geoD.setEndPoints(startPt, endY);
     innerS = geoD.surfaceDistance;
     var angleY = Math.asin(innerS / length);

     //计算朝向
     var hpr = new Cesium.HeadingPitchRoll(0.0, angleX, angleY);
     var orientation = Cesium.Transforms.headingPitchRollQuaternion(planePosition, hpr);

     return orientation
 }
 var halfLen = 1000.0
 var length = 1000.0;

 function changeLength() {
     return 2 * length;
 }
 //创建圆锥实体
 var cylinder = viewer.entities.add({
     name: 'Red cone',
     position: new Cesium.CallbackProperty(changePosition, false),
     orientation: new Cesium.CallbackProperty(changeOrientation, false),
     cylinder: {
         length: new Cesium.CallbackProperty(changeLength, false),
         topRadius: 0.0,
         bottomRadius: 300.0,
         //topSurface: false,    //新增参数，控制顶部是否渲染
         bottomSurface: false,    //新增参数，控制底部是否渲染
         material: new Cesium.ImageMaterialProperty({
             image: new Cesium.CallbackProperty(drawCanvasImage, false),
             transparent: true
         })
     }
 });

 //定位到圆锥体
 var initialPosition = Cesium.Cartesian3.fromDegrees(-118.760842, 38.089073, 8000); //相机视角三要素：朝向（左右偏移），倾斜（上下偏移），翻滚角度（相机视锥体中轴线旋转角度）
 var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(1.27879878293835, -51.34390550872461, 0.0716951918898415);
 viewer.scene.camera.setView({
     destination: initialPosition,
     orientation: initialOrientation,
     endTransform: Cesium.Matrix4.IDENTITY
 });

创建圆锥体时，将121、124行注释，显示效果如下：

若设置为透明的，即启用124行，效果如下：

注意箭头标示的地方，圆锥底部也被渲染纹理，修改源码增加了两个参数topSurface、bottomSurface用于支持关闭底部的渲染，最后结果如下：