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, //新增參數，控制底部是否渲染 122         material: new Cesium.ImageMaterialProperty({
            image: new Cesium.CallbackProperty(drawCanvasImage, false),
 transparent: true 125         })
    }
});

//定位到圓錐體
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用於支持關閉底部的渲染，最后結果如下：