动态贴图-源代码示例 运行 重置

                    <!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.camera.setView({
        destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
    });
    //取消双击事件
    viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    let curCanvas = 'a';
    let i = 0;
    function drawCanvasImage(time, result) {
        let canvas = document.getElementById("canvas-" + curCanvas);
        let cwidth = 700;
        let cheight = 100;
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.src = "/bmgl/images/arrow.png";
        ctx.clearRect(0, 0, cwidth, cheight);
        img.onload = function () {
            if (i <= cwidth) {
                ctx.drawImage(img, i, 0);
            } else
                i = 0;
            i += 3;
        }
        curCanvas = curCanvas === 'a' ? 'b' : 'a';
        return canvas;
    }

    viewer.entities.add({
        name: 'image',
        rectangle: {
            coordinates: bmgl.Rectangle.fromDegrees(-90.0, 30.0, -70.0, 35.0),
            height:100000,
            material: new bmgl.ImageMaterialProperty({
                image: new bmgl.CallbackProperty(drawCanvasImage, false),
                transparent: true
            })
        }
    });

    viewer.zoomTo(viewer.entities);
</script>
</body>
</html>                                                                                                                                                                    
源码