vue在leaflet地图实现监控功能

 下载播放器插件flv或mpegts

npm i flv.js --save
npm i mpegts.js --save

先创建一个监控视频组件

<!-- leaflet  使用Vue,extend构造组件 -->
<template>
  <div>
    <video
      id="videoElement"
      controls
      autoplay
      muted
      width="300px"
      height="200px"
    ></video>
    <button @click="play">加速</button>    
  </div>
</template>

<script>
import flvjs from "flv.js";
import mpegts from "mpegts.js";
export default {
  name: "PopupContent",
  props: {
    // 接收传来的数据
    popupData: {      
      type: String,
      default: "",
    },
  },
  components: {},

  data() {
    return {
      name: "",
      id: null,
      alarmNum: 0,      
      flvPlayer: null,
    };
  },

  computed: {},

  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // flv播放器
    // this.initFlv();
    // mpegts.js播放器
    this.initMpegts();    
  },

  methods: {        
    //flv播放器
    initFlv() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: false,
          url: this.popupData,
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        // this.flvPlayer.play();
        var playPromise = this.flvPlayer.play();
        if (playPromise !== undefined) {
          playPromise
            .then((_) => {
              console.log("播放", _);              
              this.flvPlayer.play();
            })
            .catch((error) => {
              console.log("暂停", error);              
              // 销毁flv
              this.flvPlayer.pause();
              this.flvPlayer.unload();
              this.flvPlayer.detachMediaElement();
              this.flvPlayer.destroy();
              this.flvPlayer = null;
              // 重新加载
              this.initFlv();
            });
        }
      }
    },    
    // mpegts播放器
    initMpegts() {
      if (mpegts.getFeatureList().mseLivePlayback) {
        var videoElement = document.getElementById("videoElement");
        this.flvPlayer = mpegts.createPlayer({
          type: "flv", // could also be mpegts, m2ts, flv
          isLive: true,
          url: this.popupData,
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
        var playPromise = this.flvPlayer.play();
        if (playPromise !== undefined) {
          playPromise
            .then((_) => {
              console.log("播放", _);              
            })
            .catch((error) => {
              console.log("暂停", error);              
              // 销毁flv
              this.flvPlayer.pause();
              this.flvPlayer.unload();
              this.flvPlayer.detachMediaElement();
              this.flvPlayer.destroy();
              this.flvPlayer = null;
              // 重新加载
              this.initMpegts();
            });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#stationName {
  margin-top: 20px;
}
</style>

然后在地图页面引入组件

提供一个西瓜flv格式地址：https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv

<template>
  <div id="map"></div>
</template>

<script>
import Vue from "vue";
import L from "leaflet";
import iconA from "leaflet/dist/images/marker-icon-2x.png";
import popupContent from "./leafletComponents/PopupContent";
export default {
  components: {
    popupContent,
  },

  data() {
    return {
      map: null,      
      imageOverLay: null,
      curData: "",
      gem: [],      
      mapUrlB: L.icon({
        iconUrl: iconA,
        iconSize: [26, 42],
        iconAnchor: [13, 42],
        shadowSize: [41, 41],
        shadowAnchor: [13, 41],
      }), 
      content:
        '<div id="mapDialog_container" ref="mapDialog_container" style="width: 300px;height:200px;"></div>',
      markerData: { test: "测试" },
      pane: null,
    };
  },

  computed: {},

  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initLeaflet();
  },

  methods: {
    initLeaflet() {
      this.map = L.map("map", {
        center: [39.905963, 116.390813],
        zoom: 15,
        // continuousWorld: true,
      });      
      this.tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(
        this.map
      );      
      this.extendPopup();
    },    
    extendPopup() {
      // let point = new Bmap.Point(39.90563, 116.391305);
      let arr = [
        {
          point: [39.91553, 116.391305],
          data: "视频流",
        },
        {
          point: [39.91553, 116.395305],
          data: "视频流",
        },
      ];
      this.gem = [];
      for (let i = 0; i < arr.length; i++) {
        const marker = L.marker(arr[i].point, { icon: this.mapUrlB }).addTo(
          this.map
        );
        marker.info = arr[i].data;
        this.gem.push(marker);
        let popup = L.popup().setContent(this.content);
        marker.bindPopup(popup);
        marker.on("click", (e) => {
          console.log("点击marker", e);
          // 点击marker显示弹窗并显示flv监控视频
          // 判断有pane时，则销毁
          if (this.pane != null) {
            this.pane.$destroy();
          }
          // 创建构造器
          let Profile = Vue.extend(popupContent);
          // 创建 Profile 实例，并挂载到一个元素上。
          this.pane = new Profile({
            propsData: { popupData: e.target.info },
          });
          // 加定时器解决第二次点击marker视频报错问题
          setTimeout(() => {
            this.pane.$mount("#mapDialog_container");
          }, 200);
        });
      }      
    },    
  },
};
</script>
<style lang="scss" scoped>
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}
</style>