<template>
 <div>
   <div class="map" ref="map"></div>

 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'
L.esri = Esri
// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  name: 'Map',
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化Map
    initMap() {
      var map = L.map(this.$refs.map).setView([24.48, 118.108], 13);
      L.esri.basemapLayer("Streets").addTo(map)

      // 添加图片
      // var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      //     // 图片显示位置
      //     imageBounds = [[24.412216, 118.22655], [24.573941, 118.12544]]
      // // imageOverlay
      // L.imageOverlay(imageUrl, imageBounds, {opacity: 0.5}).addTo(map);
      // // 添加视频
      var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
          videoBounds = [[24.412216, 118.22655], [24.573941, 118.12544]];
      let videoOverlay  = L.videoOverlay(videoUrl, videoBounds,{autoplay: true, loop: true,  opacity: 0.8} ).addTo(map);


      videoOverlay.on('load', function () {
        // 添加控件
          var MyPauseControl = L.Control.extend({
              onAdd: function() {
                  var button = L.DomUtil.create('button');
                  button.innerHTML = '⏸';
                  // 添加控件事件
                  L.DomEvent.on(button, 'click', function () {
                      videoOverlay.getElement().pause();
                  });
                  return button;
              }
          });
          var MyPlayControl = L.Control.extend({
              onAdd: function() {
                  var button = L.DomUtil.create('button');
                  button.innerHTML = '▶️';
                  // 添加控件事件
                  L.DomEvent.on(button, 'click', function () {
                      videoOverlay.getElement().play();
                  });
                  return button;
              }
          });

          (new MyPauseControl()).addTo(map);
          (new MyPlayControl()).addTo(map);
          
      });


      // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      //     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      // }).addTo(map);
      // // icon
      // L.marker([51.5, -0.09]).addTo(map)
      //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
      //     .openPopup();
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
</style>