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 href="http://www.bigemap.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://www.bigemap.com:9000';
    var map = BM.map('map', 'bigemap.zhongkexingtu', {
      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.bigemap.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>