skyversation
/
cesium_example_auth


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
							<!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>gltf模型库 </title>

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

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

    <style>
      .infoview div {
        margin-bottom: 5px;
      }

      .divGltfAll,
      .divDrawGltf {
        height: 30px;
        width: 130px;
      }

      .changeDiv {
        position: absolute;
        top: 20px;
      }

      .commonDrawGltf {
        position: absolute;
        top: 140px;
      }
      .commonDrawGltf div {
        margin-bottom: 20px;
      }

      .gltfPullDown {
        position: absolute;
        top: 80px;
        width: 300px;
        height: calc(100% - 160px);
        overflow: hidden;
        border: 1px solid rgba(0, 102, 255, 0.568);
        border-radius: 5px;
        background-color: #353e488e;
      }

      .pullDown select {
        height: 30px;
        width: 90%;
        margin-left: 12px;
        color: white;
        border-radius: 5px;
        background: none;
        line-height: 35px;
      }

      .gltfPullDown select option {
        background-color: #353e488e;
        height: 25px;
        color: white;
      }

      .gltfPullDown select :hover {
        background-color: gray;
      }

      .gltfImg {
        width: 112%;
        height: 95%;
        margin-left: -23px;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .gltfImg li {
        display: inline-block;
        /* margin-left: -25px; */
        margin-right: 25px;
        width: 100px;
        text-align: center;
        padding-bottom: 10px;
      }

      .gltfImg img {
        width: 105px;
        height: 90px;
        border: 1.5px solid white;
      }
    </style>
  </head>

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

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

    <div class="infoview">
      <div class="checkbox checkbox-primary checkbox-inline">
        <input id="chkTestTerrain" class="styled" type="checkbox" />
        <label for="chkTestTerrain"> 深度检测 </label>
      </div>
      <div class="checkbox checkbox-primary checkbox-inline" title="屏蔽拾取地形坐标，避免穿透3dtiles模型">
        <input id="chk_onlyPickModelPosition" class="styled" type="checkbox" />
        <label for="chk_onlyPickModelPosition"> 仅在3dtiles上标绘 </label>
      </div>

      <input id="btnImpFile" type="button" class="btn btn-primary" value="打开" />
      <input id="btnSave" type="button" class="btn btn-primary" value="保存" />
      <input id="input_plot_file" type="file" accept=".json" style="display: none" />
      <input type="button" class="btn btn-danger" value="清除" onclick="deleteAll()" />
    </div>

    <!-- 下拉列表和图片列表的整体 -->
    <div class="infoview gltfPullDown">
      <!-- 下拉列表 -->
      <div class="pullDown">
        <select name="gltfPullDown" onchange="pullDown()"></select>
      </div>
      <!-- 模型图片 -->
      <div class="gltfImg"></div>
    </div>

    <!-- 切换视角到模型或地形（山区）的快捷按钮 -->
    <script type="text/javascript" src="js/center_terrain_3dtiles.js"></script>

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

      var map;
      var graphicLayer;

      var gltfListObj;
      let gltfItemObj;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        var mapOptions = mars3d.Util.merge(options, {
          scene: {
            center: { lat: 30.83351, lng: 116.354467, alt: 2743, heading: 359, pitch: -52 },
            clock: {
              currentTime: "2021-01-01 22:00:00",
            },
          },
        });

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

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

        this.graphicLayer = new mars3d.layer.GraphicLayer({
          hasEdit: true,
          isAutoEditing: true, //绘制完成后是否自动激活编辑
        });
        map.addLayer(graphicLayer);

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

          //控制鼠标只取模型上的点，忽略地形上的点的拾取
          map.onlyPickModelPosition = val;
        });

        //创建完成，事件监听
        graphicLayer.on(mars3d.EventType.drawCreated, function (e) {
          var graphic = e.graphic;
          if (!graphicLayer.isContinued) {
            startEditing(graphic);
          }
        });

        //编辑修改了模型
        graphicLayer.on(
          [mars3d.EventType.editStart, mars3d.EventType.editMovePoint, mars3d.EventType.editStyle, mars3d.EventType.editRemovePoint],
          function (e) {
            var graphic = e.graphic;
            startEditing(graphic);
          }
        );

        //停止编辑修改模型
        graphicLayer.on([mars3d.EventType.editStop, mars3d.EventType.removeGraphic], function (e) {
          stopEditing();
        });

        $("#btnSave").click(function () {
          var strResult = graphicLayer.toGeoJSON();
          if (strResult == null) {
            layer.msg("当前没有标注任何数据，无需保存！");
            return;
          }
          haoutil.file.downloadFile("模型标绘.json", JSON.stringify(strResult));
        });

        $("#input_plot_file").change(function (e) {
          var file = this.files[0];

          var fileName = file.name;
          var fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
          if (fileType != "json") {
            layer.msg("文件类型不合法,请选择json格式标注文件！");
            clearSelectFile();
            return;
          }

          if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onloadend = function (e) {
              var json = this.result;
              graphicLayer.loadGeoJSON(json, {
                clear: true,
                flyTo: true,
              });

              clearSelectFile();
            };
          }
        });

        $("#btnImpFile").click(function () {
          $("#input_plot_file").click();
        });

        queryModelListData()
          .then(function (data) {
            initSelect(data);
          })
          .catch(function () {
            console.log("获取数据失败");
          });
      }
      // 下面是获取模型库的JSON数据
      function queryModelListData() {
        return new Promise(function (resolve, reject) {
          $.ajax({
            url: "//data.mars3d.cn/gltf/list.json",
            type: "GET",
            dataType: "json",
            success: function (data) {
              resolve(data);
            },
            error: function (data) {
              reject(data);
            },
          });
        });
      }

      function clearSelectFile() {
        if (!window.addEventListener) {
          document.getElementById("input_plot_file").outerHTML += ""; //IE
        } else {
          document.getElementById("input_plot_file").value = ""; //FF
        }
      }

      function deleteAll() {
        graphicLayer.clear();
      }

      // 创建下拉列表
      function initSelect(data) {
        gltfListObj = data;

        for (let key in data) {
          let html = `<option value="${key}">${key}(${data[key].length})</option>`;
          $(".pullDown select").append(html);
        }

        changeImgs(0);
      }

      //点击下拉框选项，切换图片列表
      function pullDown() {
        var index = $(".pullDown select option").index($(".pullDown select option:selected"));
        changeImgs(index);
      }

      //点击下拉列表，切换图片列表
      function changeImgs(index) {
        let arrName = Object.keys(gltfListObj);
        let arr = gltfListObj[arrName[index]];

        gltfItemObj = {};

        let html = `<ul>`;
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];

          item.image = mars3d.Util.template(item.image, { gltfServerUrl: "//data.mars3d.cn/gltf" });
          item.style.url = mars3d.Util.template(item.style.url, { gltfServerUrl: "//data.mars3d.cn/gltf" });

          gltfItemObj[i] = item;

          html += `<li onclick="drawGltf(${i})">
                  <img src="${item.image}" alt="${name}"/>
                </li>`;
        }
        html += `</ul>`;

        $(".gltfImg").html(html);
      }
      // 绘制模型
      function drawGltf(index) {
        let item = gltfItemObj[index];
        console.log(item);

        graphicLayer.startDraw({
          type: "model",
          drawShow: true, //绘制时，是否显示模型，可避免在3dtiles上拾取坐标存在问题。
          style: item.style,
        });
      }

      //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
      var timeTik;

      function startEditing(graphic) {
        clearTimeout(timeTik);

        var plotAttr = mars3d.widget.getClass("widgets/plotAttr/widget.js");
        if (plotAttr && plotAttr.isActivate) {
          plotAttr.startEditing(graphic, graphic.coordinates);
        } else {
          mars3d.widget.activate({
            map: map,
            uri: "widgets/plotAttr/widget.js",
            name: "属性编辑",
            graphic: graphic,
            lonlats: graphic.coordinates,
          });
        }
      }

      function stopEditing() {
        timeTik = setTimeout(function () {
          mars3d.widget.disable("widgets/plotAttr/widget.js");
        }, 200);
      }
      //附加：激活属性编辑widget【非必需，可以注释该方法内部代码】
    </script>
  </body>
</html>