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();
      });
    },

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: ` 

                      ${srcImg} >
                    
                    

                    

                  `,
          offsetX: -18,
          visibleDepth: true
        }

         popup: `
${result.name}
`,
popupOptions: {
offsetY: -50, // 显示Popup的偏移值，是DivGraphic本身的像素高度值
template: `

{content}

×
`,
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();
});
}
});
},