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

                    <!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 type="text/javascript" src="/bmgl/js/draw/bmgl_algorithm.js"></script>
    <script type="text/javascript" src="/bmgl/js/draw/bmgl_plotUtil.js"></script>
    <script src="/bmgl/js/draw//DrawLine.js"></script>
    <script src="/bmgl/js/draw//DrawPolygon.js"></script>
    <script src="/bmgl/js/draw//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;
        }
    </style>
    <title>part_test</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="straightArrow" href="javascript:void(0);">直线箭头</a>
    <a data-type="pinchArrow" href="javascript:void(0);">钳击箭头</a>
    <a data-type="tailedAttackArrow" href="javascript:void(0);">攻击箭头</a>
    <a data-type="diagonalArrow" href="javascript:void(0);">斜箭头</a>
    <a data-type="bezierLine" href="javascript:void(0);">绘制贝塞尔曲线</a>
    <a data-type="swallowtailArrow" href="javascript:void(0);">绘制燕尾直线</a>
    <a data-type="ruler" href="javascript:void(0);">距离</a>
    <a data-type="measure" href="javascript:void(0);">面积</a>
    <a  target="_blank" href="/bmgl/js/draw/draw.zip">文件下载</a>
</div>
<div id='container'>

</div>
<script>
    bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
    var viewer = new bmgl.Viewer('container', {
        mapId: 'bigemap.amap-satellite',
        requestRenderMode: false,
        selectionIndicator: false,
        infoBox: false
    });
    //取消默认的点击事件
    viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    viewer.scene.globe.depthTestAgainstTerrain = false;
    var pin = new bmgl.PinBuilder();
    var options = {
        //设置默认的颜色
        color: bmgl.Color.fromCssColorString('#3388ff').withAlpha(0.8),
        //单独设置线的材质
        polyline: {
            material: bmgl.Color.RED,
            width: 10,
        },
        //单独设置圆的材质
        ellipse: {
            material: bmgl.Color.PINK.withAlpha(0.7),
        }
    };
    var entity, myData;
    var draw = new BMDraw(viewer, options);
    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':
            case 'straightArrow':
            case 'pinchArrow':
            case 'bezierLine':
            case 'tailedAttackArrow':
            case 'diagonalArrow':
            case 'swallowtailArrow':
                draw.enable(dataset.type);
                break;
        }
    });

    var index = 1;
    draw.on('bm_draw_end', function (e) {
        var detail = e.detail;
        myData = detail;
        if (!detail) return;
        console.log(detail);
        switch (detail.type) {
            case 'marker':
                viewer.entities.add({
                    position: detail.path.origin,
                    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':
                break;
            case 'polygon':
                break;
            case 'straightArrow':
                draw.edit(detail.entity, {type: 'straightArrow', path: detail.path});
                break;
            case 'tailedAttackArrow':
                draw.edit(detail.entity, {type: 'tailedAttackArrow', path: detail.path});
                break;
            case 'pinchArrow':
                draw.edit(detail.entity, {type: 'pinchArrow', path: detail.path});
                break;
            case 'diagonalArrow':
                break;
            case 'circle':
                break;
            case 'rectangle':
                break;
        }
    }).on('bm_edit_end', function (e) {
        console.log(e.detail);
    });
</script>
</body>
</html>
                                                                                                                                
源码