master

分支 (1)

管理

管理

master

smxweb
/
VideoProjectionTool.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="x5-fullscreen" content="true">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>Geoworld三维地球</title>
  <script src="./static/CimSDK/Workers/jquery-2.0.3.js"></script>

  <link rel="stylesheet" href="./static/CimSDK/Assets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="./static/CimSDK/Assets/ztree/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="./static/CimSDK/Assets/ztree/jquery.ztree.excheck.js"></script>
  <link rel="stylesheet" href="./static/CimSDK/CimSDK.min.css">
  <link href="./static/CimSDK/Assets/thumbnail-slider/thumbnail-slider.css" rel="stylesheet" />
  <script src="./static/CimSDK/Assets/thumbnail-slider/thumbnail-slider.js" type="text/javascript"></script>
  <script src="./static/CimSDK/CimSDK.min.js"></script>
  <!-- <script src="../../dist/videoProjection.js"></script> -->
  <style>

  </style>
</head>

<body>
  <div id="map3dContainer" class="fullWindow"></div>
  <div id="videoSlider" style="position:absolute;bottom:55px;width:100%"></div>
  <div class="infoview">
    <span style="color:#cad1d1">视频投影</span> <br>
    <input type="button" class="btn btn-primary" value="相机位置" onclick="cameraPos()">
    <input type="button" class="btn btn-primary" value="飞到摄像头" onclick="flytoCamPos()">
    <input type="button" class="btn btn-primary" value="拾取坐标" onclick="getPosition_onclick()">
    <input type="button" class="btn btn-primary" value="结束拾取" onclick="selectPosition_onclick()">
    <input type="button" class="btn btn-primary" value="下载配置" onclick="downlodCfg_onclick()"><br>
    <!--  <a id="downloadAnchorElem" style="display:none"></a>-->
    经&#12288;度: <input type="text" id="textLongitude" value="70"><br>
    纬&#12288;度: <input type="text" id="textLatitude" value="70"><br>
    高&ensp;&ensp;度: <input type="text" id="textHeight" value="70"><br>
    朝向角: <input type="text" id="textHeading" value="85.0">
    <input type="button" class="btn btn-primary" value="+1" onclick="addone('textHeading')">
    <input type="button" class="btn btn-primary" value="-1" onclick="deleteone('textHeading')">
    <input type="button" class="btn btn-primary" value="+0.1" onclick="addzoreone('textHeading')">
    <input type="button" class="btn btn-primary" value="-0.1" onclick="deletzoreone('textHeading')"><br>
    俯仰角: <input type="text" id="textPitch" value="-4.0">
    <input type="button" class="btn btn-primary" value="+1" onclick="addone('textPitch')">
    <input type="button" class="btn btn-primary" value="-1" onclick="deleteone('textPitch')">
    <input type="button" class="btn btn-primary" value="+0.1" onclick="addzoreone('textPitch')">
    <input type="button" class="btn btn-primary" value="-0.1" onclick="deletzoreone('textPitch')">
    <br>
    滚转角: <input type="text" id="textRoll" value="2.0"><br>
    视&ensp;&ensp;域: <input type="text" id="textFov" value="63">
    <input type="button" class="btn btn-primary" value="+1" onclick="addone('textFov')">
    <input type="button" class="btn btn-primary" value="-1" onclick="deleteone('textFov')">
    <input type="button" class="btn btn-primary" value="+0.1" onclick="addzoreone('textFov')">
    <input type="button" class="btn btn-primary" value="-0.1" onclick="deletzoreone('textFov')"><br>
    远裁面: <input type="text" id="textFar" value="63">
    <input type="button" class="btn btn-primary" value="+1" onclick="addone('textFar')">
    <input type="button" class="btn btn-primary" value="-1" onclick="deleteone('textFar')">
    <input type="button" class="btn btn-primary" value="+0.1" onclick="addzoreone('textFar')">
    <input type="button" class="btn btn-primary" value="-0.1" onclick="deletzoreone('textFar')"><br>
    虚化上：<input id="idBlendUp" type="range" min="1" max="127" step="1" oninput="updateBlendUp()"> Val: <output
      id="blendUpVal"></output> 渐变：
    <input id="chkBlendUp" class="styled" type="checkbox" checked onclick="blendUp()"><br>
    虚化右：<input id="idBlendRight" type="range" min="1" max="127" step="1" oninput="updateBlendRight()"> Val: <output
      id="blendRightVal"></output> 渐变：
    <input id="chkBlendRight" class="styled" type="checkbox" checked onclick="blendRight()"><br>
    虚化下：<input id="idBlendBottom" type="range" min="1" max="127" step="1" oninput="updateBlendBottom()"> Val: <output
      id="blendBottomVal"></output> 渐变：
    <input id="chkBlendBottom" class="styled" type="checkbox" checked onclick="blendBottom()"><br>
    虚化左：<input id="idBlendLeft" type="range" min="1" max="127" step="1" oninput="updateBlendLeft()"> Val: <output
      id="blendLeftVal"></output> 渐变：
    <input id="chkBlendLeft" class="styled" type="checkbox" checked onclick="blendLeft()"><br>

    <div class="checkbox checkbox-primary checkbox-inline">
      <label>视&ensp;&ensp;频：</label>
      <input id="chkVideo" class="styled" type="checkbox" onclick="hideVideo_onclick()">
    </div>
    <div class="checkbox checkbox-primary checkbox-inline">
      <label>视&ensp;&ensp;锥：</label>
      <input id="chkAuxMesh" class="styled" type="checkbox" onclick="showHideVideoAuxMesh_onclick()">
    </div>

    流地址: <input type="text" id="videoUrl" value=""><br>
    <button onclick="setVideo()">确定</button>
    <!--  <div class="checkbox checkbox-primary checkbox-inline">-->
    <!--    <label >高&ensp;&ensp;亮：</label>-->
    <!--    <input id="chkHighlight" class="styled" type="checkbox" onclick="highlightVideoAuxMesh_onclick()">-->
    <!--  </div>-->

    <br>
    <div id="videoPreview">
    </div>

  </div>
  <link href="./static/video.js/dist/video-js.min.css" rel="stylesheet" />
  <script src="./static/video.js/dist/video.min.js"></script>

  <script>
    let earthCtrl = null;
    const videoJson = "./static/puhuitang.json"
    earthCtrl = new SmartEarth.EarthCtrl("map3dContainer", {
      // StaticFileBaseUrl: "../../dist/WebSDK/"
    });
    //地图
    earthCtrl.factory.createImageryLayer({
      sourceType: "arcgis",
      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    });
    const mVPArray = [];
    let mVideoSlider = null;
    let currentVP = null;
    init();
    //初始化
    function init() {
      earthCtrl.coreMap.scene.globe.depthTestAgainstTerrain = true;
      earthCtrl.coreMap.scene.pickTranslucentDepth = true;
      earthCtrl.coreMap.scene.shadowMap.enable = true;
      //创建模型

      var url4 = "https://www.shmetrowg.com:8880/gisserver/c3dserver/puhuitangdt1011/tileset.json";
      window.tel4 = earthCtrl.factory.create3DTilesets({
        url: url4,
      });
      var url5 = "https://www.shmetrowg.com:8880/gisserver/c3dserver/puhuitang1011/tileset.json";
      window.tel5 = earthCtrl.factory.create3DTilesets({
        url: url5,
      });

      let pointsInterest = {
        destination: SmartEarth.Cesium.Cartesian3.fromDegrees(121.4120, 31.1855, 150),
        orientation: {
          heading: SmartEarth.Cesium.Math.toRadians(-10),
          pitch: SmartEarth.Cesium.Math.toRadians(-30),
          roll: SmartEarth.Cesium.Math.toRadians(0.0)
        }
      };

      earthCtrl.camera.flyToPointsInterest(pointsInterest);


      setTimeout(() => {
        tel4.item._selectedTiles.forEach(item => {
          if (item._content.url.indexOf('NoLod_23') !== -1 || item._content.url.indexOf('NoLod_21') !== -1) {
            item._content._contents.forEach(val => {
              val._model.show = false;
            });
          }
        });
      }, 3000)

    }

    function setVideo() {
      const url = $('#videoUrl').val();
      if (url === '') return;

      //创建相机
      mVideoSlider = createVideoSlider("videoSlider", earthCtrl, {
        //点击事件
        onItemClick: function (vp) {
          currentVP = vp;
          earthCtrl.camera.flyTo(vp.lon, vp.lat, vp.height, vp.heading, vp.pitch, vp.roll, 3);
          earthCtrl.coreMap.scene.clickVideoProjection(vp.videoProjection.id);

          //选中高亮
          for (let i = 0; i < mVPArray.length; i++) {
            const videoProjection = mVPArray[i].videoProjection;
            if (SmartEarth.Cesium.defined(videoProjection)) {
              videoProjection.highlightState = 0;
            }
          }
          if (SmartEarth.Cesium.defined(vp.videoProjection)) {
            vp.videoProjection.highlightState = 1;
          }
          currentVP.videoProjection.show = !currentVP.videoProjection.show;
          currentVP.show = currentVP.videoProjection.show;
          //设置当前选中的参数
          setParameterToDom(currentVP);

        },
        //创建相机事件
        onVideoCreated: function (videoElement, vp, idx) {
          videoElement.oncanplay = function () {
            if (!SmartEarth.Cesium.defined(vp.videoProjection)) {
              vp.videoProjection = earthCtrl.factory.createVideoProjection({
                sourceType: vp.type, // 類型
                id: vp.id,
                name: vp.name,
                matchMaterials: vp.matchMaterials,
                lon: vp.lon,
                lat: vp.lat,
                height: vp.height,
                heading: vp.heading,
                pitch: vp.pitch,
                roll: vp.roll,
                fov: vp.fov,
                near: vp.near,
                far: vp.far || 20,
                opacity: vp.opacity,
                aspect: vp.videoWidth / vp.videoHeight,
                maxDiffAngle: vp.maxDiffAngle,
                addToMap: true,
                castTexture: videoElement,
                playVideo: vp.playVideo,
                showMesh: vp.showMesh,
                show: vp.show,
                useDepth: vp.useDepth,
                videoFrameInterval: vp.videoFrameInterval,
                calibrateParam: vp.calibrateParam,
                blendLeft: vp.blendLeft,
                blendRight: vp.blendRight,
                blendTop: vp.blendTop,
                blendBottom: vp.blendBottom
              });
              //如果是第一个则自动点击
              if (idx === 0) {
                mVideoSlider.triggerClick();
              }
            }
          };
        },
        onVideoRemoved: function (vp) {
        }
      });
      //请求Video配置的json文件
      $.ajax({
        url: videoJson,
        cache: false,
        async: true,
        success: function (data) {
          updateData(data, url);
        },
        error: function (data) {
          console.info(data);
        }
      });
    }

    //将请求完的数据载入
    function updateData(vpParams, url) {
      for (let i = 0; i < vpParams.length; i++) {
        vpParams[i].videoLink = url;
        mVPArray.push(vpParams[i]);
      }
      mVideoSlider.updateData(mVPArray);
    }
    //创建3dtile模型
    function create3DTileSet(url) {
      const layer = earthCtrl.factory.createModelLayer({
        url: url,
        sourceType: "b3dm",
      });
      earthCtrl.userScene.flyTo(layer);
    }
    //坐标拾取
    function getPosition_onclick() {
      earthCtrl.measure.pickPosition(null, function (e) {
        if (e.retCode === "finished") {
          earthCtrl.tools.browse();
          return;
        }
        document.getElementById("textLongitude").value = `${e.result.longitude}`;
        document.getElementById("textLatitude").value = `${e.result.latitude}`;
        document.getElementById("textHeight").value = `${e.result.height}`;
        changeParam_onclick();
      });
    }
    //结束坐标拾取
    function selectPosition_onclick() {
      earthCtrl.tools.browse();
    }
    //变量+1
    function addone(v) {
      $(`#${v}`).val((parseFloat($(`#${v}`).val()) + 1).toFixed(1));
      changeParam_onclick();

    }
    //变量-1
    function deleteone(v) {
      $(`#${v}`).val((parseFloat($(`#${v}`).val()) - 1).toFixed(1));
      changeParam_onclick();
    }
    //变量+0.1
    function addzoreone(v) {
      $(`#${v}`).val((parseFloat($(`#${v}`).val()) + 0.1).toFixed(1));
      changeParam_onclick();
    }
    //变量-0.1
    function deletzoreone(v) {
      $(`#${v}`).val((parseFloat($(`#${v}`).val()) - 0.1).toFixed(1));
      changeParam_onclick();
    }
    //虚化上勾选选中
    function blendUp() {
      console.log(currentVP);
      const checked = document.getElementById("chkBlendUp").checked;
      if (currentVP) {
        currentVP.blendTop.gradient = checked;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    //虚化上取消勾选
    function updateBlendUp() {
      const val = document.getElementById("idBlendUp").value;
      const value = document.getElementById("blendUpVal")
      value.textContent = val;
      if (currentVP) {
        currentVP.blendTop.width = val;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function blendRight() {
      const checked = document.getElementById("chkBlendRight").checked;
      if (currentVP) {
        currentVP.blendRight.gradient = checked;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function updateBlendRight() {
      const val = document.getElementById("idBlendRight").value;
      const value = document.getElementById("blendRightVal")
      value.textContent = val;
      if (currentVP) {
        currentVP.blendRight.width = val;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function blendBottom() {
      const checked = document.getElementById("chkBlendBottom").checked;
      if (currentVP) {
        currentVP.blendBottom.gradient = checked;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function updateBlendBottom() {
      const val = document.getElementById("idBlendBottom").value;
      const value = document.getElementById("blendBottomVal");
      value.textContent = val;
      if (currentVP) {
        currentVP.blendBottom.width = val;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function blendLeft() {
      const checked = document.getElementById("chkBlendLeft").checked;
      if (currentVP) {
        currentVP.blendLeft.gradient = checked;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }
    function updateBlendLeft() {
      const val = document.getElementById("idBlendLeft").value;
      const value = document.getElementById("blendLeftVal");
      value.textContent = val;
      if (currentVP) {
        currentVP.blendLeft.width = val;
        currentVP.videoProjection.updateBlend(currentVP.blendTop, currentVP.blendRight,
          currentVP.blendBottom, currentVP.blendLeft);
      }
    }

    //从dom元素中获取参数
    function getParameterFromDom(param) {
      param.lon = parseFloat(document.getElementById("textLongitude").value);
      param.lat = parseFloat(document.getElementById("textLatitude").value);
      param.height = parseFloat(document.getElementById("textHeight").value);
      param.heading = parseFloat(document.getElementById("textHeading").value);
      param.pitch = parseFloat(document.getElementById("textPitch").value);
      param.roll = parseFloat(document.getElementById("textRoll").value);
      param.fov = parseFloat(document.getElementById("textFov").value);
      param.far = parseFloat(document.getElementById("textFar").value);
    }

    //设置参数到dom中
    function setParameterToDom(param) {
      document.getElementById("textLongitude").value = `${param.lon}`;
      document.getElementById("textLatitude").value = `${param.lat}`;
      document.getElementById("textHeight").value = `${param.height}`;
      document.getElementById("textHeading").value = `${param.heading}`;
      document.getElementById("textPitch").value = `${param.pitch}`;
      document.getElementById("textRoll").value = `${param.roll}`;
      document.getElementById("textFov").value = `${param.fov}`;
      document.getElementById("textFar").value = `${param.far}`;
      //虚化上，
      document.getElementById("idBlendUp").value = param.blendTop.width;
      document.getElementById("blendUpVal").value = param.blendTop.width;
      document.getElementById("chkBlendUp").checked = param.blendTop.gradient;
      //虚化右，
      document.getElementById("idBlendRight").value = param.blendRight.width;
      document.getElementById("blendRightVal").value = param.blendRight.width;
      document.getElementById("chkBlendRight").checked = param.blendRight.gradient;
      //虚化下，
      document.getElementById("idBlendBottom").value = param.blendBottom.width;
      document.getElementById("blendBottomVal").value = param.blendBottom.width;
      document.getElementById("chkBlendBottom").checked = param.blendBottom.gradient;
      //虚化左，
      document.getElementById("idBlendLeft").value = param.blendLeft.width;
      document.getElementById("blendLeftVal").value = param.blendLeft.width;
      document.getElementById("chkBlendLeft").checked = param.blendLeft.gradient;
      //显示视频
      document.getElementById("chkVideo").checked = param.show;
      //显示视锥
      document.getElementById("chkAuxMesh").checked = param.showMesh;
    }

    //设置视频投影参数
    function setVPParam(vp) {
      if (vp) {
        vp.videoProjection.setParameter({
          lon: vp.lon,
          lat: vp.lat,
          height: vp.height,
          heading: vp.heading,
          pitch: vp.pitch,
          roll: vp.roll,
          fov: vp.fov,
          far: vp.far
        });
      }
    }

    //设置参数修改
    function changeParam_onclick() {
      if (currentVP) {
        getParameterFromDom(currentVP);
        setVPParam(currentVP);
      }
    }
    //显示视锥
    function showHideVideoAuxMesh_onclick() {
      if (currentVP) {
        currentVP.videoProjection.showMesh = !currentVP.videoProjection.showMesh;
        currentVP.showMesh = currentVP.videoProjection.showMesh;
      }
    }
    //点击隐藏视频投影
    function hideVideo_onclick() {
      if (currentVP) {
        currentVP.videoProjection.show = !currentVP.videoProjection.show;
        currentVP.show = currentVP.videoProjection.show;
      }
    }

    function highlightVideoAuxMesh_onclick() {
      if (currentVP) {
        currentVP.videoProjection.highlightState = currentVP.videoProjection.highlightState === 0 ? 1 : 0;
      }
    }
    //下载配置
    function downlodCfg_onclick() {
      console.log("下载配置")
      const configArr = [];
      for (let i = 0; i < mVPArray.length; i++) {
        const cfg = {};
        const vp = mVPArray[i];
        const videoProjection = vp.videoProjection;
        cfg.id = vp.id;
        cfg.name = vp.name;
        cfg.matchMaterials = vp.matchMaterials;
        cfg.lon = videoProjection.parameter.lon;
        cfg.lat = videoProjection.parameter.lat;
        cfg.height = videoProjection.parameter.height;
        cfg.heading = videoProjection.parameter.heading;
        cfg.pitch = videoProjection.parameter.pitch;
        cfg.roll = videoProjection.parameter.roll;
        cfg.fov = videoProjection.parameter.fov;
        cfg.near = videoProjection.parameter.near;
        cfg.opacity = vp.opacity;
        cfg.maxDiffAngle = vp.maxDiffAngle;
        cfg.videoLink = vp.videoLink;
        cfg.videoWidth = vp.videoWidth;
        cfg.videoHeight = vp.videoHeight;
        cfg.preview = vp.preview;
        cfg.playVideo = vp.playVideo;
        cfg.show = videoProjection.show;
        cfg.enable = vp.enable;
        cfg.useDepth = vp.useDepth;
        cfg.videoFrameInterval = vp.videoFrameInterval;
        cfg.blendTop = vp.blendTop;
        cfg.blendRight = vp.blendRight;
        cfg.blendBottom = vp.blendBottom;
        cfg.blendLeft = vp.blendLeft;
        configArr.push(cfg);
      }
      // console.log(JSON.stringify(configArr, null, 2));
      // 下载
      const blob = new Blob([JSON.stringify(configArr, null, 2)], { type: "text/json" });
      const link = document.createElement('a');
      link.download = `videoProjection-${new Date().getTime()}.json`;
      link.href = window.URL.createObjectURL(blob);
      link.dataset.downloadurl = ["text/json", link.download, link.href].join(":");
      const evt = new MouseEvent("click", {
        view: window,
        bubbles: true,
        cancelable: true,
      });
      link.dispatchEvent(evt);
      link.remove();

      // const dataStr = `data:text/json;charset=utf-8,
      // ${encodeURIComponent(JSON.stringify(configArr,null,2))}`;
      // // ${encodeURIComponent(JSON.stringify(configArr).split(',').join('.\r\n'))}`;
      // const dlAnchorElm = document.getElementById('downloadAnchorElem');
      // dlAnchorElm.setAttribute("href", dataStr);
      // dlAnchorElm.setAttribute("download", `videoProjection-${new Date().getTime()}.json`);
      // dlAnchorElm.click();
    }

    //相机位置
    function cameraPos() {
      const recordCamera = {};
      recordCamera.pos = earthCtrl.camera.position;
      recordCamera.heading = earthCtrl.camera.heading;
      recordCamera.pitch = earthCtrl.camera.pitch;
      recordCamera.roll = earthCtrl.camera.roll;
      console.info(recordCamera);
    }
    //飞到相机位置
    function flytoCamPos() {
      if (currentVP) {
        const vp = currentVP;
        earthCtrl.camera.flyTo(vp.lon, vp.lat, vp.height, vp.heading, vp.pitch, vp.roll, 3);
      }
    }

    function createSceneNodeTreeView(divName, earthCtrl, options) {
      const thisObject = {};
      thisObject.onItemCheck = options.onItemCheck;
      thisObject.onItemClick = options.onItemClick;

      function syncSceneToTreeView(sceneNode, treeNodeArray) {
        const treeNode = {
          "name": sceneNode.name,
          "uuid": sceneNode.id,
          "open": true,
          "font": { color: "white" },
          "checked": SmartEarth.Cesium.defaultValue(sceneNode.visible, sceneNode.show)
        };
        const children = [];
        if (sceneNode.childNodes) {
          for (let i = 0; i < sceneNode.childNodes.length; i++) {
            const childNode = sceneNode.childNodes[i];
            syncSceneToTreeView(childNode, children);
          }
        }

        if (children.length > 0) {
          treeNode["children"] = children;
        }
        treeNodeArray.push(treeNode);
      }

      function getFont(treeId, node) {
        return node.font ? node.font : {};
      }

      const setting = {
        check: {
          enable: true,
          autoCheckTrigger: true,
          chkboxType: { "Y": "ps", "N": "ps" }
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          beforeCheck: beforeCheck,
          onCheck: thisObject.onItemCheck,
          onClick: thisObject.onItemClick
        }
      };

      function beforeCheck(treeId, treeNode) {
        return (treeNode.doCheck !== false);
      }

      const treeNodeData = [];
      syncSceneToTreeView(earthCtrl.userScene.rootNode, treeNodeData);
      $.fn.zTree.init($(`#${divName}`), setting, treeNodeData);
    }

    function createVideoSlider(divName, earthCtrl, options) {
      const thisObject = {};
      thisObject._mVPArray = [];
      thisObject.onItemClick = options.onItemClick;
      thisObject.onVideoCreated = options.onVideoCreated;
      thisObject.onVideoRemoved = options.onVideoRemoved;
      thisObject.triggerClick0 = false;
      let videoContainer = {};
      const parentDom = document.getElementById(divName);
      parentDom.innerHTML = '<div id="thumbnail-slider"><div class="inner"><ul id="videoContainer"></ul></div></div>';
      videoContainer = document.getElementById("videoContainer");
      const thumbnailSliderOptions =
      {
        sliderId: "thumbnail-slider",
        orientation: "horizontal",
        thumbWidth: "176px",
        thumbHeight: "120px",
        showMode: 1,
        autoAdvance: false,
        selectable: true,
        slideInterval: 3000,
        transitionSpeed: 1000,
        shuffle: false,
        startSlideIndex: 0, //0-based
        pauseOnHover: true,
        initSliderByCallingInitFunc: false,
        rightGap: "default",
        keyboardNav: true,
        mousewheelNav: true,
        before: null,
        license: "mylicense"
      };

      thisObject.triggerClick = function () {
        if (!thisObject.triggerClick0) {
          thisObject.triggerClick0 = true;
          if (thisObject.slides && thisObject.slides.length > 0) {
            thisObject.slides[0].click();
          }
        }
      }

      thisObject.updateData = function (vpArray) {
        let vp;
        let i;
        thisObject._mVPArray = vpArray;
        let innerHtml = "";
        for (i = 0; i < vpArray.length; i++) {
          vp = vpArray[i];
          if (!vp.enable) {
            continue;
          }
          const display = "block";//vp.preview?"block" : "none";
          vp.elementName = `video${i}`;
          innerHtml += `
          <li title=${vp.name}>
            <image class="thumb" src="./Assets/SampleData/image/1.png" >
              <video data-index=${i} id="myVideo${i}" class="video-js vjs-big-play-centered" data-setup="{ }" width="${vp.videoWidth}" height="${vp.videoWidth}" muted></video></video>
              <video data-index=${i} class="thumb" id="${vp.elementName}" loop muted style="z-index=-1" width="${vp.videoWidth}" height="${vp.videoWidth}"></video>
              <input data-video="${vp.elementName}" type="button" class="btn btn-primary" value="投影" style="display:${display}"  onclick="flyTo(&apos;${vp.elementName}&apos;)">
            </image>
          </li>`;
        }
        videoContainer.innerHTML = innerHtml;
        // thisObject.mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions);
        const slides = videoContainer.getElementsByClassName("video-js");
        thisObject.slides = slides;
        for (i = 0; i < slides.length; i++) {
          slides[i].index = i;
          slides[i].onclick = function (e) {
            let index = parseInt(e.target.getAttribute("data-index"));
            if (isNaN(index)) {
              index = 0;
            }
            if (thisObject._mVPArray.length > index && thisObject.onItemClick) {
              thisObject.onItemClick(thisObject._mVPArray[index]);
            }
          };

          if (thisObject.onVideoCreated) {
            vp = thisObject._mVPArray[i];
            console.log(vp)
            const videoElement = document.getElementById(vp.elementName);
            const videoElement1 = document.getElementById('myVideo' + i);
            videoElement.setAttribute("crossorigin", "anonymous");
            thisObject.onVideoCreated(videoElement1, vp, i);
            const myPlayer = videojs('myVideo' + i);
            myPlayer.src({ type: 'application/x-mpegURL', src: vp.videoLink });
            myPlayer.ready(function () {
              const howLoudIsIt = this.volume();
              setTimeout(() => {
                this.pause();
                vp.videoProjection && (vp.videoProjection.show = false);
              }, 6000)
            });
            myPlayer.load();
            myPlayer.play();
            vp.player = myPlayer;
          }

        }
      }
      return thisObject;
    }
  </script>
</body>

</html>