<!DOCTYPE html>
|
<html>
|
|
<head>
|
<title>风向图</title>
|
<script type="text/javascript" src="../../lib/include-lib.js" libpath="../../lib/"
|
include="jquery,jquery.minicolors,font-awesome,bootstrap,bootstrap-slider,layer,haoutil,turf,mars3d,mars3d-wind"></script>
|
|
<link href="../../css/style.css" rel="stylesheet" />
|
</head>
|
|
<body class="dark">
|
|
<!-- 面板 -->
|
<div class="infoview">
|
<table class="mars-table">
|
<tr>
|
<td class="nametd">粒子个数：</td>
|
<td>
|
<input id="txt_count" title="粒子个数" />
|
</td>
|
</tr>
|
<tr>
|
<td class="nametd">存活时间：</td>
|
<td>
|
<input id="txt_age" title="存活时间" />
|
</td>
|
</tr>
|
|
<tr>
|
<td class="nametd">移动速率：</td>
|
<td>
|
<input id="txt_speed" title="移动速率" />
|
</td>
|
</tr>
|
|
<tr>
|
<td class="nametd">线宽度：</td>
|
<td>
|
<input id="txt_linewidth" title="线宽度" />
|
</td>
|
</tr>
|
<tr>
|
<td class="nametd">线颜色：</td>
|
<td>
|
<input type="text" id="txtColor" class="form-control" style="width: 100px" value="#ffffff" />
|
</td>
|
</tr>
|
</table>
|
</div>
|
|
<script type="text/javascript">
|
"use script";
|
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget;
|
|
|
$("#txt_count")
|
.slider({ min: 100, max: 10000, step: 1, value: 1000 })
|
.on("change", (e) => {
|
thisWidget.setParticlesNumber(e.value.newValue);
|
});
|
$("#txt_age")
|
.slider({ min: 10, max: 300, step: 1, value: 60 })
|
.on("change", (e) => {
|
thisWidget.setMaxAge(e.value.newValue);
|
});
|
$("#txt_speed")
|
.slider({ min: 1, max: 100, step: 1, value: 60 })
|
.on("change", (e) => {
|
thisWidget.setSpeedRate(e.value.newValue);
|
});
|
$("#txt_linewidth")
|
.slider({ min: 1, max: 10, step: 0.5, value: 1 })
|
.on("change", (e) => {
|
thisWidget.setLineWidth(e.value.newValue);
|
});
|
|
$("#txtColor").minicolors({
|
position: "bottom left",
|
control: "saturation",
|
change: function (hex) {
|
thisWidget.setColor(hex);
|
},
|
});
|
|
|
}
|
|
|
|
|
|
</script>
|
</body>
|
|
</html>
|
