<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>地形控制</title>
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_2599272_671fgrsk7ev.css">
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
|
<style>
|
.terraindiv {
|
color: white;
|
overflow-x: hidden;
|
overflow-y: auto;
|
padding: 0;
|
}
|
|
.mt-label {
|
height: 30px;
|
color: white;
|
width: 80px;
|
float: left;
|
margin-left: 10px;
|
line-height: 30px;
|
font-size: 12px;
|
}
|
|
.mt-content {
|
height: 30px;
|
color: white;
|
width: 200px;
|
float: left;
|
/* margin-left: 10px; */
|
}
|
|
.mt-row {
|
height: 30px;
|
margin-top: 15px;
|
}
|
|
.form-control {
|
/* display: block; */
|
float: left;
|
margin-left: 5px;
|
width: 180px;
|
height: 30px;
|
padding: 4px 12px;
|
font-size: 14px;
|
line-height: 1.6;
|
background-color: #2c3238;
|
opacity: 0.8;
|
color: #fff;
|
background-image: none;
|
border: 0px solid #e4eaec;
|
border-radius: 3px;
|
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
|
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
}
|
|
.mybtn-blue {
|
color: #fff;
|
background-color: #1E9FFF;
|
border-color: #1E9FFF;
|
}
|
|
.mybtn-yellow {
|
color: #fff;
|
background-color: #FFB800;
|
border-color: #FFB800;
|
}
|
|
|
::-webkit-scrollbar-track {
|
background-color: #F5F5F5;
|
}
|
|
::-webkit-scrollbar {
|
width: 6px;
|
height: 10px;
|
background-color: #F5F5F5;
|
}
|
|
::-webkit-scrollbar-thumb {
|
border-radius: 6px;
|
background-color: #999;
|
}
|
</style>
|
</head>
|
|
<body>
|
|
<div class="terraindiv">
|
<!-- <div class="mt-row">
|
<button type="button" style="margin-left: 20%;" class="layui-btn mybtn layui-btn-sm" onclick="drawPoly()">
|
<i class="layui-icon layui-icon-ok" style="font-size: 15px; color: white;"></i> 添加矩形
|
</button>
|
<button type="button" style="margin-left: 10px;" class="layui-btn mybtn layui-btn-sm" onclick="drawPoly()">
|
<i class="layui-icon layui-icon-ok" style="font-size: 15px; color: white;"></i>添加多边形
|
</button>
|
</div> -->
|
<div class="mt-row">
|
<div class="mt-label">操作模式</div>
|
<div class="mt-content">
|
|
<select id="type" name="type" class="form-control">
|
<option value="1">剖面</option>
|
<option value="2">切块</option>
|
<option value="3">开挖</option>
|
</select>
|
<!-- <input style="margin-top: 8px;margin-left: 5px;" type="radio" title="剖面" name="type" value="1" checked="true">剖面
|
<input style="margin-top: 8px;margin-left: 5px;" type="radio" title="切块" name="type" value="2">切块
|
<input style="margin-top: 8px;margin-left: 5px;" type="radio" title="开挖" name="type" value="3">开挖 -->
|
</div>
|
</div>
|
<div class="mt-row" id="clip">
|
<div class="mt-label">剖切管线：</div>
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="tubeClip" value="1" title="是"
|
checked="">是
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="tubeClip" value="0" title="否">否
|
</div>
|
<div id='cut' style="display: none;">
|
<div class="mt-row">
|
<label class="mt-label">保留方向</label>
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="cut" value="1" title="左侧" checked="">左侧
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="cut" value="0" title="右侧">右侧
|
</div>
|
<div class="mt-row">
|
<label class="mt-label">是否切地球</label>
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="cutEarth" value="1" title="是" checked="">是
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="cutEarth" value="0" title="否">否
|
</div>
|
</div>
|
<div id='dig' style="display: none;">
|
<div class="mt-row">
|
<div class="mt-label">深度(米)：</div>
|
<div class="mt-content">
|
<input type="number" id="terrainheight" autocomplete="off" class="form-control" value="30"
|
style="height: 22px;">
|
</div>
|
</div>
|
<div class="mt-row">
|
<label class="mt-label">开挖方向</label>
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="dig" value="1" title="内部"
|
checked="">内部
|
<input style="margin-top: 8px;margin-left: 30px;" type="radio" name="dig" value="0" title="外部">外部
|
</div>
|
</div>
|
<div class="mt-row">
|
<button id="start" type="button" style="margin-left: 40%;" class="layui-btn mybtn-blue layui-btn-sm"
|
onclick="terrainDraw()">
|
<i class="iconfont icon-kaishi"></i>开始
|
</button>
|
<button id="recovery" type="button" style="display: none;" class="layui-btn mybtn-yellow layui-btn-sm"
|
onclick="terrainRecovery()">
|
<i class="iconfont icon-jieshu"></i>还原
|
</button>
|
</div>
|
<div class="mt-row">
|
<span style="margin-left: 20px;">提示：需要在地球上选择剖切和开挖范围</span>
|
</div>
|
</div>
|
|
|
<script>
|
$("#type").change(function () {
|
// var type=$("input[name='type']:checked").val();
|
var type = $("#type").val();
|
switch (type) {
|
case "1": {
|
$("#clip").show();
|
$('#cut').hide();
|
$("#dig").hide();
|
$("#recovery").hide();
|
$("#start").css('marginLeft', '40%');
|
break;
|
}
|
case "2": {
|
$("#clip").hide();
|
$('#cut').show();
|
$("#dig").hide();
|
$("#recovery").show();
|
$("#start").css('marginLeft', '30%');
|
break;
|
}
|
case "3": {
|
$("#clip").hide();
|
$('#cut').hide();
|
$("#dig").show();
|
$("#recovery").show();
|
$("#start").css('marginLeft', '30%');
|
break;
|
}
|
}
|
});
|
function drawPoly() {
|
var str = "103.28608385902714,39.51995307529395,-3.1397900390562636,103.45316495137635,39.02611380959829,-3.0004824652824635,104.33552251249988,39.0485161197741,-2.539045513812505,104.51975012776849,39.427904677572165,-2.643431964881135,104.3857514295644,39.81857590836721,-2.9207215785495912";
|
var points = [
|
];
|
var ps = str.split(",");
|
for (var i = 0; i < ps.length; i = i + 3) {
|
var p = parent.Cesium.Cartesian3.fromDegrees(ps[i], ps[i + 1]);
|
points.push(p);
|
}
|
parent.digEarth(points);
|
};
|
function reDraw() {
|
parent.clearDraw();
|
}
|
function clearEffect() {
|
// parent.sub_analysis_clear();
|
};
|
function terrainDraw() {
|
var type = $("#type").val();
|
var depth = $("#terrainheight").val();
|
var iscliptube = $("input[name='tubeClip']:checked").val();
|
var isinvert = $("input[name='dig']:checked").val();
|
var iscutearth=$("input[name='cutEarth']:checked").val();
|
var options = {
|
'type': type == 1 ? 'clip' : (type == 2 ? 'cut' : 'dig'),
|
'iscliptube': iscliptube,
|
'isinvert': isinvert,
|
'depth': depth,
|
'iscutearth':iscutearth
|
};
|
parent.drawTerrainDraw(options);
|
}
|
function terrainRecovery() {
|
parent.terrainRecovery();
|
}
|
</script>
|
</body>
|
|
</html>
|
