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用于支持关闭底部的渲染，最后结果如下：