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></title>
        <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
        <script src="http://ua.bigemap.com:30081/bmsdk/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: 60px;
            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, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

        .btn-success {
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
        }
        .tips {
            position: absolute;
            z-index: 9;
            background-color: white;
            padding: 0px 20px;
            /* top: 200px; */
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #fcf8e3;
            display: flex;
            justify-content: center;
            align-items: center;
            /* transform: translate(-50%, -50%); */
        }
    </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>
        <div
            id="position"
            style="position: absolute; z-index: 999; bottom: 20px; right: 200px"
        ></div>
        <div class="tips">
            <a href="http://www.xawiki.com/helps/offline/plot/Draw.html" style="text-decoration: none;margin-right: 8px;" target="_blank">插件文檔地址</a>
            <a href="http://www.xawiki.com/offline_data/newjunbiao/bm-plot.zip" style="text-decoration: none;">插件下載</a>
        </div>
        <script src="http://www.xawiki.com/offline_data/newjunbiao/bm-plot.min.js"></script>
    </body>
</html>
<script>
    BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
    var m = BM.map("map", "bigemap.dc-satellite", {
        crs: BM.CRS.EPSG4326,
        center: [30.3, 104.5],
        zoom: 7,
        zoomControl: !0,
        attributionControl: !1,
    });

    var pp = BM.polygon([
            [30, 104],
            [30, 104.25],
            [30.1, 104.25],
        ]).addTo(m),
        ppp = BM.polyline([
            [30.2, 104],
            [31.2, 104.4],
        ]).addTo(m);
    var mm = BM.marker(m.getCenter()).addTo(m);

    // 初始化鼠標繪制的編輯對象 
    var draw = new BM.Plot.Draw(m, {
        // 是否允許重復配置
        repeat: !0,
        // 設置雙箭頭樣式
        doubleArrow: { color: "pink" },
        // 配置繪制線的樣式，樣式配置可參考文檔  http://www.xawiki.com/offlinemaps/api/ 查找BM.polyline
        polyline: { weight: 10 },
        // 配置繪制線的樣式，樣式配置可參考文檔  http://www.xawiki.com/offlinemaps/api/ 查找BM.polygon
        polygon: {
            fillColor: "red",
        },
    });

 
    // 初始化鼠標繪制的編輯對象 
    var edit = new BM.Plot.Edit(m, {
        control: {
            //是否允許在編輯的時候拖動繪制圖形
            dragging: false,
            // 頂點圖標
            vertex: {
                autoRemove: true,
                withIn: 10,
                icon: BM.icon({
                    iconUrl: "/offline_data/newjunbiao/plus.png",
                    iconSize: [16, 16],
                    iconAnchor: [8, 8],
                }),
            },
            // 加點的圖標
            boundsMarker: {
                icon: BM.icon({
                    iconUrl: "/offline_data/newjunbiao/dot.png",
                    iconSize: [16, 16],
                    iconAnchor: [8, 8],
                }),
            },
            // 點,線，圓等的編輯圖標
            marker: {
                icon: BM.icon({
                    iconUrl: "/offline_data/newjunbiao/dot.png",
                    iconSize: [8, 8],
                    iconAnchor: [4, 4],
                }),
            },
        },
    });

    //創建一個吸附對象
    let adsorb = new BM.Plot.AdsorbManager(m);
    //修改吸附距離
    adsorb.distance = 10;
    //向吸附對象里面添加 點，線 ，面
    adsorb.addLayer(pp);

    //給draw對象設置吸附管理對象
    draw.setAdsorbManager(adsorb);

    //給edit對象設置吸附管理對象
    edit.setAdsorbManager(adsorb);

    // console.log("edit", edit);

    function activate(e) {
        edit.isEdit() && edit.disable(), draw.enable(e);
    }

    edit.edit(pp);

    m.setView(
        {
            lat: 30.155355727105395,
            lng: 104.25064086914064,
        },
        10
    );

    // 地圖對象右鍵事件
    m.on("contextmenu", function () {
        draw.disable(), edit.disable();
    });

    // 編輯對象監聽正在編輯事件
    edit.on("bm_editing", function (e) {});
    // 編輯對象監聽正在編輯結束
    edit.on("bm_edit_end", function (e) {
        console.log(e.detail);
    });

    //繪制對象監聽正在繪制的事件
    draw.on("bm_draw_end", function (e) {
        e.detail.layer.on("click", function () {
            draw.isDraw() && draw.disable(), !edit.isEdit() && edit.edit(this);
        });
    });
</script>