skyversation-public
/
web_show_function_ui_mars3d


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!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.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <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" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="" />
    <title>视频3D贴物投射 </title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,bootstrap-checkbox,bootstrap-slider,layer,haoutil,turf,mars3d"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .infoview input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
      }
    </style>
  </head>

  <body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="mars3dContainer" class="mars3d-container"></div>

    <!-- 面板 -->
    <div id="toolbar" class="infoview">
      <input type="button" class="btn btn-primary" value="视频投放" onclick="createViewForVideo()" />
      <input type="button" class="btn btn-primary" value="图片投放" onclick="createViewForPicture()" />
      <input type="button" class="btn btn-primary" value="文本投放" onclick="createText()" />
      <input type="button" class="btn btn-primary" value="颜色投放" onclick="createViewForColor()" />
      <input type="button" class="btn btn-info" value="清除" onclick="clearVideo()" />

      <table class="mars-table">
        <tbody>
          <tr>
            <td>混合系数:</td>
            <td>
              <input id="txtMixNum" />
            </td>
            <td>调整 透明度</td>
          </tr>
          <tr>
            <td>水平拉伸:</td>
            <td>
              <input id="cameraFov" />
            </td>
            <td>调整 水平拉伸</td>
          </tr>
          <tr>
            <td>相机宽高比例:</td>
            <td>
              <input id="cameraWidHei" />
            </td>
            <td>调整 垂直拉伸</td>
          </tr>
          <tr>
            <td>视椎框线:</td>
            <td>
              <div class="checkbox checkbox-info checkbox-inline">
                <input type="checkbox" id="chkDebugFrustum" value="this" name="jiaodu" checked />
                <label for="chkDebugFrustum">显示框线</label>
              </div>
            </td>
            <td></td>
          </tr>
          <tr>
            <td>调整位置:</td>
            <td>
              <input id="btnSelCamera" type="button" class="btn btn-info" value="相机" />
              <input id="btnSelView" type="button" class="btn btn-info" value="视点" />
            </td>
            <td>鼠标图上点选</td>
          </tr>
          <tr>
            <td>键盘微调:</td>
            <td>步长<input id="rotateDeg" type="number" value="0.05" min="0.001" max="2" class="form-control" style="width: 90px" />度</td>

            <td>
              <div class="checkbox checkbox-info checkbox-inline">
                <input id="chkCameraFollow" type="checkbox" class="checkbox checkbox-info checkbox-inline" value="相机跟随" />
                <label for="chkCameraFollow">相机跟随</label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <input id="btnPlayPause" type="button" class="btn btn-info" value="播放暂停" />
      <input id="btnLocate" type="button" class="btn btn-info" value="返回相机视点" />
      <input id="btnConsoleJson" type="button" class="btn btn-info" value="打印参数" />
    </div>

    <script src="./js/common.js"></script>
    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      var map;
      var graphicLayer;
      var selectedView;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 31.843366, lng: 117.205566, alt: 132, heading: 179, pitch: -56 },
            fxaa: true, //不开启抗锯齿，编辑时界面会闪烁
            globe: {
              depthTestAgainstTerrain: true, //不加无法投射到地形上
            },
          },
        });

        //创建三维地球场景
        map = new mars3d.Map("mars3dContainer", mapOptions);

        //添加参考三维模型
        var tiles3dLayer = new mars3d.layer.TilesetLayer({
          name: "合肥国家大学科技园",
          url: "//data.mars3d.cn/3dtiles/qx-hfdxy/tileset.json",
          position: { alt: -24 },
          maximumScreenSpaceError: 1,
          maximumMemoryUsage: 1024,
        });
        map.addLayer(tiles3dLayer);

        //创建Graphic图层
        graphicLayer = new mars3d.layer.GraphicLayer();
        map.addLayer(graphicLayer);

        //绑定属性及处理事件
        bindEvnet();

        //加一些演示数据
        addGraphic_01();
      }

      // 加载已配置好的视频（此参数为界面上“打印参数”按钮获取的）
      function addGraphic_01() {
        var video3D = new mars3d.graphic.Video3D({
          type: mars3d.graphic.Video3D.Type.Video,
          url: "//data.mars3d.cn/file/video/menqian.mp4",
          position: [117.20551, 31.842824, 41.4],
          cameraPosition: [117.205457, 31.842984, 63.9],
          style: {
            fovDegree: 84.3,
            aspectRatio: 2.6,
            opacity: 0.8,
            camera: {
              direction: {
                x: 0.07331987934745406,
                y: -0.31686588753316797,
                z: -0.9456321719412325,
              },
              right: {
                x: 0.8826585211077188,
                y: 0.46201009007723565,
                z: -0.08637483304041443,
              },
              up: {
                x: -0.4642608430704491,
                y: 0.8283373020603265,
                z: -0.3135588997412374,
              },
            },
          },
          showFrustum: true,
        });
        graphicLayer.addGraphic(video3D);

        selectedView = video3D; //记录下
      }

      //视频投放
      function createViewForVideo() {
        //取屏幕中心点
        var cartesian = map.getCenter({ format: false });
        if (!cartesian) {
          return;
        }

        var showFrustum = $("#chkDebugFrustum").is(":checked");
        var opacity = Number($("#txtMixNum").val());
        var cameraPosition = Cesium.clone(map.scene.camera.position);

        //构造投射体
        var video3D = new mars3d.graphic.Video3D({
          type: mars3d.graphic.Video3D.Type.Video,
          url: "//data.mars3d.cn/file/video/lukou.mp4",
          position: cartesian,
          cameraPosition: cameraPosition,
          style: {
            opacity: opacity,
          },
          showFrustum: showFrustum,
        });
        graphicLayer.addGraphic(video3D);

        selectedView = video3D; //记录下
      }

      //图片投放
      function createViewForPicture() {
        //取屏幕中心点
        var cartesian = map.getCenter({ format: false });
        if (!cartesian) {
          return;
        }

        var showFrustum = $("#chkDebugFrustum").is(":checked");
        var opacity = Number($("#txtMixNum").val());
        var cameraPosition = Cesium.clone(map.scene.camera.position);

        //构造投射体
        var video3D = new mars3d.graphic.Video3D({
          type: mars3d.graphic.Video3D.Type.Image,
          url: "./img/tietu/gugong.jpg",
          position: cartesian,
          cameraPosition: cameraPosition,
          style: {
            opacity: opacity,
          },
          showFrustum: showFrustum,
        });
        graphicLayer.addGraphic(video3D);

        selectedView = video3D; //记录下
      }

      //文本投放
      function createText() {
        var cartesian = map.getCenter({ format: false });
        if (!cartesian) {
          return;
        }

        var showFrustum = $("#chkDebugFrustum").is(":checked");
        var opacity = Number($("#txtMixNum").val());
        var cameraPosition = Cesium.clone(map.scene.camera.position);

        //构造投射体
        var video3D = new mars3d.graphic.Video3D({
          type: mars3d.graphic.Video3D.Type.Text,
          position: cartesian,
          cameraPosition: cameraPosition,
          style: {
            text: "Mars3D 火星科技 2021",
            opacity: opacity,
            textStyles: {
              font: "50px 楷体",
              fill: true,
              fillColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
              stroke: true,
              strokeWidth: 2,
              strokeColor: new Cesium.Color(1.0, 1.0, 1.0, 0.8),
              backgroundColor: new Cesium.Color(1.0, 1.0, 1.0, 0.1),
              textBaseline: "top",
              padding: 40,
            },
          },
          showFrustum: showFrustum,
        });
        graphicLayer.addGraphic(video3D);

        selectedView = video3D; //记录下
      }

      //颜色投放
      function createViewForColor() {
        //取屏幕中心点
        var cartesian = map.getCenter({ format: false });
        if (!cartesian) {
          return;
        }
        var cameraPosition = Cesium.clone(map.scene.camera.position);

        var showFrustum = $("#chkDebugFrustum").is(":checked");
        var opacity = Number($("#txtMixNum").val());

        //构造投射体
        var video3D = new mars3d.graphic.Video3D({
          type: mars3d.graphic.Video3D.Type.Color,
          position: cartesian,
          cameraPosition: cameraPosition,
          style: {
            color: Cesium.Color.CYAN.withAlpha(0.5),
            opacity: opacity,
          },
          showFrustum: showFrustum,
        });
        graphicLayer.addGraphic(video3D);

        selectedView = video3D; //记录下
      }

      //清除
      function clearVideo() {
        graphicLayer.clear();
        selectedView = null;
      }

      //键盘微调控制

      function bindEvnet() {
        $("#chkDebugFrustum").change(function () {
          if (!selectedView) {
            return;
          }

          var showFrustum = $(this).is(":checked");
          selectedView.showFrustum = showFrustum;
        });

        $("#txtMixNum")
          .slider({ min: 0, max: 1, step: 0.1, value: 0.7 })
          .on("change", (e) => {
            if (selectedView && e?.value) {
              selectedView.opacity = e.value.newValue;
            }
          });
        $("#cameraFov")
          .slider({ min: 30, max: 120, step: 0.1, value: 45 })
          .on("change", (e) => {
            if (!selectedView) {
              return;
            }
            selectedView.fovDegree = e.value.newValue;
          });
        $("#cameraWidHei")
          .slider({ min: 0.5, max: 3, step: 0.05, value: 1.6 })
          .on("change", (e) => {
            if (selectedView && e?.value) {
              selectedView.aspectRatio = e.value.newValue;
            }
          });

        $("#btnSelCamera").click(function () {
          if (!selectedView) {
            return;
          }

          map.graphicLayer.startDraw({
            type: "point",
            success: (graphic) => {
              var point = graphic.point;
              graphic.remove(); //删除绘制的点

              selectedView.cameraPosition = point;
            },
          });
        });
        $("#btnSelView").click(function () {
          if (!selectedView) {
            return;
          }

          map.graphicLayer.startDraw({
            type: "point",
            success: (graphic) => {
              var point = graphic.point;
              graphic.remove(); //删除绘制的点

              selectedView.position = point;
            },
          });
        });

        //修改坐标 end

        $("#btnLocate").click(function () {
          if (!selectedView) {
            return;
          }
          selectedView.flyTo();
        });

        $("#btnConsoleJson").click(function () {
          if (!selectedView) {
            return;
          }

          var params = JSON.stringify(selectedView.toJSON());
          console.log(params);
          haoutil.msg(params);
        });

        $("#btnPlayPause").click(function () {
          if (!selectedView) {
            return;
          }

          selectedView.play = !selectedView.play;
        });

        document.addEventListener(
          "keydown",
          function (e) {
            switch (e.keyCode) {
              default:
                break;
              case "A".charCodeAt(0):
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.LEFT);
                break;
              case "D".charCodeAt(0):
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.RIGHT);
                break;
              case "W".charCodeAt(0):
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.TOP);
                break;
              case "S".charCodeAt(0):
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.BOTTOM);
                break;
              case "Q".charCodeAt(0): //Q键
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.ALONG);
                break;
              case "E".charCodeAt(0): //E
                rotateCamera(mars3d.graphic.Video3D.RatateDirection.INVERSE);
                break;
            }
          },
          false
        );
      }

      //微调视频
      function rotateCamera(dir) {
        if (!selectedView) {
          return;
        }

        selectedView.rotateCamera(dir, $("#rotateDeg").val() * 1);

        var cameraFollow = $(this).is(":checked");
        if (cameraFollow) {
          map.camera.direction = selectedView.camera.direction;
          map.camera.right = selectedView.camera.right;
          map.camera.up = selectedView.camera.up;
        }
      }
    </script>
  </body>
</html>