BIGEMPA Js API示例中心

军标绘制源代码展示

代码编辑区 运行 下载 还原
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet" />
    <script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script>
</head>
<style>
    body {
        margin: 0;
        padding: 0
    }

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

    .user-tool {
        position: absolute;
        top: 10px;
        left: calc(50% - (50% - 50px))
    }

    .ol-viewport {
        position: inherit !important
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px
    }

    .btn.active.focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn:active:focus,
    .btn:focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px
    }

    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: #333;
        text-decoration: none
    }

    .btn.active,
    .btn:active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
    }

    .btn-success {
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c
    }
</style>

<body>
    <div id="map"></div>
    <div class="user-tool"><button class="btn btn-success" onclick='activate("Marker")'>测试画点</button> <button
            class="btn btn-success" onclick='activate("Polyline")'>测试画线</button> <button class="btn btn-success"
            onclick='activate("Curve")'>测试画曲线</button> <button class="btn btn-success"
            onclick='activate("Arc")'>测试画弓形</button> <button class="btn btn-success"
            onclick='activate("Circle")'>测试画圆</button> <button class="btn btn-success"
            onclick='activate("FreeLine")'>测试画自由线</button> <button class="btn btn-success"
            onclick='activate("RectAngle")'>测试画矩形</button> <button class="btn btn-success"
            onclick='activate("Ellipse")'>测试椭圆</button> <button class="btn btn-success"
            onclick='activate("Lune")'>测试弓形</button> <button class="btn btn-success"
            onclick='activate("Sector")'>测试画扇形</button> <button class="btn btn-success"
            onclick='activate("ClosedCurve")'>测试画闭合曲面</button> <button class="btn btn-success"
            onclick='activate("Polygon")'>测试多边形</button> <button class="btn btn-success"
            onclick='activate("FreePolygon")'>测试自由面</button> <button class="btn btn-success"
            onclick='activate("GatheringPlace")'>测试集结地</button> <button class="btn btn-success"
            onclick='activate("DoubleArrow")'>测试双箭头</button> <button class="btn btn-success"
            onclick='activate("StraightArrow")'>测试细直箭头</button> <button class="btn btn-success"
            onclick='activate("FineArrow")'>测试粗单尖头箭头</button> <button class="btn btn-success"
            onclick='activate("AttackArrow")'>测试进攻方向</button> <button class="btn btn-success"
            onclick='activate("AssaultDirection")'>测试粗单直箭头</button> <button class="btn btn-success"
            onclick='activate("TailedAttackArrow")'>测试进攻方向(尾)</button> <button class="btn btn-success"
            onclick='activate("SquadCombat")'>测试分队战斗行动</button> <button class="btn btn-success"
            onclick='activate("TailedSquadCombat")'>测试分队战斗行动(尾)</button> <button class="btn btn-success"
            onclick='activate("RectFlag")'>测试矩形标志旗</button> <button class="btn btn-success"
            onclick='activate("TriangleFlag")'>测试三角标志旗</button> <button class="btn btn-success"
            onclick='activate("CurveFlag")'>测试曲线标志旗</button></div>
    <script src="/Public/mouse_draw2/bm-draw2.js"></script>
</body>

</html>
<script>
        BM.Config.HTTP_URL = "http://www.bigemap.com:9000";
    var map = BM.map("map", "bigemap.arcgis-satellite", {
        center: [30.3, 104.5],
        zoom: 7,
        zoomControl: !0,
        attributionControl: !1
    });
    //直接画军标
    var a = new BM.Plot.DoubleArrow([[30, 104], [30.1, 120], [40, 130]], {
        color: "red",
        fillColor: "yellow"
    }).addTo(map);
    /**
     *
     *  repeat :是否重复绘制
     *  doubleArrow:
     *  polyline:每种军标单独配置相关颜色,大小参数
     *
     */
    var draw = new BM.Plot.Draw(map, {repeat: !0, doubleArrow: {color: "pink"}, polyline: {weight: 10}});
    //编辑工具
    var edit = new BM.Plot.Edit(map, {});

    function activate(o) {
        console.log(o);
        edit.isEdit() && edit.disable(), draw.enable(o);
    }

    edit.edit(a);
    map.on("contextmenu", (function () {
        draw.disable();
        edit.disable();
    }));

    edit.on("bm_edit_end", (function (o) {
        console.log(o.detail)
    }));
    draw.on("bm_draw_end", (function (o) {
        console.log(o.detail);
        o.detail.layer.on("click", (function () {
            draw.isDraw() && draw.disable();
            !edit.isEdit() && edit.edit(this)
        }))
    }));
</script>