BIGEMPA Js API示例中心
缓冲区源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <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>
  <link rel="stylesheet" href="http://www.bigemap.com//Public/mouse_draw/Bigemap.draw.css" />
  <script src="http://www.bigemap.com//Public/js/bm.draw.min.js"></script>
  <link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet">
  <!-- <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script> -->
  <style>
    * {
      margin: 0;
      
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 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>
</head>

<body>
  <div id='map'></div>
  <div class="tool">
    <button id="polyline" 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>
  <script src="http://www.bigemap.com/public/js/tool/BMturf.min.js"></script>
  <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;

    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);
      var huanchong = createBuf(layer, 1000).addTo(map);
      huanchong.setStyle({ opacity: 0.5 });
      var area=BMturf.area(huanchong.toGeoJSON());
      huanchong.bindTooltip(`面积:${area}㎡`).openTooltip()
      // $('.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()
    // })


    function createBuf(layer, radius) {
      const buffered = BMturf.buffer(layer.toGeoJSON(), radius, {
        units: 'meters'
      });
      let buf = BM.geoJSON(buffered, {
        style: function (feature) {
          return {
            color: 'red'
          };
        }
      });
      return buf
    }

    function contain(father, children) {
      father = father.toGeoJSON();
      children = children.toGeoJSON();
      return BMturf.booleanContains(father.children);
    }
  </script>
</body>

</html>