<!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="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" />
|
|
<!--第三方lib-->
|
<!-- <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
|
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,echarts-liquidfill,mars3d,mars3d-widget,mars3d-esri"></script> -->
|
<script type="text/javascript" src="../lib/include-lib.js?time=20210329" libpath="../lib/"
|
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,echarts-liquidfill,mars3d,mars3d-widget,mars3d-esri"></script>
|
<link href="./css/style.css" rel="stylesheet" />
|
<link rel="stylesheet" href="./css/time_search.css">
|
<link rel="stylesheet" href="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css">
|
<link href="./css/hn.css" rel="stylesheet" />
|
|
<style>
|
.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;
|
}
|
|
#parentDiv {
|
position: absolute;
|
right: 10px;
|
bottom: 100px;
|
width: 300px;
|
height: 500px;
|
}
|
</style>
|
</head>
|
|
<body class="dark">
|
<!--加载前进行操作提示，优化用户体验-->
|
<div id="mask" class="signmask" onclick="removeMask()"></div>
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
<div class="infoview topWindows">
|
<div class="topBox">
|
<div class="topLeft"></div>
|
<div class="topCenter">华能石洞口二厂三维实时重建</div>
|
<div class="topRight">
|
今天是 2022-8-3 星期三
|
</div>
|
</div>
|
</div>
|
|
<div class="infoview bottomWindows">
|
<div>
|
<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>
|
|
|
<!-- <div id="parentDiv"></div> -->
|
|
<!-- 操作按钮栏 -->
|
<div class="infoview infoWindows handle">
|
<button type="button" id="test2" class="btn btn-primary active" style="width: 100%;">煤棚整体</button>
|
<button type="button" id="meipeng" class="btn btn-primary active" style="width: 100%;">煤棚整体</button>
|
<button type="button" id="meipeng_qiang_ding" class="btn btn-primary" style="width: 100%;">墙面棚顶</button>
|
<button type="button" id="meipeng_pati_madao" class="btn btn-primary" style="width: 100%;">爬梯马道</button>
|
<button type="button" id="meipeng_tiejia" class="btn btn-primary" style="width: 100%;">钢结构架</button>
|
<!-- <button type="button" id="meipeng_dimian" class="btn btn-primary" style="width: 100%;">煤棚地面</button> -->
|
|
<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 id="timeline">
|
</div> -->
|
|
|
<!-- 日历选择框 -->
|
|
<div class="infoview infoWindows search" style="display: none">
|
<div class="container">
|
<form action="" class="form-horizontal">
|
<fieldset>
|
<div class="controls input-append date form_datetime" data-date="2019-09-16T05:25:07Z"
|
data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
|
<input size="16" type="text" value="2019-10-01 10:07:00" readonly class="time1">
|
<!-- <span class="add-on"><i class="icon-remove"></i></span> -->
|
<span class="add-on"><i class="icon-th"></i></span>
|
</div>
|
<input type="hidden" id="dtp_input1" value="" />
|
<div class="controls input-append date form_datetime" data-date="2019-09-16T05:25:07Z"
|
data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
|
<input size="16" type="text" value="2019-10-01 12:00:00" readonly class="time2">
|
<!-- <span class="add-on"><i class="icon-remove"></i></span> -->
|
<span class="add-on"><i class="icon-th"></i></span>
|
</div>
|
<input type="hidden" id="dtp_input1" value="" />
|
</fieldset>
|
</form>
|
</div>
|
<button class="search_time_btn" style="background-color: #394582;">查询</button>
|
</div>
|
|
|
|
|
<!-- 煤堆面板,点击时间轴上的点显示对应煤堆信息 -->
|
<div id="meidui_message"></div>
|
<script src="./js/socket.io.js"></script>
|
<script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
|
<script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
|
<script src="./js/common.js"></script>
|
<script type="text/javascript">
|
"use script"; //开发环境建议开启严格模式
|
|
|
var map;
|
var request;
|
var graphicLayer
|
var simu_layer
|
var simu
|
var heading_ = 0
|
var work_ = true
|
var dou_work
|
var dou_data = {
|
lon: 121.406729,
|
lat: 31.467183,
|
height: 14,
|
heading: 70
|
}
|
var dou_params = []
|
var model_list = []
|
var point_model = []
|
var showClockAnimate = false
|
|
// 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='
|
|
const socket_ = io("http://127.0.0.1:8001?token=123");
|
var time_btn = $("#time_line button")
|
var model_no = 0
|
var distance_half = 111319.5;
|
var pointPrimitives = null;
|
var time_mars = $('.mars-pannel')
|
|
|
window.onload = function () {
|
|
var drag = document.querySelectorAll('.search')
|
|
for (var i = 0; i < drag.length; i++) {
|
(function (j) {
|
drag[j].onmousedown = function runs (e) {
|
|
|
var e = e || window.event;
|
var diffX = e.clientX - drag[j].offsetLeft;
|
var diffY = e.clientY - drag[j].offsetTop;
|
|
|
if (typeof drag.setCapture != 'undefined') {
|
drag.setCapture();
|
}
|
// pauseEvent(e);
|
|
// function pauseEvent (e) {
|
// if (e.stopPropagation) e.stopPropagation()
|
// if (e.preventDefault) e.preventDefault();
|
// e.cancelBubble = true;
|
// e.returnValue = false;
|
// return false;
|
// }
|
|
document.onmousemove = function (e) {
|
var e = e || window.event;
|
var left = e.clientX - diffX;
|
var top = e.clientY - diffY;
|
|
if (left < 0) {
|
left = 0;
|
} else if (left > window.innerWidth - drag[j].offsetWidth) {
|
left = window.innerWidth - drag[j].offsetWidth;
|
}
|
if (top < 0) {
|
top = 0;
|
} else if (top > window.innerHeight - drag[j].offsetHeight) {
|
top = window.innerHeight - drag[j].offsetHeight;
|
}
|
|
drag[j].style.left = left + 'px';
|
drag[j].style.top = top + 'px';
|
if (e.preventDefault) {
|
e.preventDefault();
|
}
|
};
|
document.onmouseup = function (e) { //当鼠标弹起来的时候不再移动
|
this.onmousemove = null;
|
this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
|
|
//修复低版本ie bug
|
if (typeof drag[j].releaseCapture != 'undefined') {
|
drag[j].releaseCapture();
|
}
|
|
};
|
};
|
})(i)
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// 页面初始执行的方法
|
$(document).ready(function () {
|
request = haoutil.system.getRequest();
|
console.log(time_btn)
|
|
|
|
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
headers: {
|
"Access-Control-Allow-Origin": "*"
|
// "Accept": "application/json"
|
},
|
url: `${data_url}get_dou_params`,
|
success: function (data) {
|
console.log(data, "ajax_data")
|
dou_params = data.data
|
},
|
error: function (request, textStatus) {
|
|
}
|
})
|
|
// 设置日历面板的时间格式和语言
|
$('.form_datetime').datetimepicker({
|
language: 'zh-CN', //设置为中文
|
format: 'yyyy-mm-dd hh:ii:00', //设置日期格式
|
weekStart: 1,
|
todayBtn: 1,
|
autoclose: 1,
|
todayHighlight: 1,
|
startView: 2,
|
forceParse: 0,
|
showMeridian: 1
|
});
|
|
})
|
|
// widget初始化
|
function initWidget (map) {
|
haoutil.loading.show();
|
|
$.ajax({
|
type: "get",
|
dataType: "json",
|
url: "config/widget.json",
|
timeout: 0,
|
success: function (widgetCfg) {
|
haoutil.loading.hide();
|
|
//url如果有传参时的处理
|
if (haoutil.isutil.isNotNull(request.widget)) {
|
if (request.onlyStart) {
|
widgetCfg.openAtStart = [];
|
}
|
widgetCfg.openAtStart.push({
|
uri: request.widget,
|
name: request.name || "",
|
windowOptions: {
|
closeBtn: !request.onlyStart,
|
},
|
request: request,
|
});
|
map.flyHome({ duration: 0 });
|
}
|
|
//初始化widget管理器
|
mars3d.widget.init(map, widgetCfg, "./"); //tip: 第3个参数支持定义widget目录的相对路径。
|
|
if (window.lastWidgetItem) {
|
activateWidget(lastWidgetItem);
|
lastWidgetItem = null;
|
}
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
haoutil.loading.hide();
|
haoutil.alert("config/widget.json文件加载失败！");
|
},
|
});
|
mars3d.widget.on(mars3d.widget.EventType.activated, function (event) {
|
console.log("激活了widget", event);
|
});
|
mars3d.widget.on(mars3d.widget.EventType.disabled, function (event) {
|
console.log("释放了widget", event);
|
});
|
}
|
|
|
|
// 配置任务事件，激活对应的widget界面进行任务配置
|
function showHistoryPathDetail (logic_id) {
|
if (mars3d.widget.isActivate("widgets/rruRouterReplay/widget.js")) {
|
var detailWiget = mars3d.widget.getClass("widgets/rruRouterReplay/widget.js");
|
detailWiget.reloadData({
|
"logic_id": logic_id
|
});
|
} else {
|
mars3d.widget.activate({
|
uri: "widgets/rruRouterReplay/widget.js",
|
params: {
|
"logic_id": logic_id
|
}
|
});
|
}
|
}
|
|
|
|
|
// 测试socket.io
|
socket_.on("comm", (data) => {
|
console.log(data, "后端推送")
|
})
|
socket_.on("data_push", (data) => {
|
console.log(data, "后端成功推送")
|
})
|
socket_.emit("test", { a: 10, b: 20, c: 30 })
|
socket_.on("connect", (data) => {
|
console.log(data, "用户已连接")
|
})
|
socket_.on("disconnect", (data) => {
|
console.log(data, "用户已断开连接")
|
})
|
socket_.on("test2", (data) => {
|
console.log("test2", data)
|
})
|
|
|
|
|
|
$("#test2").click(function () {
|
socket_.on("comm", (data) => {
|
console.log(data, "后端发送过来的")
|
})
|
socket_.emit("web_push", "123456789")
|
|
const start = Date.now();
|
|
socket.emit("ping", () => {
|
const duration = Date.now() - start;
|
console.log(duration);
|
});
|
})
|
|
|
// 点击页面使时间轴详情页面隐藏
|
$(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中的对应配置
|
var mapOptions = mars3d.Util.merge(options, {
|
scene: {
|
center: {
|
lat: 31.460107,
|
lng: 121.398442,
|
alt: 531.23,
|
heading: 33,
|
pitch: -23,
|
roll: 359.8,
|
},
|
globe: {
|
depthTestAgainstTerrain: false,
|
},
|
},
|
control: {
|
infoBox: false,
|
timeline: true,
|
clockAnimate: false,
|
distanceLegend: { left: "100px", bottom: "27px" }
|
},
|
layers: [
|
{
|
id: 1,
|
name: "华能厂区",
|
type: "3dtiles",
|
url: "../model/Huanengchangqu_0728/tileset.json",
|
position: {
|
lng: 121.403176,
|
lat: 31.467125,
|
alt: -10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,0)",
|
},
|
popup: "all",
|
show: true,
|
scale: 10,
|
},
|
{
|
id: 2,
|
name: "煤棚地面",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_dimian/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 3,
|
name: "爬梯马道",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_pati_madao/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 4,
|
name: "钢架构架",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_tiejia/tileset.json",
|
position: {
|
lng: 121.40613,
|
lat: 31.467183,
|
alt: -48,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
show: true,
|
rotation: { z: 32 },
|
scale: 0.1,
|
},
|
{
|
id: 5,
|
name: "墙面顶棚",
|
type: "3dtiles",
|
url: "../model/meipeng_new/meipeng_qiang_ding/tileset.json",
|
position: {
|
lng: 121.40609,
|
lat: 31.467183,
|
alt: 10,
|
},
|
maximumScreenSpaceError: 1,
|
maximumMemoryUsage: 1024,
|
highlight: {
|
type: mars3d.EventType.click, //默认为鼠标移入高亮，也可以指定click单击高亮
|
color: "rgba(255,255,255,.1)",
|
},
|
popup: "all",
|
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,
|
// }
|
],
|
});
|
|
|
|
|
var eventTarget = new mars3d.BaseClass()
|
//创建三维地球场景
|
map = new mars3d.Map("mars3dContainer", mapOptions);
|
initWidget(map)
|
var clockAnimate = new mars3d.control.ClockAnimate({
|
format: "yyyy-MM-dd HH:mm:ss"
|
})
|
map.addControl(clockAnimate)
|
|
// 添加采集设备模型
|
simu_layer = new mars3d.layer.GraphicLayer({
|
name: "四目设备",
|
show: true
|
})
|
map.addLayer(simu_layer)
|
//获取采集设备信息，根据信息添加模型
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
headers: {
|
"Access-Control-Allow-Origin": "*"
|
// "Accept": "application/json"
|
},
|
url: `${data_url}get_simu`,
|
success: function (data) {
|
console.log(data.data, "simu")
|
for (let i = 0; i < data.data.length; i++) {
|
|
simu = new mars3d.graphic.ModelEntity({
|
|
position: [data.data[i].longitude, data.data[i].latitude, 50], // 楼栋位置
|
|
style: {
|
// url: "http://112.74.77.127:9100/hn/doulunji/dabi/doulunji_dabi.gltf",
|
url: "../model/simu_0322/simu_0322.gltf",
|
scale: 0.005,
|
color: "#ff0000",
|
fill: true
|
},
|
// 弹出框中打开任务下发表单
|
popup: "<br/><p><a href='#' onclick='javascript:showHistoryPathDetail(" + data.data[i].logic_id + ")' >配置任务</a></p>",
|
allowDrillPick: false,
|
})
|
simu_layer.addGraphic(simu)
|
}
|
|
},
|
error: function (request, textStatus) {
|
|
}
|
})
|
|
|
|
try {
|
socket_.on("test_test", (data) => {
|
console.log(data, "新的测试")
|
})
|
|
} catch (err) {
|
console.log("没有接收到")
|
}
|
|
|
|
|
|
|
// Mars3D事件轴组件
|
clockAnimate.on(mars3d.EventType.click, function (event) {
|
if (event.targetType === "label") {
|
console.log("单击了时间文本区域", event)
|
console.log(eventTarget, "eventTarget")
|
|
var startTime = Cesium.JulianDate.toDate(map.clock.startTime)
|
var stopTime = Cesium.JulianDate.toDate(map.clock.stopTime)
|
var currentTime = Cesium.JulianDate.toDate(map.clock.currentTime)
|
|
eventTarget.fire("clickShowClockAnimate", { startTime, stopTime, currentTime })
|
}
|
})
|
|
|
// 创建斗轮机图层
|
graphicLayer = new mars3d.layer.GraphicLayer({
|
name: "斗轮机",
|
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",
|
scale: 0.6,
|
heading: 120
|
}
|
})
|
graphicLayer.addGraphic(dou1)
|
|
var dou2 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
|
style: {
|
url: "http://112.74.77.127:9100/hn/doulunji/dabi/doulunji_dabi.gltf",
|
// url: "https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf",
|
scale: 0.6
|
},
|
popup: "<br/><p><a href='#' onclick='javascript:showHistoryPathDetail(" + "12345" + ")' >配置任务</a></p>",
|
allowDrillPick: false,
|
})
|
graphicLayer.addGraphic(dou2)
|
|
var dou3 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "http://112.74.77.127:9100/hn/doulun_0322/doulun_0322.gltf",
|
runAnimations: true,
|
scale: 0.6
|
},
|
poup: '<p>我是斗轮</p>',
|
allowDrillPick: false,
|
})
|
graphicLayer.addGraphic(dou3)
|
|
var dou4 = new mars3d.graphic.ModelEntity({
|
|
position: [121.406729, 31.467183, 14], // 楼栋位置
|
style: {
|
url: "http://112.74.77.127:9100/hn/doulunji/zhuzhou/zhuzhou.gltf",
|
heading: 0,
|
scale: 0.6
|
},
|
drawShow: false,
|
poup: '<p>我是斗轮</p>',
|
tooltip: '<p>我是斗轮</p>',
|
allowDrillPick: false,
|
})
|
graphicLayer.addGraphic(dou4)
|
|
|
console.log(this.dou3, "dou3")
|
|
|
|
|
// 通过ID获取煤棚模型
|
let other_wall_model = map.getLayer(0, "id");
|
// let changqu_model = map.getLayer(1, "id");
|
let dimian_model = map.getLayer(2, "id");
|
let pati_madao_model = map.getLayer(3, "id");
|
let tiejia_model = map.getLayer(4, "id");
|
let qiang_ding_model = map.getLayer(5, "id");
|
|
|
|
|
// 煤棚部分的显示与隐藏
|
$("#meipeng").click(function () {
|
//other_wall_model.show = true;
|
pati_madao_model.show = true;
|
dimian_model.show = true;
|
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;
|
} else {
|
qiang_ding_model.show = false;
|
}
|
});
|
$("#meipeng_pati_madao").click(function () {
|
if (pati_madao_model.show == false) {
|
pati_madao_model.show = true;
|
} else {
|
pati_madao_model.show = false;
|
}
|
});
|
$("#meipeng_tiejia").click(function () {
|
if (tiejia_model.show == false) {
|
tiejia_model.show = true;
|
} else {
|
tiejia_model.show = false;
|
}
|
});
|
// $("#meipeng_dimian").click(function () {
|
// console.log(dimian_model);
|
// if (dimian_model.show == false) {
|
// dimian_model.show = true;
|
// } else {
|
// dimian_model.show = false;
|
// }
|
// });
|
|
// 点击时间轴切换煤堆模型
|
$(document).on('click', '.time_box', function (e) {
|
e.stopPropagation();//阻止冒泡
|
$("#meidui_message").empty()
|
let time_ = e.target.nextSibling.nextSibling.textContent;
|
let plan_box = ''
|
$("#meidui_message").css({ display: 'block' });
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
headers: {
|
"Access-Control-Allow-Origin": "*"
|
},
|
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)
|
}
|
$.ajax({
|
url: data_path,
|
dataType: 'text',
|
success: function (data) {
|
addPointCloud(data)
|
}
|
});
|
|
},
|
error: function (request, textStatus) {
|
}
|
})
|
|
})
|
|
|
// 请求数据库数据，对斗轮机模型进行操作
|
$("#test_btn").click(function () {
|
// openTimeBox()
|
$("#test_btn").addClass("disable");
|
console.log(dou_params)
|
if (model_no < dou_params.length - 1) {
|
model_no++
|
} else {
|
model_no = 0
|
}
|
let item = dou_params[model_no]
|
dou_move(item.longitude, item.latitude, item.elevation, item.heading_angle)
|
|
setTimeout(function () {
|
$("#test_btn").removeClass("disable");
|
}, 5000);
|
})
|
|
|
time_btn.click(function (e) {
|
for (let i = 0; i < time_btn.length; i++) {
|
console.log(time_btn[i].text)
|
}
|
})
|
// 封装斗轮机工作移动方法
|
function dou_move (lon, lat, h, heading_angle) {
|
dou1.moveTo({
|
position: [lon, lat, h]
|
})
|
dou2.moveTo({
|
position: [lon, lat, h]
|
})
|
dou3.moveTo({
|
position: [lon, lat, h]
|
})
|
dou4.moveTo({
|
position: [lon, lat, h]
|
})
|
dou2.setStyle({
|
heading: heading_angle
|
})
|
dou3.setStyle({
|
heading: heading_angle
|
})
|
dou4.setStyle({
|
heading: heading_angle
|
})
|
}
|
|
|
// 斗轮机工作或暂停（对应斗轮机动画）
|
$("#dou_work").click(function () {
|
if (dou3.options.style.runAnimations == false) {
|
dou3.setStyle({
|
clampAnimations: false,
|
runAnimations: true,
|
direction: true,
|
time: 5
|
})
|
} else {
|
dou3.setStyle({
|
clampAnimations: false,
|
runAnimations: false,
|
direction: true,
|
time: 5
|
})
|
}
|
})
|
|
|
|
|
|
|
|
|
// 斗轮机旋转
|
$("#dou_rote").click(function () {
|
// 无动画效果的旋转
|
dou_data.heading += 20
|
dou2.setStyle({
|
heading: dou_data.heading
|
})
|
dou3.setStyle({
|
heading: dou_data.heading
|
})
|
dou4.setStyle({
|
heading: dou_data.heading
|
})
|
})
|
|
// 煤堆按钮 点击显示与隐藏时间轴和日历
|
$("#point_btn").click(function () {
|
$("#timeline").css({ display: 'none' })
|
$(".search").toggle();
|
// console.log(search)
|
})
|
|
|
// 给功能按钮添加样式
|
$(function () {
|
$(".handle > button").click(function () {
|
$("button[class='active']").removeAttr("class");
|
$(this).addClass("active");
|
});
|
});
|
|
|
|
// group方法可以将一个数组按照指定长度进行分组
|
function group (array, subGroupLength) {
|
let index = 0;
|
let newArray = [];
|
while (index < array.length) {
|
newArray.push(array.slice(index, index += subGroupLength));
|
}
|
return newArray;
|
}
|
|
// 封装加载点云方法
|
function addPointCloud (data) {
|
// 申明点渲染集合
|
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)//将转换后的数据每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]);
|
var color_b = Math.floor(hn_h)
|
if (hn_h <= 50) {
|
color = Cesium.Color.fromCssColorString(`rgba(0, ${color_b}, ${color_b}, 1)`)
|
} else if (hn_h <= 80) {
|
color = Cesium.Color.fromCssColorString(`rgba(${color_b}, 0, ${color_b}, 1)`)
|
} else {
|
color = Cesium.Color.fromCssColorString(`rgba(${color_b}, ${color_b}, 0, 1)`)
|
}
|
var position = Cesium.Cartesian3.fromDegrees(hn_lon, hn_lat, hn_h);
|
pointPrimitives.add({
|
pixelSize: 1,
|
color: color,
|
// outlineColor: Cesium.Color.BLUE,
|
outlineWidth: 0,
|
position: position
|
});
|
|
}
|
}
|
|
|
|
|
// 选择时间显示所选时间段的时间轴
|
$(".search_time_btn").click(function () {
|
$("#timeline").css({ display: 'block' })
|
$("#timeline").empty()
|
let time1 = $(".time1").val()
|
let time2 = $(".time2").val()
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
async: false,//同步
|
headers: {
|
"Access-Control-Allow-Origin": "*"
|
// "Accept": "application/json"
|
},
|
url: `${data_url}get_point_by_time&time1=${time1}&time2=${time2}`,
|
success: function (data) {
|
console.log(data, "point_data")
|
point_model = data.data
|
var time_box_html = ''
|
for (let i = 1; i < point_model.length + 1; i++) {
|
time_box_html += `<span class="time_box"></span>
|
<span class="message">${point_model[i - 1].createTime}</span>`
|
}
|
$("#timeline").append(time_box_html)
|
|
},
|
error: function (request, textStatus) {
|
|
}
|
})
|
})
|
|
|
$("#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,
|
});
|
})
|
|
|
//键盘漫游
|
map.keyboardRoam.setOptions({
|
moveStep: 0.1, //平移步长 (米)。
|
dirStep: 50, //相机原地旋转步长，值越大步长越小。
|
rotateStep: 0.3, //相机围绕目标点旋转速率，0.3-2.0
|
minPitch: 0.1, //最小仰角 0-1
|
maxPitch: 0.95, //最大仰角 0-1
|
});
|
map.keyboardRoam.enabled = true; //开启键盘漫游
|
}
|
|
|
|
|
</script>
|
</body>
|
|
</html>
|
