添加管线-源代码示例 运行 重置

                    <!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>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    button {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

<body>
<div id="container"></div>
<div id="loadingOverlay">
    <h1>Loading...</h1>
</div>
<button onclick="drawstart()"><span class="btnval">开始绘制</span></button>
</body>
<script>
    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {
        requestRenderMode: false,
        mapId: 'bigemap.amap-satellite',
        infoBox:false,
        selectionIndicator:false,
    });
    viewer.scene.globe.depthTestAgainstTerrain = false;

    function computeCircle(radius) {
        var positions = [];
        for (var i = 0; i < 360; i+=30) {
            var radians = bmgl.Math.toRadians(i);
            positions.push(
                new bmgl.Cartesian2(
                    radius * Math.cos(radians),
                    radius * Math.sin(radians)
                )
            );
        }
        return positions;
    }

    function computeStar(arms, rOuter, rInner) {
        var angle = Math.PI / arms;
        var length = 2 * arms;
        var positions = new Array(length);
        for (var i = 0; i < length; i++) {
            var r = i % 2 === 0 ? rOuter : rInner;
            positions[i] = new bmgl.Cartesian2(
                Math.cos(i * angle) * r,
                Math.sin(i * angle) * r
            );
        }
        return positions;
    }
    var redTube = viewer.entities.add({
        polylineVolume: {
            positions: bmgl.Cartesian3.fromDegreesArray([
                -85.0,
                32.0,
                -85.0,
                36.0,
                -89.0,
                36.0,
            ]),
            shape: computeCircle(60000.0),
            material: bmgl.Color.RED,
        },
    });

    var greenBox = viewer.entities.add({
        polylineVolume: {
            positions: bmgl.Cartesian3.fromDegreesArrayHeights([
                -90.0,
                32.0,
                0.0,
                -90.0,
                36.0,
                100000.0,
                -94.0,
                36.0,
                0.0,
            ]),
            shape: [
                new bmgl.Cartesian2(-50000, -50000),
                new bmgl.Cartesian2(50000, -50000),
                new bmgl.Cartesian2(50000, 50000),
                new bmgl.Cartesian2(-50000, 50000),
            ],
            cornerType: bmgl.CornerType.BEVELED,
            material: bmgl.Color.GREEN.withAlpha(0.5),
            outline: true,
            outlineColor: bmgl.Color.BLACK,
        },
    });

    var blueStar = viewer.entities.add({
        polylineVolume: {
            positions: bmgl.Cartesian3.fromDegreesArrayHeights([
                -95.0,
                32.0,
                0.0,
                -95.0,
                36.0,
                100000.0,
                -99.0,
                36.0,
                200000.0,
            ]),
            shape: computeStar(7, 70000, 50000),
            cornerType: bmgl.CornerType.MITERED,
            material: bmgl.Color.BLUE,
        },
    });
    viewer.zoomTo(viewer.entities);
    var scene = viewer.scene;
    var handler = new bmgl.ScreenSpaceEventHandler(scene.canvas);
    var ellipsoid = scene.globe.ellipsoid; //得到当前三维场景的椭球体
    let firstclick = 1;
    let nowtube
    let tmpNowtube;
    let path = [];
    let tmpP=[];
    let drawstate = false
    handler.setInputAction(function (movement) {
        cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);//movement.endPosition
        if (cartesian&&drawstate) {
            //将笛卡尔坐标转换为地理坐标
            var cartographic = bmgl.Cartographic.fromCartesian(cartesian);
            longitudeString = bmgl.Math.toDegrees(cartographic.longitude);
            latitudeString = bmgl.Math.toDegrees(cartographic.latitude);
            if (!nowtube){
                nowtube = viewer.entities.add({
                    polylineVolume: {
                        positions:new bmgl.CallbackProperty(function (){
                            return bmgl.Cartesian3.fromDegreesArray(path);
                        },false),
                        shape: computeCircle(10000),
                        material: bmgl.Color.RED,
                    },
                });
            }
            if (!tmpNowtube){
                viewer.entities.add({
                    polylineVolume: {
                        positions:new bmgl.CallbackProperty(function (){
                            return tmpP[0]? bmgl.Cartesian3.fromDegreesArray(tmpP):[];
                        },false),
                        shape: computeCircle(10000),
                        material: bmgl.Color.BLUE.withAlpha(0.7),
                    },
                });
            }
            path.push(longitudeString);
            path.push(latitudeString);
            tmpP[0]=longitudeString;
            tmpP[1]=latitudeString;
        }
    }, bmgl.ScreenSpaceEventType.LEFT_UP);

    handler.setInputAction(function (movement) {
        //通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
        cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        if (cartesian&&drawstate) {
            //将笛卡尔坐标转换为地理坐标
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            //将弧度转为度的十进制度表示
            tmpP[2] = bmgl.Math.toDegrees(cartographic.longitude);
            tmpP[3] = bmgl.Math.toDegrees(cartographic.latitude);
        }
    }, bmgl.ScreenSpaceEventType.MOUSE_MOVE);

    function drawstart() {
        if (drawstate) {
            let btn = document.querySelector('.btnval')
            btn.innerHTML = "开始绘制";
            path.length>=4&&(nowtube.polylineVolume.positions=nowtube.polylineVolume.positions.getValue());
            path.length=0;
            tmpP.length=0;
        } else {
            let btn = document.querySelector('.btnval')
            btn.innerHTML = "结束绘制";
            if (nowtube){
                nowtube.polylineVolume.positions=new bmgl.CallbackProperty(function (){
                    return bmgl.Cartesian3.fromDegreesArray(path);
                },false);
            }
        }
        drawstate = !drawstate;
    }
</script>
</html>                                                                                                                                
源码