添加煤堆时间轴

master

2022-05-31 5b0c1af1ecf60efcf53c68bcecf557b06849e937

 public/hn3d/example/00_hn_new.html

@@ -40,6 +40,40 @@
    .disable {
      pointer-events: none;
    }

    .time_line {
      color: aquamarine;
      border: 1px solid red;
      margin: 0;
      /* position: absolute;
      z-index: 0;
      top: 10px; */
      width: 100%;

    }

    .time_box {
      display: inline-block;
      /* position: absolute; */
      z-index: 10;
      width: 10px;
      height: 10px;
      margin-left: 10px;
      border-radius: 50%;
      background-color: aquamarine;
    }

    .message {
      visibility: hidden;
    }

    .time_box:hover+span {
      visibility: visible;
    }

    #timeline::-webkit-scrollbar {
      display: none;
    }
  </style>
</head>

@@ -68,12 +102,11 @@
    <button type="button" id="test_btn" class="btn btn-primary" style="width: 100%;">测试</button>
    <button type="button" id="point_btn" class="btn btn-primary" style="width: 100%;">煤堆</button>
  </div>
  <!-- <div class="infoview handle" id="time_line">
    <button type="button" class="btn btn-primary" style="width: 100%;">time1</button>
    <button type="button" class="btn btn-primary" style="width: 100%;">time2</button>
    <button type="button" class="btn btn-primary" style="width: 100%;">time3</button>
    <button type="button" class="btn btn-primary" style="width: 100%;">time4</button>
  </div> -->
  <!-- 时间线 -->
  <div id="timeline"
    style="white-space:nowrap;height: 20px;width: 500px;position: absolute;bottom: 100px;left: 100px;overflow: scroll;">
    <!-- <hr class="time_line"> -->
  </div>

  <script src="./js/common.js"></script>
  <script type="text/javascript">
@@ -92,6 +125,7 @@
    }
    var dou_params = []
    var model_list = []
    var point_model = []

    // var data_url = 'http://127.0.0.1:8001/admin/business/devicegroup/getdata?bid='
    var data_url = 'http://47.92.33.19:8001/admin/business/devicegroup/getdata?bid='
@@ -117,6 +151,29 @@
        success: function (data) {
          console.log(data, "ajax_data")
          dou_params = data.data
        },
        error: function (request, textStatus) {

        }
      })
      $.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) {

@@ -364,7 +421,39 @@
        }
      });

      // 点击时间轴切换煤堆模型
      $(".time_box").click(function (e) {
        var index_ = $("#timeline .time_box").index(this);
        $.ajax({
          type: 'get',
          dataType: 'json',
          async: false,//同步
          headers: {
            "Access-Control-Allow-Origin": "*"
            // "Accept": "application/json"
          },
          url: `${data_url}get_point_cloud_NO&index_=${index_}`,
          success: function (data) {
            console.log(data, "NO_data")
            let data_path = data.data[0].data_path
            if (pointPrimitives) {
              console.log("移除")
              pointPrimitives.destroy(true)
            }
            $.ajax({
              url: data_path,
              dataType: 'text',
              success: function (data) {
                addPointCloud(data)
              }
            });
          },
          error: function (request, textStatus) {

          }
        })

      })


      // 请求数据库数据，对斗轮机模型进行操作
@@ -378,20 +467,20 @@
        }
        let item = dou_params[model_no]
        console.log(item)
        var data_path = item.data_path
        console.log("我点击了")
        console.log(pointPrimitives)
        if (pointPrimitives) {
          console.log("移除")
          pointPrimitives.destroy(true)
        }
        $.ajax({
          url: data_path,
          dataType: 'text',
          success: function (data) {
            addPointCloud(data)
          }
        });
        // var data_path = item.data_path
        // console.log("我点击了")
        // console.log(pointPrimitives)
        // if (pointPrimitives) {
        //   console.log("移除")
        //   pointPrimitives.destroy(true)
        // }
        // $.ajax({
        //   url: data_path,
        //   dataType: 'text',
        //   success: function (data) {
        //     addPointCloud(data)
        //   }
        // });
        dou_move(item.longitude, item.latitude, item.elevation, item.heading_angle)

        setTimeout(function () {
@@ -495,7 +584,9 @@
          heading: dou_data.heading
        })
      })

      $("#point_btn").click(function () {
        $("#timeline").toggle();
      })

      $(function () {
        $(".handle > button").click(function () {
@@ -516,33 +607,7 @@
        return newArray;
      }


      // 试加载TXT点云文件


      // 读取TXT文件并将TXT内容转换为数组

      // $.ajax({
      //   url: 'http://112.74.77.127:9100/hn/pointcloud/hn4.txt',
      //   dataType: 'text',
      //   success: function (data) {
      //     addPointCloud(data)
      //   }
      // });


      // $("#point_btn").click(function () {
      //   var data_path = 'http://112.74.77.127:9100/hn/pointcloud/hn.txt'
      //   console.log("我点击了")
      //   $.ajax({
      //     url: data_path,
      //     dataType: 'text',
      //     success: function (data) {
      //       addPointCloud(data)
      //     }
      //   });
      // })

      // 加载点云方法
      function addPointCloud (data) {
        // 申明点渲染集合
        pointPrimitives = map.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());