BIGEMPA Js API示例中心
鼠標繪制3源代碼展示

代碼編輯區運行下載還原
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>繪制</title>
<script src="http://www.kenshimo.com/Public/common/js/jquery.min.js"></script>
    <link href='http://www.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <script src='http://www.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <link href="http://www.kenshimo.com/Public/css/button.min.css" rel="stylesheet">
    <!--
     以下CSS地址請在安裝軟件了替換成本地的地址
     CSS地址請使用:
     http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
     JS地址請使用：
     http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
     軟件下載地址 http://www.kenshimo.com/reader/download/detail201802017.html
    -->
    <!--<link href='http://www.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />-->
    <!--<script src='http://www.kenshimo.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>-->
    <!--引入鼠標繪制的JS+CSS-->
    <!--對應下面的CSS+JS的下載地址 請直接訪問 http://bigemap.com/Public/mouse_draw/mouse_draw.zip 來下載-->
     <link rel="stylesheet" href="/Public/mouse_draw/Bigemap.draw.css"/>
    <script src="/Public/js/bm.draw.min.js"></script>
   
</head>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }

  html,
  body,
  #map {
    width: 100%;
    height: 100%;
  }

  .tool {
    position: absolute;
    z-index: 10;
    right: 2rem;
    top: 2rem;
    display: inline-block;
    width: 150px;
    font-size: 1rem;
  }

  .choose {
    position: absolute;
    bottom: 10%;
    z-index: 10;
    left: 50%;
    display: none;
  }
</style>

<body>
  <div class="tool">
    <button id="polyline" class="button  button-rounded button-primary">繪制線</button>
    <button id="polygon" class="button  button-rounded button-primary" style="padding: 0 20px;">繪制多邊形</button>
    <button id="point" class="button  button-rounded button-primary">繪制點</button>
  </div>
  <div class="choose">
    <button id="revoke" class=" button button-rounded button-primary">撤回上一步</button>
    <button id="delete" class=" button button-rounded button-primary">刪除</button>
    <button id="success" class=" button button-rounded button-primary" style="left: 30%;">完成</button>
  </div>
  <div id="map">
  </div>

  <script>
    BM.Config.HTTP_URL = 'http://www.kenshimo.com:9000';

    var temp;
    var map = BM.map('map', 'bigemap.amap-satellite', {
      center: [30, 104],
      zoom: 8,
      zoomControl: true,
      attributionControl: false
    });

    //創建一個圖形覆蓋物的集合來保存點線面
    var drawnItems = new BM.FeatureGroup();
    //添加在地圖上
    map.addLayer(drawnItems);

    //設置一個變量來保存當前的繪制對象
    var draw;
    document.querySelector('#polygon').onclick = function () {
      if (draw && draw._enabled) draw.disable();
      if (!draw || draw.type != 'polygon') {
        draw = new BM.Draw.Polygon(map, {
          showArea: false, //不顯示面積
          allowIntersection: false, //不允許交叉
          drawError: {
            color: '#b00b00',
            message: '不能繪制交叉的多邊形!'
          }, //繪制錯誤時的提示信息
          shapeOptions: {
            color: 'red',
          }, //繪制的多邊形的樣式
          repeatMode: !0, //是否可以重復繪制
          beforeAdd: function (latlng, e) {
            console.log(latlng, e, 96);
            return true//返回true表示允許添加，false表示不允許添加
          }
        });
      }
      draw.enable();
      $('.choose').show();
    }
    document.querySelector('#point').onclick = function () {
      if (draw && draw._enabled) draw.disable();
      if (!draw || draw.type != 'marker') {
        draw = new BM.Draw.Marker(map);
      }
      draw.enable();
      $('.choose').show();
    }
    document.querySelector('#polyline').onclick = function () {
      if (draw && draw._enabled) draw.disable();
      if (!draw || draw.type != 'polyline') {
        draw = new BM.Draw.Polyline(map);
      }
      draw.enable();
      $('.choose').show();
    }

    //監聽繪畫完成事件
    map.on(BM.Draw.Event.CREATED, function (e) {
      var layer = e.layer;
      temp = {
        layer: e.layer,
        type: e.layerType
      };
      drawnItems.addLayer(layer);
      $('.choose').show();
    });
    $('#delete').click(function () {
      if (draw && draw._enabled) { //正在繪制重啟繪制
        draw.disable();
        draw.enable();
      } else { //繪制完成刪除已繪制的圖形
        if (temp) temp.layer.remove();
        draw.enable();
      }
    })
    $('#success').click(function () {
      if (draw && draw._enabled) { //正在繪制手動完成
        draw._finishShape();
        draw.disable(); //繪制完成關閉繪制
      }
      $('.choose').hide();
    })
    $('#revoke').click(function () {
      if (!draw || !draw._enabled || !draw._markers.length) {
        alert('沒有在繪制哦');
        return
      }; //如果沒有繪制過，則不執行撤回操作
      draw.deleteLastVertex()
    })

    var Polyline = new BM.Polyline([
      [30.1, 104.1],
      [30.5, 104.06],
      [30.92, 104.03]
    ]);


    Polyline.on('click', function (e) {
      Polyline.editing.enable();
      console.log(Polyline, '被左鍵了,開始編輯');
      map.on('contextmenu', function () {
        Polyline.editing.disable();
        console.log(Polyline, '地圖被右鍵了,停止編輯');
      })
    });
    Polyline.on('contextmenu', function (e) {
      Polyline.editing.disable();
      console.log(Polyline, '被右鍵了,停止編輯');
    });

    Polyline.addTo(map);

    map.on(BM.Draw.Event.EDITSTOP, function (e) {
      console.log(this);
      console.log(e.layer, '編輯結束');
    });
  </script>
</body>

</html>