截屏功能-源代码示例 运行 重置

                    <!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%;
        }

        .bmgl-widget-credits {
            display: none
        }

        .jietu {
            position: absolute;
            top: 30px;
            right: 100px;
        }
    </style>
    <title>part_test</title>
</head>

<body>
    <div id='container'></div>
    <button class='jietu' onclick="jietu()">截图</button>
    <script>
        bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
        var viewer = new bmgl.Viewer('container', {
            mapId: 'bigemap.amap-satellite',
        });
        viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
       
        var promise = bmgl.GeoJsonDataSource.load('/bmgl/data/china.json');
        promise.then(function (dataSource) {
            viewer.dataSources.add(dataSource);
            //Get the array of entities
            var entities = dataSource.entities.values;
            var colorHash = {};
            for (var i = 0; i < entities.length; i++) {
                //For each entity, create a random color based on the state name.
                //Some states have multiple entities, so we store the color in a
                //hash so that we use the same color for the entire state.
                var entity = entities[i];
                var name = entity.name;
                var color = colorHash[name];
                if (!color) {
                    color = bmgl.Color.fromRandom({
                        alpha: 1,
                    });
                    colorHash[name] = color;
                }
                //Set the polygon material to our random color.
                entity.polygon.material = color;
                //Remove the outlines.
                entity.polygon.outline = false;
                //Extrude the polygon based on the state's population.  Each entity
                //stores the properties for the GeoJSON feature it was created from
                //Since the population is a huge number, we divide by 50.
                entity.polygon.extrudedHeight = Math.floor(Math.random() * 600000 + 10000);
            }
            viewer.camera.flyTo({
                destination: new bmgl.Cartesian3(-5169588.03225573, 21221586.07620108, 2710992.3936333167),
                orientation: {
                    heading: 6.238457843566774,
                    roll: 6.283165232280076,
                    pitch: -1.4570713707443432
                }
            });
        }).otherwise(function (error) {
            //Display any errrors encountered while loading.
            window.alert(error);
        });

        function jietu() {
            viewer.scene.render()

            var dataUrl = viewer.scene.canvas.toDataURL("image/png");
            var url = dataUrl;
            var a = document.createElement('a');
            var event = new MouseEvent('click');
            a.download = 'map.png';
            a.href = url;
            a.dispatchEvent(event);
        }
    </script>
</body>

</html>                                                        
源码