skyversation
/
cesium_example_auth


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669
							<!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>3dtiles模型编辑 旋转 拖动 </title>

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

    <link href="css/style.css" rel="stylesheet" />
  </head>

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

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

    <!-- 面板 -->
    <div class="infoview">
      <table class="mars-table">
        <tr>
          <td>模型URL：</td>
          <td colspan="4">
            <input id="txtModel" type="text" value="" class="form-control" style="width: 100%" />
          </td>

          <td>
            <div class="checkbox checkbox-primary checkbox-inline" title="解决跨域问题">
              <input id="chkProxy" class="styled" type="checkbox" />
              <label for="chkProxy"> 代理 </label>
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" class="btn btn-primary" value="加载模型" onclick="resetInput();showModel();" />
          </td>
        </tr>
        <tr>
          <td class="transform">经度：</td>
          <td class="transform">
            <input
              id="txt_x"
              class="form-control"
              type="number"
              min="-180"
              max="180"
              step="0.000001"
              style="width: 120px"
              value="113"
              onchange="updateModel()"
            />
          </td>
          <td class="transform">纬度：</td>
          <td class="transform">
            <input
              id="txt_y"
              class="form-control"
              type="number"
              min="-90"
              max="90"
              step="0.000001"
              style="width: 110px"
              value="31"
              onchange="updateModel()"
            />
          </td>
          <td>高度：</td>
          <td>
            <input id="txt_z" class="form-control" type="number" step="0.1" style="width: 100px" value="0" onchange="updateModel()" />
            <div class="checkbox checkbox-primary checkbox-inline">
              <input id="chkTestTerrain" class="styled" type="checkbox" />
              <label for="chkTestTerrain"> 深度检测 </label>
            </div>
          </td>
        </tr>

        <tr class="transform">
          <td>方向Z(四周)：</td>
          <td title="绕z轴旋转模型">
            <input
              id="txt_rotation_z"
              class="form-control"
              type="number"
              style="width: 120px"
              min="-360"
              max="360"
              step="0.1"
              value="0"
              onchange="updateModel()"
            />
          </td>

          <td>方向X：</td>
          <td title="绕x轴旋转模型">
            <input
              id="txt_rotation_x"
              class="form-control"
              type="number"
              style="width: 110px"
              min="-360"
              max="360"
              step="0.1"
              value="0"
              onchange="updateModel()"
            />
          </td>

          <td>方向Y：</td>
          <td title="绕y轴旋转模型">
            <input
              id="txt_rotation_y"
              class="form-control"
              type="number"
              style="width: 100px"
              min="-360"
              max="360"
              step="0.1"
              value="0"
              onchange="updateModel()"
            />
          </td>
        </tr>

        <tr class="transform">
          <td>缩放比例：</td>
          <td>
            <input
              id="txt_scale"
              class="form-control"
              type="number"
              style="width: 110px"
              min="0.1"
              max="100"
              step="0.1"
              value="1"
              onchange="updateModel()"
            />
          </td>
          <td>变换垂直轴</td>
          <td>
            <select id="txt_axis" class="selectpicker form-control">
              <option value="" selected="selected">默认</option>
              <option value="Z_UP_TO_X_UP">Z轴 -&gt;X轴</option>
              <option value="Z_UP_TO_Y_UP">Z轴 -&gt;Y轴</option>
              <option value="X_UP_TO_Y_UP">X轴 -&gt;Y轴</option>
              <option value="X_UP_TO_Z_UP">X轴 -&gt;Z轴</option>
              <option value="Y_UP_TO_X_UP">Y轴 -&gt;X轴</option>
              <option value="Y_UP_TO_Z_UP">Y轴 -&gt;Z轴</option>
            </select>
          </td>

          <td colspan="2">
            <input type="button" class="btn btn-primary" value="应用参数" onclick="updateModel()" />

            &nbsp;&nbsp;&nbsp;&nbsp;
            <div class="checkbox checkbox-primary checkbox-inline transform">
              <input id="chkIsEditng" class="styled" type="checkbox" />
              <label for="chkIsEditng">
                <b>鼠标拖拽编辑</b>
              </label>
            </div>
          </td>
        </tr>

        <tr>
          <td>显示精度：</td>
          <td>
            <input id="txt_maximumScreenSpaceError"  title="显示精度" />
          </td>
          <td>材质底色：</td>
          <td>
            <input id="txt_luminanceAtZenith"  title="材质底色" />
          </td>
          <td>透明度：</td>
          <td>
            <input id="txt_opacity"  title="透明度：" />
          </td>
        </tr>
      </table>

      <input type="button" class="btn btn-primary" value="视角定位至模型" onclick="locate()" />
      <input type="button" class="btn btn-primary transform" value="查看构件" onclick="updateSceneTree()" />

      <input type="button" class="btn btn-primary" value="保存参数" onclick="saveBookmark()" />
    </div>

    <div id="viewReset" class="infoview" style="overflow: auto; left: 10px; top: 280px; height: calc(100% - 300px); display: none">
      <button id="btn_close" class="btn btn-default" style="margin: 5px 20px">关闭</button>
      <button id="btn_back" class="btn btn-primary" style="margin: 5px 20px; display: none">取消选中</button>
      <ul id="treeOverlays" style="padding: 0"></ul>
    </div>

    <script type="text/javascript" src="./js/TilesEditor.js"></script>

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

      var map;
      let tiles3dLayer;

      var tilesEditor;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {});

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

        //固定光照，避免gltf模型随时间存在亮度不一致。
        map.fixedLight = true;

        //鼠标拖拽编辑，定义在js/TilesEditor.js
        tilesEditor = new TilesEditor({
          map: map,
          moveImg: "img/edit/move.png",
          rotateImg: "img/edit/rotate.png",
        });

        //滑动条
        $("#txt_maximumScreenSpaceError")
          .slider({ min: 0.1, max: 30.0, step: 0.1, value: 8.0 })
          .on("change", (e) => {
            if (tiles3dLayer?.tileset && e?.value) {
              tiles3dLayer.tileset.maximumScreenSpaceError = e.value.newValue;
            }
          });
        $("#txt_luminanceAtZenith")
          .slider({ min: 0.1, max: 3.0, step: 0.1, value: 0.2 })
          .on("change", (e) => {
            if (tiles3dLayer?.tileset && e?.value) {
              tiles3dLayer.tileset.luminanceAtZenith = e.value.newValue;
            }
          });
        $("#txt_opacity")
          .slider({ min: 0.0, max: 1.0, step: 0.1, value: 1.0 })
          .on("change", (e) => {
            if (tiles3dLayer?.tileset && e?.value) {
              tiles3dLayer.opacity = e.value.newValue;
            }
          });

        tilesEditor.on(mars3d.EventType.change, function (event) {
          if (Cesium.defined(event.position)) {
            var pos = event.position;
            var thisZ = Number($("#txt_z").val());
            var position = mars3d.PointUtil.setPositionsHeight(pos, thisZ);

            tilesEditor.position = position;

            tiles3dLayer.center = position;

            var point = mars3d.LatLngPoint.fromCartesian(position);
            console.log(point);
            $("#txt_x").val(point.lng);
            $("#txt_y").val(point.lat);
            $("#txt_z").val(point.alt);

            getConfig();
          } else if (Cesium.defined(event.heading)) {
            tiles3dLayer.rotation_z = event.heading;

            $("#txt_rotation_z").val(event.heading.toFixed(1));

            getConfig();
          }
        });

        $("#chkTestTerrain").change(function () {
          var val = $(this).is(":checked");
          map.scene.globe.depthTestAgainstTerrain = val;
          if (val) {
            toastr.info("深度监测打开后，您将无法看到地下或被地形遮挡的对象。");
          }
        });

        $("#chkIsEditng").change(function () {
          //鼠标拖拽
          var val = $(this).is(":checked");
          tilesEditor.enabled = val;
        });

        //树控件
        initSceneTree();

        //加载数据
        var url = haoutil.system.getRequestByName("url");
        if (url) {
          //加载url传入模型地址
          $("#txtModel").val(url);
        } else {
          //加载历史数据
          localforage
            .getItem("g20_3dtiles_edit_modelMatrix")
            .then(function (item) {
              $("#txtModel").val(item.url);
              $("#txt_luminanceAtZenith").val(item.luminanceAtZenith || 0.2);
              $("#txt_maximumScreenSpaceError").val(8);
              $("#txt_scale").val(item.scale || 1);
              $("#txt_axis").selectpicker("val", item.axis || "");

              item.position = item.position || {};
              $("#txt_x").val(item.position.lng || 0);
              $("#txt_y").val(item.position.lat || 0);
              $("#txt_z").val(item.position.alt || 0);

              item.rotation = item.rotation || {};
              $("#txt_rotation_x").val(item.rotation.x || 0);
              $("#txt_rotation_y").val(item.rotation.y || 0);
              $("#txt_rotation_z").val(item.rotation.z || 0);

              if (item.center) {
                map.setCameraView(item.center);
              }
            })
            .catch(function (err) {
              console.log(err);
            });
        }

        setTimeout(showModel, 1000);
      }

      function removeLayer() {
        if (tiles3dLayer) {
          map.basemap = 2021; //切换到默认卫星底图

          map.removeLayer(tiles3dLayer, true);
          tiles3dLayer = null;
        }
      }

      function showModel() {
        removeLayer();

        //获取参数
        var params = getConfig();
        delete params.center;

        if (!params.url) {
          haoutil.msg("请输入图层URL！");
          return;
        }
        // console.log(params)

        var origin = Cesium.Cartesian3.fromDegrees(117.221579, 31.823746, 35.6);
        var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0));
        var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
        var mScale = Cesium.Matrix4.fromUniformScale(params.scale);
        modelMatrix = Cesium.Matrix4.multiply(modelMatrix, mScale, new Cesium.Matrix4());

        //没有内置位置的模型，使用modelMatrix和updateMatrix 来处理位置和编辑位置。
        tiles3dLayer = new mars3d.layer.TilesetLayer({
          url: params.url,
          modelMatrix: modelMatrix,
          updateMatrix: function (origin, tiles3dLayer) {
            var hpr = new Cesium.HeadingPitchRoll(
              Cesium.Math.toRadians(tiles3dLayer.rotation_z || 0),
              Cesium.Math.toRadians(tiles3dLayer.rotation_x || 0),
              Cesium.Math.toRadians(tiles3dLayer.rotation_y || 0)
            );
            var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
            var mScale = Cesium.Matrix4.fromUniformScale(tiles3dLayer.options.scale);
            modelMatrix = Cesium.Matrix4.multiply(modelMatrix, mScale, new Cesium.Matrix4());
            return modelMatrix;
          },
          highlight: {
            type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
            color: "#00FF00",
          },
          popup: "all",
          flyTo: true,
        });
        map.addLayer(tiles3dLayer);

        //加载完成事件
        tiles3dLayer.on(mars3d.EventType.load, function (event) {
          let tileset = event.tileset;

          //取模型中心点信息
          var locParams = tiles3dLayer.center;
          if (locParams.alt < -1000 || locParams.alt > 10000) {
            locParams.alt = 0; //高度异常数据，自动赋值高度为0
          }

          $("#txt_x").val(locParams.lng.toFixed(6));
          $("#txt_y").val(locParams.lat.toFixed(6));
          $("#txt_z").val(locParams.alt.toFixed(1));

          $("#txt_luminanceAtZenith").val(tileset.luminanceAtZenith);
          $("#txt_maximumScreenSpaceError").val(tileset.maximumScreenSpaceError);

          $(".transform").show();
          $("#txt_rotation_x").val(tiles3dLayer.rotation_x.toFixed(1));
          $("#txt_rotation_y").val(tiles3dLayer.rotation_y.toFixed(1));
          $("#txt_rotation_z").val(tiles3dLayer.rotation_z.toFixed(1)); //旋转角度
          $("#txt_scale").val(tiles3dLayer.scale || 1);
          $("#txt_axis").selectpicker("val", tiles3dLayer.axis);

          tilesEditor.range = tileset.boundingSphere.radius * 0.9;
          tilesEditor.heading = tiles3dLayer.rotation_z;
          tilesEditor.position = tiles3dLayer.position;
        });
      }

      function updateModel() {
        //获取参数
        var params = getConfig();
        params.rotation = params.rotation || {};
        params.rotation.x = params.rotation.x || 0;
        params.rotation.y = params.rotation.y || 0;
        params.rotation.z = params.rotation.z || 0;

        if (tiles3dLayer.transform) {
          tilesEditor.heading = tiles3dLayer.rotation_z;
          tilesEditor.position = tiles3dLayer.position;
        }
        tiles3dLayer.setOptions(params);
      }

      //获取所有参数配置
      function getConfig() {
        var url = $("#txtModel").val();
        var maximumScreenSpaceError = mars3d.Util.formatNum($("#txt_maximumScreenSpaceError").val(), 1);

        var params = {
          name: "模型名称",
          type: "3dtiles",
          url: url,
          maximumScreenSpaceError: maximumScreenSpaceError, // 【重要】数值加大，能让最终成像变模糊
          maximumMemoryUsage: 1024, // 【重要】内存分配变小有利于倾斜摄影数据回收，提升性能体验
          center: map.getCameraView(),
          show: true,
        };

        var x = mars3d.Util.formatNum($("#txt_x").val(), 6);
        if (x) {
          params.position = params.position || {};
          params.position.lng = x;
        }

        var y = mars3d.Util.formatNum($("#txt_y").val(), 6);
        if (y) {
          params.position = params.position || {};
          params.position.lat = y;
        }

        var z = mars3d.Util.formatNum($("#txt_z").val(), 6);
        if (z) {
          params.position = params.position || {};
          params.position.alt = z;
        }

        var rotation_x = mars3d.Util.formatNum($("#txt_rotation_x").val(), 1);
        if (rotation_x) {
          params.rotation = params.rotation || {};
          params.rotation.x = rotation_x;
        }

        var rotation_y = mars3d.Util.formatNum($("#txt_rotation_y").val(), 1);
        if (rotation_y) {
          params.rotation = params.rotation || {};
          params.rotation.y = rotation_y;
        }
        var rotation_z = mars3d.Util.formatNum($("#txt_rotation_z").val(), 1);
        if (rotation_z) {
          params.rotation = params.rotation || {};
          params.rotation.z = rotation_z;
        }

        var luminanceAtZenith = mars3d.Util.formatNum($("#txt_luminanceAtZenith").val(), 1);
        if (luminanceAtZenith != 0.2) {
          params.luminanceAtZenith = luminanceAtZenith;
        }

        var scale = mars3d.Util.formatNum(Number($("#txt_scale").val()) || 1, 1);
        if (scale > 0) {
          params.scale = scale;
        }

        var axis = $("#txt_axis").val();
        // if (axis != "")
        params.axis = axis;

        var isProxy = $("#chkProxy").is(":checked");
        if (isProxy) {
          params.proxy = "//server.mars3d.cn/proxy/";
        }
        //记录到历史
        localforage.setItem("g20_3dtiles_edit_modelMatrix", params);
        return params;
      }

      function resetInput() {
        $("#txt_x").val(0);
        $("#txt_y").val(0);
        $("#txt_z").val(0);
        $("#txt_rotation_x").val(0);
        $("#txt_rotation_y").val(0);
        $("#txt_rotation_z").val(0);
        $("#txt_scale").val(1);
        $("#txt_axis").selectpicker("val", "");

        $("#txt_maximumScreenSpaceError").val(8);
        $("#txt_luminanceAtZenith").val(0.2);
        $("#txt_opacity").val(1.0);
      }

      function saveBookmark() {
        var params = getConfig();
        if (params.axis == "") {
          delete params.axis;
        }
        // console.log(params)

        haoutil.file.downloadFile("3dtiles图层配置.json", JSON.stringify(params));
      }

      function locate() {
        if (tiles3dLayer.tileset?.boundingSphere) {
          map.camera.flyToBoundingSphere(tiles3dLayer.tileset.boundingSphere, {
            offset: new Cesium.HeadingPitchRange(map.camera.heading, map.camera.pitch, tiles3dLayer.tileset.boundingSphere.radius * 2),
          });
        } else {
          map.flyToPoint(tiles3dLayer.position, {
            radius: tiles3dLayer.tileset.boundingSphere.radius * 2,
          });
        }
      }

      //==============显示构件树处理==============================
      function initSceneTree() {
        $("#btn_back").click(function (e) {
          tiles3dLayer.tileset.style = undefined;
          $(this).hide();
        });
        $("#btn_close").click(function (e) {
          $("#viewReset").hide();
        });
        $("#treeOverlays").on("changed.jstree", function (e, data) {
          var node = data.node.original;
          if (node && node.sphere) {
            locateNode(node.eleid, node.sphere);

            $("#btn_back").show();
          }
        });
      }

      function querySceneTreeData(url) {
        var scenetree = url.substring(0, url.lastIndexOf("/") + 1) + "scenetree.json";
        return new Promise(function (resolve, reject) {
          $.ajax({
            url: scenetree,
            type: "get",
            dataType: "json",
            success: function (scene) {
              resolve(scene);
            },
            error: function (data) {
              reject(data);
            },
          });
        });
      }

      function updateSceneTree(scene) {
        $("#viewReset").hide();
        var url = $("#txtModel").val();
        querySceneTreeData(url).then(function (scene) {
          var data = [];
          if (scene.scenes) {
            for (var i = 0; i < scene.scenes.length; i++) {
              var node = scene.scenes[i];
              name2text(node);
              data.push(node);
            }
          } else {
            name2text(scene);
            data.push(scene);
          }

          $("#treeOverlays").data("jstree", false).empty();
          $("#treeOverlays").jstree({
            core: {
              data: data,
              themes: {
                name: "default-dark",
                dots: true,
                icons: true,
              },
            },
          });
          $("#viewReset").show();
        });
      }

      function name2text(o) {
        o.text = o.name;

        //这块为了避免tree控件里的id不统一，所以加改变一下
        o.eleid = o.id;
        o.id = undefined;

        if ((!o.text || o.text.trim() == "") && o.type) {
          o.text = o.type;
        }

        if (o.children) {
          for (var i = 0; i < o.children.length; i++) {
            name2text(o.children[i]);
          }
        }
      }

      //定位
      function locateNode(nodeid, nodesphere) {
        if (nodesphere[3] <= 0) {
          return;
        }

        //构件节点位置
        var center = new Cesium.Cartesian3(nodesphere[0], nodesphere[1], nodesphere[2]);

        //获取构件节点位置，现对于原始矩阵变化后的新位置
        center = tiles3dLayer.getPositionByOrginMatrix(center);

        //飞行过去
        var sphere = new Cesium.BoundingSphere(center, nodesphere[3]);
        map.camera.flyToBoundingSphere(sphere, {
          offset: new Cesium.HeadingPitchRange(map.camera.heading, map.camera.pitch, nodesphere[3] * 1.5),
          duration: 0.5,
        });

        //设置tileset的样式
        tiles3dLayer.style = new Cesium.Cesium3DTileStyle({
          color: {
            conditions: [
              ["${id} ==='" + nodeid + "'", "rgb(255, 255, 255)"],
              ["true", "rgba(255, 200, 200,0.2)"],
            ],
          },
        });
      }
    </script>
  </body>
</html>