<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>坡度分析</title>
|
<link href="../SmartEarthSDK/Workers/layui/css/layui.css" rel="stylesheet" />
|
<style>
|
.layui-form-item {
|
width: 90% !important;
|
margin: 5px auto auto;
|
}
|
|
#contour_value .layui-form-item {
|
width: 100% !important;
|
}
|
|
.layui-form-label {
|
/* font-weight: bold !important; */
|
font-size: 0.1rem !important;
|
}
|
|
.layui-input {
|
width: 0.55rem !important;
|
background-color: #fff !important;
|
border: none;
|
font-size: 0.1rem;
|
height: 0.25rem;
|
line-height: 1.3;
|
}
|
|
.iptline {
|
position: absolute;
|
top: 0.1rem;
|
left: 0.6rem;
|
font-size: 0.1rem;
|
}
|
|
#pd_value {
|
display: none;
|
width: 90%;
|
margin: 0.05rem auto !important;
|
}
|
|
#contour_value {
|
display: none;
|
/* border-top: 1px #999 solid !important; */
|
width: 90%;
|
margin: auto;
|
}
|
#contour_value .layui-form-item {
|
width: 90% !important;
|
}
|
|
html::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 0.05rem;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 0.08rem;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
html::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
html::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
</style>
|
</head>
|
|
<body onload="test()">
|
|
<form class="layui-form">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="color: white;font-size: 0.1rem;margin: 0;">地表渲染</label>
|
<div class="layui-input-inline" style="margin-right: 6%;">
|
<input type="checkbox" name="show" lay-filter="pd" id="pd" title="坡度">
|
</div>
|
</div>
|
<div id="pd_value">
|
<div class="layui-form-item"
|
style="display: inline-block;font-size: 0.1rem; color:white">
|
<label class="layui-form-label" style="margin-left: -0.13rem">坡度</label>
|
<div class="layui-input-inline" style="right: -0.5rem;">
|
<input type="text" lay-verify="pass" placeholder="最小值" autocomplete="off" class="layui-input"
|
id="min" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
<span class="iptline">(度)</span>
|
</div>
|
</div>
|
<div class="layui-form-item" style="width: 240px; margin-top: 5px;font-weight: bold;">
|
<div class="layui-input-inline">
|
<input type="text" lay-verify="pass" placeholder="最大值" autocomplete="off" class="layui-input"
|
id="max" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
<span class="iptline">(度)</span>
|
</div>
|
</div>
|
<div class="layui-form-item" style="color:white; border-bottom: 1px #999 solid!important;padding-bottom: 0.2rem;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">颜色</label>
|
<div class="layui-input-inline" style="right: 0.6rem;">
|
<div id="min_color" style="display: inline-block;margin-bottom:0!important;"></div>
|
<span style="margin: 9px;">——</span>
|
<div id="max_color" style="display: inline-block;margin-bottom:0!important;"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="color: white;">等高线</label>
|
<div class="layui-input-inline" style="margin-right: 6%;">
|
<input type="checkbox" name="show" lay-filter="xs" id="xs" title="显示">
|
</div>
|
</div>
|
<div id="contour_value">
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">颜色</label>
|
<div class="layui-input-inline">
|
<div id="colorchk" style="display: inline-block;margin-bottom:0!important;"></div>
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">间隔</label>
|
<div class="layui-input-inline" style="margin-right: 0.68rem;font-size: 0.18rem;">
|
<input type="text" lay-verify="pass" placeholder="0" autocomplete="off" class="layui-input" id="jg"
|
onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline">(米)</span>
|
</div>
|
</div>
|
<div class="layui-form-item" style="margin-top: 0.12rem;font-size: 0.16rem;color: white;">
|
<label class="layui-form-label" style="margin-left: -0.13rem;">线宽</label>
|
<div class="layui-input-inline" style="margin-right: 0.68rem;font-size: 0.18rem;">
|
<input type="text" lay-verify="pass" placeholder="0" autocomplete="off" class="layui-input" id="xk"
|
onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline">px</span>
|
</div>
|
</div>
|
</div>
|
</form>
|
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../SmartEarthSDK/Workers/layui/layui.js"></script>
|
<script>
|
function test() {
|
// console.log(window.screen.availHeight)
|
// console.log(window.screen.availWidth)
|
let htmlDom = document.getElementsByTagName('html')[0]
|
htmlDom.style.fontSize = window.screen.availWidth / 3.75 + 'px';
|
console.log(htmlDom.style.fontSize)
|
}
|
layui.use(['element', 'form', 'upload', 'layer', 'slider', 'colorpicker', 'layer'], function () {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
var form = layui.form;
|
var upload = layui.upload;
|
var layer = layui.layer;
|
var slider = layui.slider;
|
var colorpicker = layui.colorpicker;
|
var layer = layui.layer;
|
var elevationTool = parent.getElevationTool();
|
|
var _min_color = elevationTool.startColor ? elevationTool.startColor : '#ff0000';
|
colorpicker.render({
|
elem: '#min_color'
|
, color: _min_color //设置默认色
|
, done: function (color) {
|
elevationTool.setStartColor(color);
|
}
|
});
|
|
var _max_color = elevationTool.endColor ? elevationTool.endColor : '#0000ff';
|
colorpicker.render({
|
elem: '#max_color'
|
, color: _max_color //设置默认色
|
, done: function (color) {
|
elevationTool.setEndColor(color);
|
}
|
});
|
|
var _colorchk = elevationTool.contourColor ? elevationTool.contourColor : '#ff0000';
|
colorpicker.render({
|
elem: '#colorchk'
|
, color: _colorchk //设置默认色
|
, done: function (color) {
|
elevationTool.setContourColor(color);
|
}
|
});
|
|
$('#min').val(elevationTool.min['slope']);
|
$('#min').on('input propertychange', function (event) {
|
var min = parseFloat($(this).val());
|
if ($("#min").val() === '') {
|
min = 0;
|
}
|
elevationTool.setMin(min);
|
});
|
|
$('#max').val(elevationTool.max['slope']);
|
$('#max').on('input propertychange', function (event) {
|
var max = parseFloat($(this).val());
|
if ($("#max").val() === '') {
|
max = 10000;
|
}
|
elevationTool.setMax(max);
|
});
|
|
$('#jg').val(elevationTool.spacing);
|
$("#jg").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setSpacing(parseFloat($(this).val()));
|
});
|
|
$('#xk').val(elevationTool.width);
|
//设置等高线的线宽
|
$("#xk").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setWidth(parseFloat($(this).val()));
|
});
|
|
//坡度
|
form.on('checkbox(pd)', function (data) {
|
var isChecked = this.checked;
|
if (!isChecked) {
|
parent.Cesium.ExpandBySmartEarth.displaySlopeMap = false;
|
// elevationTool.type = 'none';
|
// $("#pd_value").hide();
|
// if ($("#contour_value").css('display') == 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
// }
|
} else {
|
parent.sgworld.Viewer.scene.globe.showGroundAtmosphere = false;
|
parent.sgworld.Viewer.scene.globe.enableLighting = false;
|
parent.Cesium.ExpandBySmartEarth.displaySlopeMap = true;
|
// elevationTool.type = 'slope';
|
// $("#pd_value").show();
|
// if ($("#contour_value").css('display') != 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 375)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
// }
|
}
|
elevationTool.render();
|
});
|
|
//显示
|
form.on('checkbox(xs)', function (data) {
|
var isChecked = this.checked;
|
elevationTool.tf = isChecked;
|
var pd = parent.Cesium.ExpandBySmartEarth.displaySlopeMap;
|
if (!isChecked) {
|
$("#contour_value").slideUp();
|
// if ($("#pd_value").css('display') == 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 320)
|
// }
|
|
} else {
|
$("#contour_value").slideDown();
|
// if ($("#pd_value").css('display') != 'none') {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 490)
|
// } else {
|
// parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 320)
|
// }
|
}
|
elevationTool.render();
|
parent.Cesium.ExpandBySmartEarth.displaySlopeMap = pd;
|
});
|
|
if (elevationTool.tf && elevationTool.type !== 'slope') {
|
$('#xs').next().click();
|
$('#xs').attr('value', 'on');
|
} else if (!elevationTool.tf && elevationTool.type === 'slope') {
|
$('#pd').next().click();
|
$('#pd').attr('value', 'on');
|
} else if (elevationTool.tf && elevationTool.type === 'slope') {
|
$('#pd').next().click();
|
$('#pd').attr('value', 'on');
|
$('#xs').next().click();
|
$('#xs').attr('value', 'on');
|
}
|
})
|
|
</script>
|
</body>
|
|
</html>
|
