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

                    <!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <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>
        <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        
                .bm-dynamic-layer{
            /*重要*/
            display: none;
            user-select: none; /*禁止选中*/
            pointer-events: none; /*鼠标穿透*/
            /*重要*/
            position: fixed;
            top:0;
            left:0;
            width: 320px;
            height:250px;
            z-index: 9999;
        }
        .bm-dynamic-layer .line{
            position: absolute;
            left:0;
            width:0;
            height:100px;
            bottom: 0;
            background:url("/bmgl//images/line.png")
        }
        .bm-dynamic-layer .main{
            display: none;
            position: absolute;
            top:0;
            left:50px;
            right:0;
            bottom: 100px;
            background:url("/bmgl/images/layer_border.png") no-repeat;
            background-size:100% 100%;
            color:white;
            padding: 20px 5px 5px 20px;
        }
        .bm-dynamic-layer .light{
            position: absolute;
            z-index: 2;
            width: 100%;
            height:100%;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>
<div id='container'></div>
<div class='bm-dynamic-layer' id='one'>
    <div class='line'></div>
    <div class='main'>
    </div>
</div>
<script>
     bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite'});
    viewer.camera.setView({
        destination:new bmgl.Cartesian3(-1327008.1205780385,5333670.378214465,3232080.6545777875),
        orientation:{
            heading:1.417883129539277,
            roll:0.00319436529033545,
            pitch:-0.4276719117769105,
        }
    });

    var handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(e) {
        var cartesian = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
        var cartographic = bmgl.Cartographic.fromCartesian(cartesian);
        var lon = bmgl.Math.toDegrees(cartographic.longitude).toFixed(5);//四舍五入 小数点后保留五位
        var lat = bmgl.Math.toDegrees(cartographic.latitude).toFixed(5);//四舍五入  小数点后保留五位
        // var height = Math.ceil(viewer.camera.positionCartographic.height);   //获取相机高度
        if (cartesian) {
            /** main */
            var data={
                lon:parseFloat(lon),
                lat:parseFloat(lat),
                element:$("#one"),
                addEntity:true,//默认为false,如果为false的话就不添加实体,后面的实体属性就不需要了
                boxHeight:200,//中间立方体的高度
                boxHeightDif:20,//中间立方体的高度增长差值,越大增长越快
                boxHeightMax:1000,//中间立方体的最大高度
                boxSide:200,//立方体的边长
                boxMaterial:bmgl.Color.DEEPSKYBLUE.withAlpha(0.5),
                circleSize:300,//大圆的大小,小圆的大小默认为一半
            };
            showDynamicLayer(viewer,data,function (){ //回调函数 改变弹窗的内容;
                $("#one").find(".main").html("经度:"+lon+"<br/>纬度:"+lat);
            });

            /** main */
        }
    },bmgl.ScreenSpaceEventType.LEFT_CLICK);

    function showDynamicLayer(viewer,data,callback){
        var element=data.element,lon=data.lon,lat=data.lat;
        var sStartFlog=false;
        setTimeout(function () {
            sStartFlog=true;
        },300);
        var s1=0.001,s2=s1,s3=s1,s4=s1;
        /* 弹窗的dom操作--默认必须*/
        element.css({opacity:0}); //使用hide()或者display是不行的 因为bmgl是用pre定时重绘的div导致 left top display 会一直重绘
        $(".bm-dynamic-layer .line").css({width:0});
        element.find(".main").hide(0);
        /* 弹窗的dom操作--针对性操作*/
        callback();

        if(data.addEntity){
            var rotation = bmgl.Math.toRadians(30);
            var rotation2 = bmgl.Math.toRadians(30);
            function getRotationValue() {
                rotation += 0.05;
                return rotation;
            }
            function getRotationValue2() {
                rotation2-= 0.03;
                return rotation2;
            }
            //构建entity
            var height=data.boxHeight,heightMax=data.boxHeightMax,heightDif=data.boxHeightDif;
            var goflog=true;
            viewer.entities.removeById('e_1');
            //添加正方体
            viewer.entities.add({
                id:'e_1',
                name: "立方体盒子",
                position: new bmgl.CallbackProperty(function () {
                    height=height+heightDif;
                    if(height>=heightMax){
                        height=heightMax;
                    }
                    return bmgl.Cartesian3.fromDegrees(lon,lat,height/2)
                },false),
                box: {
                    dimensions:  new bmgl.CallbackProperty(function () {
                        height=height+heightDif;
                        if(height>=heightMax){
                            height=heightMax;
                            if(goflog){//需要增加判断 不然它会一直执行; 导致对div的dom操作 会一直重复
                                addLayer();//添加div弹窗
                                goflog=false;
                            }
                        }
                        return  new bmgl.Cartesian3(data.boxSide,data.boxSide, height)
                    },false),
                    material:data.boxMaterial
                }
            });
            addLayer();
        }else{
            addLayer();//添加div弹窗
        }

        function addLayer() {

            //添加div

            var divPosition= bmgl.Cartesian3.fromDegrees(lon,lat,data.boxHeightMax);

            element.css({opacity:1});

            element.find(".line").animate({
                width:50//线的宽度
            },500,function () {
                element.find(".main").fadeIn(500)
            });

            creatHtmlElement(viewer,element,divPosition,[10,-(parseInt(element.css("height")))],true); //当为true的时候,表示当element在地球背面会自动隐藏。默认为false,置为false,不会这样。但至少减轻判断计算压力
        }
    }
    function creatHtmlElement(viewer,element,position,arr,flog){
        var scratch = new bmgl.Cartesian2(); //bmgl二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系;三维也如此
        var scene=viewer.scene,camera=viewer.camera;
        scene.preRender.addEventListener(function() {
            var canvasPosition =scene.cartesianToCanvasCoordinates(position, scratch);//cartesianToCanvasCoordinates 笛卡尔坐标(3维度)到画布坐标
            if (bmgl.defined(canvasPosition)) {
                element.css({
                    // top:canvasPosition.y,
                    // left:canvasPosition.x
                    left:canvasPosition.x+arr[0],
                    top:canvasPosition.y+arr[1]
                });
                /* 此处进行判断**/// var px_position = bmgl.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian);
                if(flog&&flog==true){
                    var e = position, i = camera.position, n = scene.globe.ellipsoid.cartesianToCartographic(i).height;
                    if (!(n += 1 * scene.globe.ellipsoid.maximumRadius, bmgl.Cartesian3.distance(i, e) > n)) {
                        element.show();
                    } else {
                        element.hide();
                    }
                }
                /* 此处进行判断**/
            }
        });
    }
</script>
</body>
</html>                                                                                                                                                                                                                                                                                
源码