更改棚内和煤棚视角

fuchengshen

2022-06-14 722473e2b2cd4776a65ba0b620a9710728963611

 public/hn3d/example/00_hn_new.html

@@ -5,20 +5,13 @@
  <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="https://muyao1987.gitee.io/cdn/marsgis.cn/favicon/favicon.ico" />
  <title>教学楼(BIM建模) | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

  <!--第三方lib-->
  <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
@@ -88,9 +81,9 @@
  <div class="infoview">
    <div>
      华能石洞口二厂视角：
      <input type="button" class="btn btn-primary" value="厂区" onclick="centerAtDX1()" />
      <input type="button" class="btn btn-primary" value="煤棚" onclick="centerAtDX2()" />
      <input type="button" class="btn btn-primary" value="棚内" onclick="centerAtDX3()" />
      <input id="changqu_btn" type="button" class="btn btn-primary" value="厂区" />
      <input id="meipeng_btn" type="button" class="btn btn-primary" value="煤棚" />
      <input id="pengnei_btn" type="button" class="btn btn-primary" value="棚内" />
    </div>
  </div>
  <!-- 操作按钮栏 -->
@@ -111,7 +104,7 @@

  <!-- 日历选择框 -->

  <div class="search">
  <div class="search" style="display: none;">
    <div class="container">
      <form action="" class="form-horizontal">
        <fieldset>
@@ -134,6 +127,11 @@
    </div><br />
    <button class="search_time_btn" style="background-color: #394582;">查询</button>
  </div>



  <!-- 煤堆面板,点击时间轴上的点显示对应煤堆信息 -->
  <div id="meidui_message"></div>

  <script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
  <script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
@@ -185,30 +183,8 @@

        }
      })
      // $.ajax({
      //   type: 'get',
      //   dataType: 'json',
      //   async: false,//同步
      //   headers: {
      //     "Access-Control-Allow-Origin": "*"
      //     // "Accept": "application/json"
      //   },
      //   url: `${data_url}get_point_cloud`,
      //   success: function (data) {
      //     console.log(data, "point_data")
      //     point_model = data.data
      //     var time_box_html = ''
      //     for (let i = 1; i < point_model.length; i++) {
      //       time_box_html += `<span class="time_box "></span>
      //       <span class="message">${point_model[i].createTime}</span>`
      //     }
      //     $("#timeline").append(time_box_html)
      //   },
      //   error: function (request, textStatus) {

      //   }
      // })

      // 设置日历面板的时间格式和语言
      $('.form_datetime').datetimepicker({
        language: 'zh-CN',  //设置为中文
        format: 'yyyy-mm-dd hh:ii:00',  //设置日期格式
@@ -222,6 +198,18 @@
      });

    })



    $(document).on('click', function () {
      console.log("ddd")
      $("#meidui_message").css({ display: 'none' })//隐藏
    });

    $("#meidui_message").on('click', function (event) {
      event.stopPropagation();//阻止冒泡
    })

    // 初始化地球参数
    function initMap (options) {
      //合并属性参数，可覆盖config.json中的对应配置
@@ -346,11 +334,29 @@
            show: true,
            rotation: { z: 32 },
            scale: 0.1,
          },
          {
            id: 9,
            name: "test",
            type: "3dtiles",
            url: "../model/ytlhz/tileset.json",
            position: {
              lng: 121.453676,
              lat: 31.417225,
              alt: -118,
            },
            maximumScreenSpaceError: 1,
            maximumMemoryUsage: 1024,
            highlight: {
              type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
              color: "rgba(255,255,255,0)",
            },
            popup: "all",
            show: true,
            scale: 20,
          }
        ],
      });

      // addCustomLayers()


      //创建三维地球场景
@@ -363,12 +369,9 @@
        show: true
      })
      map.addLayer(graphicLayer)
      // 封装斗轮机模型加载方法


      var dou_parent = new Cesium.Entity()
      // 加载斗轮机不同的部件
      var dou1 = new mars3d.graphic.ModelEntity({

        position: [121.406729, 31.467183, 14], // 楼栋位置
        style: {
          url: "http://112.74.77.127:9100/hn/doulunji/dizuo/dizuo.gltf",
@@ -387,6 +390,9 @@
          // url: "https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf",
          scale: 0.6
        },
        poup: '<p>我是斗轮</p>',
        tooltip: '<p>我是斗轮</p>',
        allowDrillPick: false,
      })
      graphicLayer.addGraphic(dou2)

@@ -398,7 +404,9 @@
          runAnimations: true,
          scale: 0.6
        },
        parent: dou_parent
        poup: '<p>我是斗轮</p>',
        tooltip: '<p>我是斗轮</p>',
        allowDrillPick: false,
      })
      graphicLayer.addGraphic(dou3)

@@ -410,8 +418,53 @@
          heading: 0,
          scale: 0.6
        },
        drawShow: false,
        poup: '<p>我是斗轮</p>',
        tooltip: '<p>我是斗轮</p>',
        allowDrillPick: false,
      })
      graphicLayer.addGraphic(dou4)


      var position_dou = new Cesium.CallbackProperty(function (time) {
        return dou3.position
      }, false)
      console.log(position_dou, "position_dou")
      var rectangularSensor = new mars3d.graphic.RectangularSensor({
        // position: [121.406729, 31.467183, 22],
        // position: new Cesium.CallbackProperty(function (time) {
        //   return dou3.position
        // }, false),
        position: position_dou,
        style: {
          heading: 29,
          pitch: 196,
          roll: 98,

          radius: 10, // 传感器的半径
          xHalfAngleDegree: 24, // 传感器水平半角
          yHalfAngleDegree: 55, // 传感器垂直半角

          color: "#00ffff",
          opacity: 0.4,
          lineColor: "#ffffff", // 线的颜色

          showSectorSegmentLines: false,
          showIntersection: false,
          showDomeSurfaces: false,
          showDomeLines: false,
          showLateralSurfaces: false,
          showScanPlane: true, // 是否显示扫描面
          scanPlaneColor: "#00ffff",
          scanPlaneOpacity: 0.9,
          scanPlaneMode: "vertical", // 扫描面模式 垂直vertical/水平horizontal
          scanPlaneRate: 3, // 扫描速率,
          depthTest: true
        },
        // parent: dou3
      })
      graphicLayer.addGraphic(rectangularSensor)



      // 通过ID获取煤棚模型
@@ -433,6 +486,8 @@
        tiejia_model.show = true;
        qiang_ding_model.show = true;
      });

      // 点击隐藏与显示厂区煤棚
      $("#meipeng_qiang_ding").click(function () {
        if (qiang_ding_model.show == false) {
          qiang_ding_model.show = true;
@@ -465,21 +520,35 @@

      // 点击时间轴切换煤堆模型
      $(document).on('click', '.time_box', function (e) {
        console.log(e.target.nextSibling.nextSibling.textContent, "点击")
        e.stopPropagation();//阻止冒泡
        $("#meidui_message").empty()
        let time_ = e.target.nextSibling.nextSibling.textContent;
        // var index_ = $("#timeline .time_box").index(this);
        // console.log(index_)
        let plan_box = ''
        $("#meidui_message").css({ display: 'block' });
        $.ajax({
          type: 'get',
          dataType: 'json',
          async: false,//同步
          headers: {
            "Access-Control-Allow-Origin": "*"
            // "Accept": "application/json"
          },
          url: `${data_url}get_point_cloud_NO&index_=${time_}`,
          url: `${data_url}get_plan_by_time&index_=${time_}`,
          success: function (data) {
            console.log(data, "NO_data")
            if (data.data.length > 0) {
              plan_box = `
            <p class='p_text'><span class='span_text'>煤堆:</span>${data.data[0].plan_name}</p>
            <p class='p_text'><span class='span_text'>煤种:</span>${data.data[0].coal_marker}</p>
            <p class='p_text'><span class='span_text'>重量:</span>${data.data[0].coal_weight}吨</p>
            <p class='p_text'><span class='span_text'>体积:</span>${data.data[0].coal_volume}立方米</p>
            `

              $("#meidui_message").append(plan_box)
            } else {
              plan_box = '暂无数据'
              $("#meidui_message").append(plan_box)
            }

            let data_path = data.data[0].data_path
            if (pointPrimitives) {
              pointPrimitives.destroy(true)
@@ -491,9 +560,9 @@
                addPointCloud(data)
              }
            });

          },
          error: function (request, textStatus) {

          }
        })

@@ -571,10 +640,6 @@







      // 斗轮机旋转
      $("#dou_rote").click(function () {
        // 无动画效果的旋转
@@ -590,13 +655,15 @@
        })
      })

      // 煤堆按钮
      // 煤堆按钮  点击显示与隐藏时间轴和日历
      $("#point_btn").click(function () {
        $("#timeline").css({ display: 'none' })
        $(".search").toggle();
        console.log(search)
      })


      // 给功能按钮添加样式
      $(function () {
        $(".handle > button").click(function () {
          $("button[class='active']").removeAttr("class");
@@ -622,13 +689,14 @@
        pointPrimitives = map.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
        datas = data.split(/\s|[\r\n]/)//将txt每行内容根据空格和换行进行切割
        data_list = datas.map(Number)//将切割后的xyz左边转换为数字格式
        list = group(data_list, 3)//将转换后的数据每六个分为一组
        list = group(data_list, 3)//将转换后的数据每3个分为一组
        // 循环数组，加载点云
        for (var i = 0; i < list.length; i++) {
          // 真真实法
          // 真实参数
          // var hn_lon = Number(list[i][0]) / distance_half + 121.398442;
          // var hn_lat = Number(list[i][1]) / distance_half + 31.460107;
          // var hn_h = 300 - Number(list[i][2]);
          // 缩小煤堆所用参数
          var hn_lon = Number(list[i][0]) / 151319.5 + 121.405902;
          var hn_lat = Number(list[i][1]) / 151319.5 + 31.467607;
          var hn_h = 200 - Number(list[i][2]);
@@ -655,7 +723,7 @@



      // 打开
      // 选择时间显示所选时间段的时间轴
      $(".search_time_btn").click(function () {
        $("#timeline").css({ display: 'block' })
        $("#timeline").empty()
@@ -688,11 +756,44 @@
      })


      $("#changqu_btn").click(function () {
        qiang_ding_model.show = true;
        pati_madao_model.show = true;
        tiejia_model.show = true;
        map.setCameraView({
          lat: 31.460107,
          lng: 121.398442,
          alt: 531.23,
          heading: 33,
          pitch: -23,
        });
      })

      $("#meipeng_btn").click(function () {
        qiang_ding_model.show = true;
        pati_madao_model.show = true;
        tiejia_model.show = true;
        map.setCameraView({
          lat: 31.462920,
          lng: 121.405911,
          alt: 210,
          heading: 356,
          pitch: -20,
        });
      })

      $("#pengnei_btn").click(function () {



        pati_madao_model.show = false;
        tiejia_model.show = false;
        map.setCameraView({
          lat: 31.466055,
          lng: 121.406275,
          alt: 40,
          heading: 7,
          pitch: -14,
        });
      })


      //键盘漫游
@@ -708,40 +809,6 @@








    function centerAtDX1 () {
      map.setCameraView({
        lat: 31.460107,
        lng: 121.398442,
        alt: 531.23,
        heading: 33,
        pitch: -23,
      });
    }

    function centerAtDX2 () {
      map.setCameraView({
        lat: 31.464903,
        lng: 121.404337,
        alt: 210,
        heading: 32,
        pitch: -20,
      });
    }

    function centerAtDX3 () {
      map.setCameraView({
        lat: 31.466355,
        lng: 121.405475,
        alt: 159,
        heading: 2,
        pitch: -18,
      });
    }

  </script>
</body>