动画材质-源代码示例 运行 重置

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

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
           .canvas {
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
        }

        #canvas-a {
            top: 10px;
        }

        #canvas-b {
            top: 120px;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>part_test</title>
</head>
<body>

<canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
<canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
<div id='container'></div>

<script>
   bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.googlemap-satellite',requestRenderMode:false,});
    //不启用地形遮挡
    viewer.scene.globe.depthTestAgainstTerrain=false;
    //设置初始位置
    viewer.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
    });
    //取消双击事件
    viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    var rotation = bmgl.Math.toRadians(30);
    var curCanvas = 'a';
    function getRotationValue() {
        rotation += 0.005;
        return rotation;
    }

    function drawCanvas(time, result) {
        let canvas = document.getElementById("canvas-" + curCanvas);
        let context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = 'italic 40pt Calibri';
        context.fillStyle = "blue";
        context.fillText(bmgl.JulianDate.toDate(bmgl.JulianDate.now()).getTime(), 20, 100);
        curCanvas = curCanvas === 'a' ? 'b' : 'a';
        return canvas;
    }

    let i=0;
    viewer.entities.add({
        name: 'Rotating rectangle with rotating texture coordinate',
        rectangle: {
            extrudedHeight:0,
            coordinates: new bmgl.CallbackProperty(function(){
                i=i+0.01;
                return bmgl.Rectangle.fromDegrees(-90.0, 30.0+i, -70.0, 35.0+i)
            },false),
            material: new bmgl.ImageMaterialProperty({
                image: new bmgl.CallbackProperty(drawCanvas, false),
                transparent: true
            }),
            rotation: new bmgl.CallbackProperty(getRotationValue, false),
            stRotation: new bmgl.CallbackProperty(getRotationValue, false)
        }
    });
    viewer.zoomTo(viewer.entities);
</script>
</body>
</html>                                                                                                                                                                    
源码