<!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>SmartEarth-SDK示例</title>
|
<link rel="stylesheet" href="../layui/css/layui.css">
|
<link rel="stylesheet" href="../css/prop_form.css">
|
<style>
|
html,
|
body,
|
.layui-prop {
|
height: 100% !important;
|
}
|
form{
|
width: 95%;
|
}
|
html {
|
overflow: hidden;
|
}
|
|
.layui-form-item {
|
width: 313px !important;
|
/* border: 1px #14e8de solid;
|
margin-bottom: 0px !important;
|
border-bottom: none; */
|
}
|
|
.layui-input {
|
background-color: #fff !important;
|
height: 30px;
|
margin-top: 5px;
|
}
|
|
.layui-form-label {
|
width: 125px !important;
|
/* padding: 11px 15px !important;
|
border-right: 1px #fff solid;
|
font-weight: bold !important;
|
font-size: 14px;
|
text-align: center; */
|
}
|
|
.layui-input-block {
|
width: 150px !important;
|
margin-left: 150px !important;
|
}
|
|
.mCSB_container {
|
margin-right: 17px !important;
|
}
|
|
legend {
|
text-align: center;
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
margin-top: 20px;
|
}
|
|
.layui-tab-title .layui-this:after {
|
border-bottom: 2px solid rgb(27, 83, 140) !important;
|
}
|
|
.layui-tab-content {
|
padding: 0 !important;
|
}
|
|
.layui-prop {
|
margin-left: 10px;
|
margin-top: 20px;
|
}
|
|
.layui-form-item .line {
|
display: block;
|
}
|
|
.layui-form-item .wall {
|
display: none;
|
}
|
|
.bnt-box {
|
text-align: center;
|
height: 58px;
|
/*/ / border-bottom: 1 px #999 solid;*/
|
}
|
|
.bnt-box button {
|
margin-top: 10px;
|
}
|
|
.fly {
|
display: none;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-prop">
|
<form class="layui-form" action="">
|
<div class="layui-form-item">
|
<label class="layui-form-label">路线名称</label>
|
<div class="layui-input-block">
|
<input id="roadName" type="text" value="" name="roadName" lay-filter="roadName" class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">视角模式</label>
|
<div class="layui-input-block">
|
<select id="sjms" name="sjms" lay-filter="sjms">
|
<option value="0">跟随模型</option>
|
<option value="1">第一人称视角</option>
|
<option value="2">上帝视角</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item norline fly">
|
<label class="layui-form-label">飞行高度</label>
|
<div class="layui-input-block">
|
<input id="cameraHeight" type="text" value="0" name="cameraHeight" lay-filter="cameraHeight"
|
class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item norline fly notGod">
|
<label class="layui-form-label">飞行距离</label>
|
<div class="layui-input-block">
|
<input id="cameraDistance" type="text" value="0" name="cameraDistance" lay-filter="cameraDistance"
|
class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item norline fly notGod">
|
<label class="layui-form-label">俯仰角</label>
|
<div class="layui-input-block">
|
<input id="pitch" type="text" value="0" name="pitch" lay-filter="pitch" class="layui-input"
|
onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">漫游模型</label>
|
<div class="layui-input-block">
|
<button onclick="FHK('node_modules/FHK/library/library.html',FHKCb)"
|
style="height: 30px;line-height: 30px;margin-top: 5px;" type="button" class="layui-btn"
|
id="upload-cylinder">选择文件
|
</button>
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">是否显示模型</label>
|
<div class="layui-input-block">
|
<input id="showModel" type="checkbox" lay-skin="switch" lay-filter="showModel" value="off"
|
lay-text="是|否">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">是否显示路线</label>
|
<div class="layui-input-block">
|
<input id="showLine" type="checkbox" lay-skin="switch" lay-filter="showLine" value="off"
|
lay-text="是|否">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">路线高程</label>
|
<div class="layui-input-block">
|
<input id="lineHeight" type="text" value="0" name="lineHeight" lay-filter="lineHeight"
|
class="layui-input">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">是否循环漫游</label>
|
<div class="layui-input-block">
|
<input id="isLoop" type="checkbox" lay-skin="switch" lay-filter="isLoop" value="off" lay-text="是|否">
|
</div>
|
</div>
|
</form>
|
</div>
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../layui/layui.js"></script>
|
|
<script>
|
/// <reference path="sjcs.js" />
|
var fly = null;
|
var sgworld = parent.sgworld;
|
var routeData = parent.PathAnimationData.selectRouteData;
|
var ratio = 0;
|
var geometry = routeData.geojson.geometry.coordinates;
|
var line = sgworld.Creator.createPolyline(geometry, "#ffff00", 1, 0, "线");
|
parent.PathAnimationData.showLine = line.item;
|
sgworld.Navigate.flyToObj(line.item);
|
|
layui.use(['form', 'element'], function () {
|
var form, element;
|
form = layui.form;
|
element = layui.element;
|
|
if (routeData.range) {
|
document.getElementById("cameraDistance").value = routeData.range;
|
}
|
if (routeData.height) {
|
document.getElementById("cameraHeight").value = routeData.height;
|
}
|
if (routeData.pitch) {
|
document.getElementById("pitch").value = routeData.pitch;
|
}
|
if (routeData.lineHeight) {
|
document.getElementById("lineHeight").value = routeData.lineHeight;
|
}
|
document.getElementById("roadName").value = routeData.name;
|
|
$('#roadName').on('input propertychange', function (event) {
|
routeData && (routeData.name = $(this).val());
|
});
|
if (routeData.mode) {
|
$('#sjms option[value="' + routeData.mode + '"]').attr('selected', '');
|
form.render();
|
switch (routeData.mode) {
|
case 1:
|
$('.fly').show();
|
break;
|
case 2:
|
$('.fly').show();
|
$('.notGod').hide();
|
break;
|
}
|
}
|
form.on('select(sjms)', function (data) {
|
if (data.value === "0") {
|
routeData && (routeData.mode = 0);
|
$('.fly').hide();
|
} else if (data.value === "1") {
|
routeData && (routeData.mode = 1);
|
$('.fly').show();
|
} else if (data.value === "2") {
|
routeData && (routeData.mode = 2);
|
$('.fly').show();
|
$('.notGod').hide();
|
}
|
});
|
$('#cameraDistance').on('input propertychange', function (event) {
|
var distance = $(this).val().replace(/[^\d\.\-]/g, '');
|
routeData && (routeData.range = parseFloat(distance));
|
});
|
$('#cameraHeight').on('input propertychange', function (event) {
|
var height = $(this).val().replace(/[^\d\.\-]/g, '');
|
routeData && (routeData.height = parseFloat(height));
|
});
|
$('#pitch').on('input propertychange', function (event) {
|
var pitch = $(this).val().replace(/[^\d\.\-]/g, '');
|
routeData && (routeData.pitch = parseFloat(pitch));
|
});
|
$('#lineHeight').on('input propertychange', function (event) {
|
var lineHeight = $(this).val().replace(/[^\d\.\-]/g, '');
|
routeData && (routeData.lineHeight = parseFloat(lineHeight));
|
});
|
if (routeData.showModel) {
|
$('#showModel').next().click();
|
$('#showModel').attr('value', 'on');
|
}
|
form.on('switch(showModel)', function (data) {
|
routeData && (routeData.showModel = this.checked);
|
});
|
if (routeData.showLine) {
|
$('#showLine').next().click();
|
$('#showLine').attr('value', 'on');
|
}
|
form.on('switch(showLine)', function (data) {
|
routeData && (routeData.showLine = this.checked);
|
});
|
if (routeData.isLoop) {
|
$('#isLoop').next().click();
|
$('#isLoop').attr('value', 'on');
|
}
|
form.on('switch(isLoop)', function (data) {
|
routeData && (routeData.isLoop = this.checked);
|
});
|
});
|
|
function FHK(url, fn) {
|
window.parent.libraryFn(url, fn);
|
}
|
|
//符号库回调函数
|
function FHKCb(url) {
|
routeData && (routeData.url = url);
|
}
|
</script>
|
</body>
|
|
</html>
|
