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://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>
  <link rel="stylesheet" href="http://www.bt68f.cn//Public/mouse_draw/Bigemap.draw.css" />
  <script src="http://www.bt68f.cn//Public/js/bm.draw.min.js"></script>
  <link href="http://www.bt68f.cn/Public/css/button.min.css" rel="stylesheet">
  <!-- <script src="http://www.bt68f.cn/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.bt68f.cn/public/js/tool/BMturf.min.js"></script>
  <script>
    BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
    var map = BM.map('map', 'bigemap.dc-satellite', {
        crs: BM.CRS.EPSG4326,
      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>
国产久_亚欧精品一区_久久亚洲美女_99精品在线观看_日韩成人三级_久久精品久久久久

緩沖區源代碼展示
