skyversation
/
cesium_example_auth


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html>
  <head>
    <!-- 标题及搜索关键字 -->

    <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,localforage"
    ></script>

    <link href="css/style.css" rel="stylesheet" />
    <style>
      .infoview div {
        margin-bottom: 5px;
      }
    </style>
  </head>

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

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

    <div class="infoview">
      <div>
        模型URL：
        <input id="txtModel" type="text" value="//data.mars3d.cn/gltf/mars/feiji.glb" class="form-control" style="width: 350px" />

        <div class="checkbox checkbox-primary checkbox-inline" title="解决跨域问题">
          <input id="chkProxy" class="styled" type="checkbox" />
          <label for="chkProxy"> 代理 </label>
        </div>
        <input type="button" class="btn btn-primary" title="单击后在地图上点选位置即可" value="标绘" onclick="drawModel()" />
      </div>
      <div>
        <div class="checkbox checkbox-primary checkbox-inline" style="margin-left: 10px">
          <input id="chkHasTerrain" class="styled" type="checkbox" checked />
          <label for="chkHasTerrain"> 地形 </label>
        </div>
        <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,.geojson" style="display: none" />
        <input type="button" class="btn btn-danger" value="清除" onclick="deleteAll()" />
      </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;

      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 url = haoutil.system.getRequestByName("url");
        if (url) {
          //url传入模型地址
          $("#txtModel").val(url);
          console.log("a");
        } else {
          //显示历史数据
          localforage.getItem("g05_draw_gltf").then(function (value) {
            $("#txtModel").val(value);
          });
        }

        var globe = map.scene.globe;

        $("#chkHasTerrain").change(function () {
          var isStkTerrain = $(this).is(":checked");
          map.hasTerrain = isStkTerrain;
        });
        $("#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();
        });
      }

      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 drawModel() {
        var url = $("#txtModel").val();
        localforage.setItem("g05_draw_gltf", url);

        var isProxy = $("#chkProxy").is(":checked");
        if (isProxy) {
          url = "//server.mars3d.cn/proxy/" + url;
        }

        graphicLayer.startDraw({
          type: "model",
          drawShow: true, //绘制时，是否显示模型，可避免在3dtiles上拾取坐标存在问题。
          // editType: 'point', //编辑方式：只调整四周方向和比例
          style: {
            scale: 1,
            url: url,
          },
        });
      }

      //附加：激活属性编辑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>