高德地图中展示多个视频窗格

高德地图中展示多个视频窗格，视频与地图中的摄像头用线连接
效果展示：

效果演示

用到的组件有
vue-amap地址：https://github.com/ElemeFE/vue-amap
video.js 地址：https://videojs.com/

<template>
  <div class="container">
    <button v-for="(item,index) in monitorList" :key="index" @click="addVideo(item)">{{item.title}}</button>
    <div></div>
    <div class="box">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="'video'+marker.id"
          :draggable="true"
          :title="marker.title"
          :events="marker.events"
          :zIndex="150"
          :position="marker.position"
          :vid="index"
        >
          <div style="border: 5px rgb(255, 145, 0) solid">
            <div class="close" @click="closeVideo(marker.id)">×</div>
            <video :id="'video' + marker.id" class="video-js">
              <source :src="marker.url" type="video/mp4" />
            </video>
          </div>
        </el-amap-marker>
        <el-amap-marker
          v-for="(marker,index) in fixMarkers"
          :key="'marker'+marker.id"
          :title="marker.title"
          :offset="[-15,0]"
          icon="static/shexiangtou.png"
          :position="marker.position"
          :vid="index"
        ></el-amap-marker>
        <el-amap-polyline
          v-for="(line,index) in lineArr"
          :key="'line'+line.id"
          :strokeWeight="1"
          strokeColor="#0055ff"
          strokeStyle="dashed"
          :path="line.path"
          :vid="index"
        ></el-amap-polyline>
      </el-amap>
    </div>
  </div>
</template>

js代码

<script>
let that;
export default {
  destroyed() {
    if (this.myPlayerArr.length > 0) {
      this.myPlayerArr.forEach((item) => {
        item.player.dispose();
      });
    }
  },
  mounted() {
    that = this;
  },
  data() {
    return {
      monitorList: [
        {
          title: "奥体北",
          id: "1111",
          lng: 117.116232,
          lat: 36.657681,
          url:
            "http://sp.jzsc.net/upload/video/2019-12-14/f26ca0fc-5d9d-4e85-a40d-8116e3fa94f0.mp4",
        },
        {
          title: "奥体东",
          id: "2222",
          lng: 117.117622,
          lat: 36.65673,
          url:
            "http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-720p.mp4",
        },
        {
          title: "奥体南",
          id: "3333",
          lng: 117.116624,
          lat: 36.655998,
          url:
            "http://sp.jzsc.net/upload/video/2020-01-10/82110eeb-458a-44c7-a017-b48730572a6a.mp4",
        },
      ],
      center: [116.407606, 39.90374],
      zoom: 16,
      plugin: [
        {
          pName: "ToolBar",
        },
      ],
      events: {
        init(map) {
          this.gloalMap = map;
        },
      },
      markers: [],
      lineArr: [],
      myPlayerArr: [],
      fixMarkers: [],
    };
  },
  methods: {
    addVideo(item) {
      // 检查是否已经显示在地图上了
      for (const key in this.markers) {
        if (this.markers.hasOwnProperty(key)) {
          const element = this.markers[key];
          if (element.id === item.id) {
            // 已经显示在地图上了，结束方法运行
            return;
          }
        }
      }
      let lng = item.lng;
      let lat = item.lat;
      let marker = {
        position: [lng, lat],
        title: item.title,
        id: item.id,
        url: item.url,
        events: {
          dragging(e) {
            if (that.lineArr.length > 0) {
              let flag = true;
              for (let index = 0; index < that.lineArr.length; index++) {
                const element = that.lineArr[index];
                if (element.id === marker.id) {
                  flag = false;
                  that.lineArr.splice(index, 1, {
                    id: element.id,
                    path: [marker.position, [e.lnglat.lng, e.lnglat.lat]],
                  });
                  break;
                }
              }
              if (flag) {
                that.lineArr.push({
                  id: marker.id,
                  path: [
                    [marker.position[0], marker.position[1]],
                    [e.lnglat.lng, e.lnglat.lat],
                  ],
                });
              }
            } else {
              that.lineArr.push({
                id: marker.id,
                path: [
                  [marker.position[0], marker.position[1]],
                  [e.lnglat.lng, e.lnglat.lat],
                ],
              });
            }
          },
        },
      };
      this.markers.push(marker);
      this.fixMarkers.push({
        position: [lng, lat],
        title: item.title,
        id: item.id,
      });
      this.center = [lng, lat];
      setTimeout(() => {
        this.initVideo("video" + item.id, item.id);
      }, 100);
    },
    closeVideo(id) {
      for (let i = 0; i < this.markers.length; i++) {
        const item = this.markers[i];
        if (item.id === id) {
          // 销毁指定播放器
          this.myPlayerArr[i].player.dispose();
          // 移除指定播放器
          this.myPlayerArr.splice(i, 1);
          // 移除指定固定标记点
          this.fixMarkers.splice(i, 1);
          // 移除指定视频标记点
          this.markers.splice(i, 1);
          for (let j = 0; j < this.lineArr.length; j++) {
            const element = this.lineArr[j];
            if (id === element.id) {
              // 移除指定连线
              this.lineArr.splice(j, 1);
              break;
            }
          }
          break;
        }
      }
    },
    initVideo(nodeId, id) {
      //初始化视频方法
      let myPlayer = this.$video(nodeId, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "250px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "150px",
      });
      this.myPlayerArr.push({ id: id, player: myPlayer });
    },
  },
};
</script>

样式代码

<style>
.container {
  width: 100%;
}
.box {
  height: 700px;
  width: 50%;
  margin: 0 auto;
  margin-top: 10%;
}
body {
  background: #4d4948;
}
.close {
  cursor: pointer;
  z-index: 9999;
  width: 10px;
  height: 10px;
  position: relative;
  float: right;
  top: -5px;
  right: 5px;
  font-weight: bold;
  color: white;
}
.close:hover {
  color: red;
}
</style>