探测效果-源代码示例 运行 重置

                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>探测效果</title>
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
    <div id="container"></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>

</body>
<script>
    bmgl.Config.HTTP_URL = 'http://www.bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.arcgis-satellite' });
    viewer.scene.debugShowFramesPerSecond = true;
    //必须开启 不然模型会移位
    viewer.scene.globe.depthTestAgainstTerrain = 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);

    //绘制canvas图片
    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;
    let cyheight = 1200;
    var planePosition = bmgl.Cartesian3.fromDegrees(lon, lat, cyheight)
    //改变圆锥体位置,循环画矩形
    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 = bmgl.Cartesian3.fromDegrees(lon, lat, cyheight)
        return planePosition

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

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

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

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

        //计算朝向
        var hpr = new bmgl.HeadingPitchRoll(0.0, angleX, angleY);
        var orientation = bmgl.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 bmgl.CallbackProperty(changePosition, false),
        orientation: new bmgl.CallbackProperty(changeOrientation, false),
        cylinder: {
            length: new bmgl.CallbackProperty(changeLength, false),
            topRadius: 0.0,
            bottomRadius: 300.0,
            //topSurface: false,    //新增参数,控制顶部是否渲染
            bottomSurface: false,    //新增参数,控制底部是否渲染
            material: new bmgl.ImageMaterialProperty({
                image: new bmgl.CallbackProperty(drawCanvasImage, false),
                transparent: true

            })
        }
    });

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

</html>                                                        
源码