鼠标绘制-源代码示例 运行 重置

                    <!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='/bmgl/js/bm_draw.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { position: absolute; top: 0; bottom: 0; width: 100%; }
        #result {
            position: absolute;
            left: 50px;
            top: 10px;
            z-index: 999;
            width: 300px;
            background-color: #eee;
            padding: 5px 10px;
        }

        #result a {
            display: inline-block;
            padding: 5px 8px;
        }
        .bmgl-widget-credits{display:none}
    </style>
    <title>Google Map Streets</title>
</head>
<body>
    <div id="result">
    <a data-type="marker" href="javascript:void(0);">标注</a>
    <a data-type="polyline" href="javascript:void(0);">线段</a>
    <a data-type="polygon" href="javascript:void(0);">多边形</a>
    <a data-type="circle" href="javascript:void(0);">圆</a>
    <a data-type="rectangle" href="javascript:void(0);">矩形</a>
    <a data-type="ruler" href="javascript:void(0);">距离</a>
    <a data-type="measure" href="javascript:void(0);">面积</a>
</div>
    <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.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
    viewer.scene.globe.depthTestAgainstTerrain = false;
    var pin = new bmgl.PinBuilder();
    var options = {
        width: 3,
        material: bmgl.Color.fromCssColorString('#3388ff').withAlpha(0.4),
    };

    var draw = new BMDraw({viewer: viewer, style: options, hasTerrain: true});
    viewer.screenSpaceEventHandler.setInputAction(function (e) {
        //添加右键退出绘制模式
        draw.disable();
    },bmgl.ScreenSpaceEventType.RIGHT_CLICK);
    document.getElementById('result').addEventListener('click', function (e) {
        var dataset = e.target.dataset;
        switch (dataset.type) {
            case 'marker':
            case 'polyline':
            case 'circle':
            case 'rectangle':
            case 'polygon':
            case 'measure':
            case 'ruler':
                draw.enable(dataset.type);
                break;
        }
    });
    var index=1;
    draw.on('bm_draw_end',function (e) {
        var detail=e.detail;
        if (!detail) return;
        switch (detail.type) {
            case 'marker':
                viewer.entities.add({
                    position:bmgl.Cartesian3.fromDegrees(detail.position[0],detail.position[1]),
                    billboard:{
                        heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
                        image:pin.fromText(index++,bmgl.Color.fromRandom({alpha:Math.random()*0.2+0.8}),40),
                    }
                });
                break;
            case 'polyline':
                viewer.entities.add({
                    polyline:{
                        width:4,
                        clampToGround:true,
                        positions:bmgl.Cartesian3.fromDegreesArray(detail.positions),
                        material:options.material,
                    }
                });
                break;
            case 'polygon':
                viewer.entities.add({
                    polygon:{
                        heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
                        hierarchy:bmgl.Cartesian3.fromDegreesArray(detail.positions),
                        material:options.material,
                    }
                });
                break;
            case 'circle':
                viewer.entities.add({
                    position:bmgl.Cartesian3.fromDegrees(detail.position[0],detail.position[1]),
                    ellipse:{
                        heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
                        semiMajorAxis:detail.radius,
                        semiMinorAxis:detail.radius,
                        material:options.material,
                    }
                });
                break;
            case 'rectangle':
                viewer.entities.add({
                    rectangle:{
                        heightReference:bmgl.HeightReference.CLAMP_TO_GROUND,
                        coordinates:bmgl.Rectangle.fromDegrees(detail.positions[0],detail.positions[1], detail.positions[2],detail.positions[3]),
                        material:options.material,
                    }
                });
                break;
        };
    }).on('bm_draw_disabled',function () {
        console.log('end');
    });
        
    </script>
</body>
</html>                                                                                                                                                                                                                                                                                                                    
源码