绘制军标图形-源代码示例 运行 重置

                    <!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/mouse_draw/jquery.min.js"></script>
    <script src="/bmgl/js/mouse_draw/DrawLine.js"></script>
    <script src="/bmgl/js/mouse_draw/DrawPolygon.js"></script>
    <script src="/bmgl/js/mouse_draw/bm_draw.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .bmgl-widget-credits {
            display: none
        }

        .toolbar {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .tip {
            position: absolute;
            top: 10px;
            right: 50px;
            color: red;
            font-size: 15px;
        }
    </style>
    <title>part_test</title>
</head>

<body>
    <div id='container'></div>
    <div class="toolbar">
        <button class="DiagonalArrow">斜箭头</button>
        <button class="SwallowtailArrow">绘制燕尾直线</button>
        <button class="Bezierline">绘制贝塞尔曲线</button>
        <button class="Sector">绘制扇形</button>
        <button class="Round_rectangle">圆角矩形</button>
        <button class="Double_arrow">双箭头</button><br><br>
        <button class="GatheringPlace">聚集区</button>
        <button class="BezierArrow">贝塞尔箭头</button>
        <button class="CardinalArrow">Cardinal箭头</button>
        <button class="Bow">弓形</button>
    </div>
    <div class="tip"></div>
    <div id="creditContainer" style="display: none;"></div>
    <div id="mouse_state" style="position:absolute;z-index:9999;top:1px;left:1px;background-color:white"></div>
    <script>
        bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
        var viewer = new bmgl.Viewer('container', { requestRenderMode: false,mapId: 'bigemap.arcgis-satellite', });
        //设置初始位置
        viewer.camera.setView({
            destination: bmgl.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
        });
        //开启地形遮挡
        viewer.scene.globe.depthTestAgainstTerrain = false;
        var scene = viewer.scene;
        var ellipsoid = scene.globe.ellipsoid; //得到当前三维场景的椭球体
        let handler = new bmgl.ScreenSpaceEventHandler(viewer.scene.canvas);
        //取消entity点击事件
        viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        viewer.BMWidget.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);


        //实例化BMdraw
        let bmdraw = new BMdraw2(viewer, bmgl, handler)

        //获取单个模型绘制结束
        bmdraw.on('drawdisable', function (data) {
            console.log(data);
        })
        //双击结束绘制
        bmdraw.on('draw2_over', function () {
            stoptip()
        })
        //取消默认点击事件
        function cleanclick() {
            handler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
            handler.removeInputAction(bmgl.ScreenSpaceEventHandler.LEFT_DOUBLE_CLICK)
            handler.removeInputAction(bmgl.ScreenSpaceEventType.MOUSE_MOVE);
        }
        cleanclick()
        //添加点击方法
        //贝塞尔曲线
        $('.Bezierline').click(function () {
            settip()
            bmdraw.enable('Bezierline')
        });
        //绘制燕尾箭头
        $('.SwallowtailArrow').click(function () {
            settip()
            bmdraw.enable('SwallowtailArrow')
        });
        //绘制扇形
        $('.Sector').click(function () {
            settip()
            bmdraw.enable('Sector')
        });
        //斜箭头
        $('.DiagonalArrow').click(function () {
            settip()
            bmdraw.enable('DiagonalArrow')
        });
        //圆角矩形
        $('.Round_rectangle').click(function () {
            settip()
            bmdraw.enable('Round_rectangle')
        });
        //双箭头
        $('.Double_arrow').click(function () {
            settip()
            bmdraw.enable('Double_arrow')

        });
        //画聚集区
        $('.GatheringPlace').click(function () {
            settip()
            bmdraw.enable('GatheringPlace')
        });
        //画贝塞尔箭头
        $('.BezierArrow').click(function () {
            settip()
            bmdraw.enable('BezierArrow')
        });
        //CardinalArrow箭头
        $('.CardinalArrow').click(function () {
            settip()
            bmdraw.enable('CardinalArrow')
        });
        //弓形
        $('.Bow').click(function () {
            settip()
            bmdraw.enable('Bow')
        });



        function settip() {
            $('.tip').html('点击双击,结束绘制')
        }
        function stoptip() {
            $('.tip').html('选择绘制选项,即可绘制图形')
        }
    </script>
</body>

</html>                                                                                                                                                                                                        
源码