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 href="http://www.xawiki.com/Public/css/button.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .tool {
      position: absolute;
      top: 20%;
      left: 0;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <div></div>
  <button class="button  button-rounded button-primary tool " onclick="toggleV()">暫停</button>
  <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 bounds = BM.latLngBounds([
      [32, -130],
      [13, -100]
    ]);
    BM.rectangle(bounds).addTo(map);

    map.fitBounds(bounds);
    var videoUrls = [
      'http://www.xawiki.com/mapoffline/video/patricia_nasa.mp4'
    ];

    var bounds = BM.latLngBounds([
      [32, -130],
      [13, -100]
    ]);

    var videoOverlay = BM.videoOverlay(videoUrls, bounds, {
      opacity: 0.8
    }).addTo(map);

    function toggleV() {
      var dom=document.querySelector('.tool');
      if(dom.innerText=='播放'){
        dom.innerText='暫停';
        videoOverlay.getElement().play();
      }else{
        dom.innerText='播放';
        videoOverlay.getElement().pause();
      }
      
    }
  </script>
</body>

</html>