BIGEMPA Js API示例中心
鼠标绘制2源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绘制</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>
    <!--
     以下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.bigemap.com/reader/download/detail201802017.html
    -->
    <!--<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>-->
    <!--引入鼠标绘制的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>
    <link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet">
   
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body,
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
  }

  .tool {
    position: absolute;
    z-index: 10;
    right: 20px;
    top: 20px;
    display: inline-block;
    width: 150px;
  }
</style>

<body>
  <div class="tool">
    <button id="start" class="button button-tiny button-rounded button-primary">绘制多边形</button>
    <button id="edit" class="button button-tiny button-rounded button-primary">编辑多边形</button>
    <button id="delete" class="button button-tiny button-rounded button-primary">删除多边形</button>
  </div>
  <div id="map">

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

    var map = BM.map('map', 'bigemap.zhongkexingtu', {
      center: [30.4, 104.5],
      zoom: 7,
      zoomControl: true,
      attributionControl: false
    });
    //创建一个图形覆盖物的集合来保存点线面
    var drawnItems = new BM.FeatureGroup();
    //添加在地图上
    map.addLayer(drawnItems);
    //设置一个变量来保存当前的绘制对象
    var draw;
    //定义状态
    var drawing = false, edit = false, deletee = false, tempLayer = null;;
    //编辑编辑完成事件
    map.on(BM.Draw.Event.EDITSTOP, function (e) {
      console.log(88, e);
    });

    //监听绘画完成事件
    map.on(BM.Draw.Event.CREATED, function (e) {
      var layer = e.layer;
      console.log(74, e.layer);
      e.layer.on('click', () => {
        if (edit) {
          if (tempLayer) {
            tempLayer.editing.disable();
          }
          tempLayer = e.layer;
          e.layer.editing.enable();
          map.once('contextmenu', () => {
            edit = false;
            tempLayer.editing.disable();
            // tempLayer = null;
          });
        } else if (deletee) {
          drawnItems.removeLayer(e.layer);
        }
      })
      drawnItems.addLayer(layer);
    });

    document.querySelector('#start').onclick = function () {
      if (!draw) {
        draw = new BM.Draw.Polygon(map, {
          showArea: false,
          allowIntersection: false,
          drawError: {
            color: '#b00b00',
            message: '不能绘制交叉的多边形!'
          },
          shapeOptions: {
            color: '#bada55'
          },
          // beforeAdd: function (latlng, e) {
          //   console.log(latlng, e, 93);
          //   return true
          // }
        });
      }
      draw.enable();
    }
    document.querySelector('#edit').onclick = function () {
      draw = false, edit = true, deletee = false;
    }
    document.querySelector('#delete').onclick = function () {
      draw = false, edit = false, deletee = true;
    }
  </script>
</body>

</html>