vue使用Mars3d弹框嵌套video视频/实时视频(m3u8)使用hls.js

下载hls.js
http://mars3d.cn/lib/video/hls/hls.js下载
1.首先绘制地图我使用的天地图

 async infoMars3d() {
      const that = this;
      var mapOptions = {
        scene: {
          center: {
            lat: 30.435192,
            lng: 103.936535,
            alt: 200000,
            heading: 359,
            pitch: -79
          },
          highDynamicRange: false
        },

        // 方式1：在创建地球前的参数中配置
        basemaps: [
          {
            name: "天地图影像(EPSG:4326)",
            icon: "img/basemaps/tdt_img.png",
            type: "group",
            show: true,
            layers: [
              {
                name: "底图",
                type: "tdt",
                layer: "img_d",
                crs: "EPSG:4326",
                // key: mars3d.Token.tiandituArr
                key: ["xxxx"]
              },

              {
                name: "注记",
                type: "tdt",
                layer: "img_z",
                crs: "EPSG:4326",
                // key: mars3d.Token.tiandituArr
                key: ["xxxx"]
              }
            ]
          }
        ]
      };

      this.map = await new mars3d.Map("videoTreesmap", mapOptions);

      // 创建矢量数据图层
      graphicLayer = await new mars3d.layer.GraphicLayer();
      this.map.addLayer(graphicLayer);
      this.map.bindContextMenu([]);
       //地图加载完成
      this.map.on(mars3d.EventType.load, function(event) {
      //绘制省边线地图--以前文章有提到
        that.addDemoGraphics();
        //绘制视频点
        that.ArcGisWfs();
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

2.绘制视频点–使用DivGraphic
准备一组数据
urlsList= [{
name: “XXX”,
url: “xxx./hls.m3u8”,
poster: “/poster/XXX.jpg”,
addressLatitude: “30.899118”,
addressLongitude: “103.593783”
},…]

   ArcGisWfs() {
      const that = this;
      if (!this.map) return;
      graphicLayer.clear();
      graphicLayer.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
      const result = this.urlsList;
      const graphicLayers = new mars3d.layer.GraphicLayer();
      this.map.addLayer(graphicLayers);
      for (let j = 0; j < result.length; ++j) {
        const index = j + 1;
        // 添加数据
        const graphic = that.addRandomGraphicByCount(
          graphicLayers,
          [result[j].addressLongitude, result[j].addressLatitude, 0],
          result[j],
          index
        );
      }
      graphicLayer.enabledEvent = true; // 恢复事件
      that.goToUrl(result[0]);

      return result.length;
    },
      addRandomGraphicByCount(graphicLayer, position, result, index) {
      const that = this;
      // 标点icon图片
      const srcImg = require("../../assets/images/icon-sssp.png");

      const graphicImg = new mars3d.graphic.DivGraphic({
        position,
        style: {
          html: ` <div class="mars3d-camera-content">
                      <img class="mars3d-camera-img" style="width: 40px;height:40px"  src=${srcImg} >
                    </div>
                    <div class="mars3d-camera-line" ></div>
                    <div class="mars3d-camera-point"></div>
                  `,
          offsetX: -18,
          visibleDepth: true
        }

         popup: `<div style="width: 450px;text-align:center;font-size:15px;">${result.name}</div><video style="width: 450px;height:300px;" id="videoHLS"  muted="muted" autoplay="autoplay" loop="loop" crossorigin="" controls="">
              </video>`,
        popupOptions: {
           offsetY: -50, // 显示Popup的偏移值，是DivGraphic本身的像素高度值
           template: `<div class="marsBlackPanel animation-spaceInDown">
                   <div class="marsBlackPanel-text">{content}</div>
                 <div></div>
                  <span class="mars3d-popup-close-button closeButton" style="color:#FFF" >×</span>
                 </div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
         verticalOrigin: Cesium.VerticalOrigin.CENTER
         }
      });
      graphicLayer.addGraphic(graphicImg);
      graphicImg.on(mars3d.EventType.click, function(event) {
         const videoElement = event.container.querySelector("#videoHLS"); // popup对应的DOM
         if (window.Hls.isSupported()) {
         const hls = new window.Hls();
           console.log(window.Hls);

          hls.loadSource(hlsUrl);
        hls.attachMedia(videoElement);
        hls.on(window.Hls.Events.MANIFEST_PARSED, function() {
           videoElement.play();
          });
       } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
         videoElement.src = hlsUrl;
          videoElement.addEventListener("loadedmetadata", function() {
            videoElement.play();
          });
         }
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74