<!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;
|
}
|
|
.layui-input-inline {
|
margin-left: 100px!important;
|
}
|
|
#contour_value .layui-form-item {
|
width: 100% !important;
|
}
|
|
.layui-form-label {
|
font-weight: bold !important;
|
font-size: 15px;
|
}
|
|
.layui-input {
|
width: 153px !important;
|
background-color: #fff !important;
|
}
|
|
.iptline {
|
position: absolute;
|
top: 9px;
|
left: 160px
|
}
|
|
#pd_value {
|
display: none;
|
}
|
|
#contour_value {
|
display: none;
|
width: 90%;
|
margin: auto;
|
}
|
|
.ys,
|
.xk {
|
display: inline-block;
|
width: 48%;
|
}
|
|
.xk label {
|
margin-left: -15px !important;
|
}
|
|
.xk .layui-input-inline {
|
margin-left: 48px !important;
|
}
|
|
.xk input {
|
width: 50px !important;
|
}
|
|
.xk .iptline {
|
left: 60px;
|
}
|
label{
|
color: white;
|
}
|
</style>
|
</head>
|
|
<body>
|
|
<form class="layui-form">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label" style="margin-left: -13px;">地表渲染</label>
|
<div class="layui-input-inline">
|
<input type="checkbox" name="show" lay-filter="pd" id="pd" title="坡度">
|
</div>
|
</div>
|
<div id="pd_value">
|
<div class="layui-form-item"
|
style="width: 240px; margin-top: 12px;font-weight: bold; margin-top: 10px!important;">
|
<label class="layui-form-label" style="margin-left: -13px">坡度</label>
|
<div style="margin-bottom: 10px;width: 114px;margin-left: 97px;">
|
<div style="display: inline-block;">
|
<input type="text" lay-verify="pass" placeholder="min" autocomplete="off" class="layui-input"
|
style="width: 45px !important;border-width: 0px;" id="min"
|
onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
<span style="color: #fff;">—</span>
|
<div style="display: inline-block;">
|
<input type="text" lay-verify="pass" placeholder="max" autocomplete="off" class="layui-input"
|
style="width: 45px !important;border-width: 0px;" id="max"
|
onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<span style="display: inline-block;position: absolute;margin-left: 220px;margin-top: -30px;color: white;">(度)</span>
|
</div>
|
<div class="layui-form-item" style="margin-bottom: 1px!important; border-bottom: 1px #999 solid!important;">
|
<label class="layui-form-label" style="margin-left: -13px;">颜色</label>
|
<div class="layui-input-inline">
|
<div id="min_color" style="display: inline-block;margin-bottom:0!important;"></div>
|
<span style="margin: 2px;color: #fff;">——</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="margin-left: -13px;">等高线</label>
|
<div class="layui-input-inline">
|
<input type="checkbox" name="show" lay-filter="xs" id="xs" title="显示">
|
</div>
|
</div>
|
<div id="contour_value">
|
<div class="layui-form-item" style="width: 240px; margin-top: 10px;font-weight: bold;">
|
<div class='ys'>
|
<label class="layui-form-label" style="margin-left: -13px;">颜色</label>
|
<div class="layui-input-inline">
|
<div id="colorchk" style="display: inline-block;margin-bottom:0!important;"></div>
|
</div>
|
</div>
|
|
<div class='xk'>
|
<label class="layui-form-label" style="width: 30px;">线宽</label>
|
<div class="layui-input-inline">
|
<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>
|
<div class="layui-form-item" style="width: 240px; margin-top: 5px;font-weight: bold;">
|
<label class="layui-form-label" style="margin-left: -13px">间隔</label>
|
<div class="layui-input-inline">
|
<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>
|
</form>
|
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../SmartEarthSDK/Workers/layui/layui.js"></script>
|
<script>
|
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").hide();
|
if ($("#pd_value").css('display') == 'none') {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
} else {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
}
|
} else {
|
$("#contour_value").show();
|
if ($("#pd_value").css('display') != 'none') {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 375)
|
} else {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
}
|
}
|
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>
|
