<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<title>等高线分析</title>
|
<link href="../SmartEarthSDK/Workers/layui/css/layui.css" rel="stylesheet" />
|
<style>
|
.layui-form-item {
|
width: 90% !important;
|
margin: 5px auto !important;
|
}
|
|
.layui-input-inline {
|
margin-left: 100px!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
|
}
|
|
#hb_value {
|
display: none;
|
}
|
|
#contour_value {
|
display: none;
|
width: 90%;
|
margin: auto;
|
}
|
|
#contour_value .layui-form-item {
|
width: 100% !important;
|
}
|
|
.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" action="">
|
<div class="layui-form-item" style="margin-bottom: 1px!important;">
|
<label class="layui-form-label" style="margin-left: -13px;">高度渲染</label>
|
<div class="layui-input-inline">
|
<input type="checkbox" name="hb" lay-filter="hb" id="hb" title="海拔">
|
</div>
|
</div>
|
<div id="hb_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: 128px;margin-left: 97px;">
|
<div style="display: inline-block;">
|
<input type="text" lay-verify="pass" placeholder="min" autocomplete="off" class="layui-input"
|
style="width: 53px !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: 53px !important;border-width: 0px;" id="max"
|
onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<span style="display: inline-block;position: absolute;margin-left: 250px;margin-top: -30px;color: white;">(米)</span>
|
</div>
|
<!-- <div class="layui-form-item" style="width: 240px; margin-top: 12px;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="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: 9px;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" id='fxk' lay-filter="fxk" title="显示">
|
</div>
|
</div>
|
<div id="contour_value">
|
<div class="layui-form-item" style="width: 240px; margin-top: 12px;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="lineWidth" onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline" style="color: white;">px</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-form-item" style="width: 240px; margin-top: 12px;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="interval" onkeyup="value=value.replace(/[^\d\.]/g,'')">
|
<span class="iptline" style="color: white;">(米)</span>
|
</div>
|
</div>
|
</div>
|
</form>
|
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../SmartEarthSDK/Workers/layui/layui.js"></script>
|
<!--方法js-->
|
<!--<script> layui.use('form', function () { var form = layui.form; form.render(); }); </script>-->
|
<!--<script src="../../js/Analysis/Analysis.js"></script>-->
|
<script>
|
layui.use(['element', 'form', 'slider', 'colorpicker', 'layer'], function () {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
var form = layui.form;
|
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['elevation']);
|
$('#min').on('input propertychange', function (event) {
|
var min = parseFloat($(this).val());
|
if ($("#min").val() === '') {
|
min = 0;
|
}
|
elevationTool.setMin(min);
|
});
|
|
$('#max').val(elevationTool.max['elevation']);
|
$('#max').on('input propertychange', function (event) {
|
var max = parseFloat($(this).val());
|
if ($("#max").val() === '') {
|
max = 10000;
|
}
|
elevationTool.setMax(max);
|
});
|
|
$('#interval').val(elevationTool.spacing);
|
$("#interval").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setSpacing(parseFloat($(this).val()));
|
});
|
|
$('#lineWidth').val(elevationTool.width);
|
//设置等高线的线宽
|
$("#lineWidth").bind("input propertychange", function (event) {
|
if ($(this).val() === '') return;
|
elevationTool.setWidth(parseFloat($(this).val()));
|
});
|
form.on('checkbox(hb)', function (data) {
|
var isChecked = this.checked;
|
|
if (!isChecked) {
|
elevationTool.type = 'none';
|
$("#hb_value").hide();
|
if ($("#contour_value").css('display') == 'none') {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
} else {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
}
|
} else {
|
elevationTool.type = 'elevation';
|
$("#hb_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(fxk)', function (data) {
|
var isChecked = this.checked;
|
elevationTool.tf = isChecked;
|
if (!isChecked) {
|
$("#contour_value").hide();
|
if ($("#hb_value").css('display') == 'none') {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 160)
|
} else {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
}
|
|
} else {
|
$("#contour_value").show();
|
if ($("#hb_value").css('display') != 'none') {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 375)
|
} else {
|
parent.fnLayerHauto(parent.SmartEarthPopupData.layerProp, 265)
|
}
|
}
|
elevationTool.render();
|
});
|
|
if (elevationTool.tf && elevationTool.type !== 'elevation') {
|
$('#fxk').next().click();
|
$('#fxk').attr('value', 'on');
|
} else if (!elevationTool.tf && elevationTool.type === 'elevation') {
|
$('#hb').next().click();
|
$('#hb').attr('value', 'on');
|
} else if (elevationTool.tf && elevationTool.type === 'elevation') {
|
$('#hb').next().click();
|
$('#hb').attr('value', 'on');
|
$('#fxk').next().click();
|
$('#fxk').attr('value', 'on');
|
}
|
});
|
|
|
</script>
|
</body>
|
|
</html>
|
