viewshedAnalysis.html 13.8 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高线分析</title>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <script src="../../js/JavaScript.js"></script>
    <script src="../../js/popupJS.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/analysis.css">

    <style>
        /* form的样式 */
        .layui-form-item {
            margin-bottom: 2px;
        }

        /* 更改下拉框的样式 */
        .layui-form-select .layui-input {
            height: 30px;
            padding-top: 2px;
        }

        .layui-form-select dl dd {
            height: 30px;
            color: black;
        }

        .layui-select-title {
            padding-top: 1px;
        }

        .layui-form-select dl dd.layui-this {
            background-color: midnightblue;
            color: #fff;
        }

        /* 输入框的样式 */
        .layui-input {
            height: 30px;
        }

        .layui-input-block {
            margin-left: 110px;
            margin-right: 40px;
            padding-top: 4px;
        }

        /* 颜色选择器样式 */
        .colorselect {
            float: left;
            min-height: 30px;
            height: 30px;
            width: 30px;
            margin-left: 0px;
        }

        /* 绘制按钮的样式 */
        .tiaojian .short-search-btn {
            width: 80px;
        }
    </style>
</head>

<body marginwidth="0" marginheight="0">
    <div id="mainDiv" class="dialog tiaojian">
        <h1 class="title" onmousedown="MouseDown(event)" onmouseup="MouseUp(event)" onmouseout="MouseUp(event)">
            可视域分析<i class="guanbibtn" onclick="Close()">X</i>
        </h1>
        <form class="main layui-form" ref="contour" action="" label-width="70px" label-position="left"
            lay-filter="example">
            <div class="filter">
                <h1 class="filter-title">参数设置</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">水平张角</label>
                        <div class="layui-input-block">
                            <input type="text" name="angle" id="angle" lay-verify="number" autocomplete="off"
                                value="120" class="layui-input" onchange="valueChanged(0)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">视点高度(m)</label>
                        <div class="layui-input-block">
                            <input type="text" name="height" id="height" lay-verify="number" autocomplete="off"
                                value="3" class="layui-input" onchange="valueChanged(1)">
                        </div>
                    </div>
                </div>
                <h1 class="filter-title">可视区域</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block colorselect">
                            <div id="visualColor" name="visualColor" style="height: 38px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">透明度</label>
                        <div class="layui-input-block">
                            <input type="text" name="visualOpacity" id="visualOpacity" lay-verify="number"
                                autocomplete="off" value="0.5" class="layui-input" onchange="valueChanged(3)">
                        </div>
                    </div>
                </div>
                <h1 class="filter-title">隐藏区域</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block colorselect">
                            <div id="hiddenColor" name="hiddenColor" style="height: 38px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">透明度</label>
                        <div class="layui-input-block">
                            <input type="text" name="hiddenOpacity" id="hiddenOpacity" lay-verify="number"
                                autocomplete="off" value="0.5" class="layui-input" onchange="valueChanged(5)">
                        </div>
                    </div>
                </div>
                <h1 class="filter-title">边框</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">颜色</label>
                        <div class="layui-input-block colorselect">
                            <div id="borderColor" name="borderColor" style="height: 38px;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">透明度</label>
                        <div class="layui-input-block">
                            <input type="text" name="borderOpacity" id="borderOpacity" lay-verify="number"
                                autocomplete="off" value="0.5" class="layui-input" onchange="valueChanged(7)">
                        </div>
                    </div>
                </div>
                <h1 class="filter-title">分析控制</h1>
                <div style="padding:10px;">
                    <button type="button" class="short-search-btn" onclick="startViewshed()">绘制可视域</button>
                    <button type="button" class="short-search-btn" onclick="observation(0)">观察点观察</button>
                    <button type="button" class="short-search-btn" onclick="observation(1)">目标点观察</button>
                </div>


                <!-- <div style="padding:0px 50px;">
                    <button type="button" class="search-btn" id="btnAnalysis" onclick="DrawRect()">绘制范围</button>
                    <button type="button" class="search-btn" id="clearAnalysis"
                        onclick="ClearContourEvent()">清除绘制</button>
                </div> -->
            </div>
        </form>
    </div>
</body>

<script>
    layui.use(['form', 'colorpicker'], function () {
        var $ = layui.jquery,
            colorpicker = layui.colorpicker;


        var form = layui.form;

        colorpicker.render({
            elem: '#visualColor'
            , color: '#16f210'
            , format: 'hex'
            , predefine: true
            , alpha: false
            , done: function (color) {
                //console.log("颜色" + color);
                data.VisibleAreaColor = color;//mapColor在下面的script中定义
                valueChanged(2);
            }
        });
        colorpicker.render({
            elem: '#hiddenColor'
            , color: '#cc0000'
            , format: 'hex'
            , predefine: true
            , alpha: false
            , done: function (color) {
                //console.log("颜色" + color);
                data.HiddenAreaColor = color;//mapColor在下面的script中定义
                valueChanged(4);
            }
        });
        colorpicker.render({
            elem: '#borderColor'
            , color: '#000000'
            , format: 'hex'
            , predefine: true
            , alpha: false
            , done: function (color) {
                // console.log("颜色" + color);
                data.RayColor = color;//mapColor在下面的script中定义
                valueChanged(6);
            }
        });

    });

    // $("#btnAnalysis").on('click', function () {
    //     //表单取值
    //     var form = layui.form;
    //     var co = layui.colorpicker;

    //     var data = form.val('example');
    //     console.log("线不透明度:" + data.lineOpacity);
    //     console.log("显示样式:" + data.showStyle);
    //     console.log("等高距:" + data.interval);

    // });
</script>

<script>
    var gPolyObj = null;
    var data = {};
    function startViewshed() {
        var sgWorld = CreateSGObj();
        sgWorld.AttachEvent("OnLButtonClicked", visual);
        sgWorld.AttachEvent("OnFrame", visualFrame);
        sgWorld.Window.SetInputMode(1, "", true);

        gPolyObj = null;
        data.VisibleAreaColor = '#16f210';
        data.HiddenAreaColor = '#cc0000';
        data.RayColor = '#000000';
        data.visualty = $("#visualOpacity").val();
        data.hidety = $("#hiddenOpacity").val();
        data.bordety = $("#borderOpacity").val();
        data.angle = $("#angle").val();
        data.height = $("#height").val();
        alert(JSON.stringify(data));
    }
    function visual(Flags, X, Y) {
        var sgWorld = CreateSGObj();
        var CursorCoord = sgWorld.Window.pixelToWorld(X, Y);
        if (CursorCoord == null) return false;
        if (gPolyObj == null) {
            var gid = sgWorld.ProjectTree.FindItem("视频监控范围");
            if (gid != sgWorld.ProjectTree.RootID) {
            } else {
                gid = sgWorld.ProjectTree.CreateGroup(
                    "视频监控范围",
                    sgWorld.ProjectTree.RootID
                );
            }
            var pos = sgWorld.Creator.CreatePosition(
                CursorCoord.Position.X,
                CursorCoord.Position.Y,
                CursorCoord.Position.Altitude,
                CursorCoord.Position.AltitudeType,
                0,
                0,
                0,
                0
            );
            gPolyObj = sgWorld.Analysis.Create3DViewshed(
                pos,
                90,
                60,
                10,
                gid,
                "视频监控范围"
            );
            gPolyObj.VisibleAreaColor.FromHTMLColor(
                data.VisibleAreaColor
            ); // 可视区颜色
            gPolyObj.HiddenAreaColor.FromHTMLColor(
                data.HiddenAreaColor
            ); // 隐藏区颜色
            gPolyObj.RayColor.FromHTMLColor(data.RayColor); // 边框色
            gPolyObj.VisibleAreaColor.SetAlpha(parseFloat(data.visualty));
            gPolyObj.HiddenAreaColor.SetAlpha(parseFloat(data.hidety));
            gPolyObj.RayColor.SetAlpha(parseFloat(data.bordety));
            gPolyObj.FieldOfViewX = data.angle;
            gPolyObj.Position.AltitudeType = 0;
            gPolyObj.Position.Altitude = data.height;
            // this.gPolyObj.VisibleAreaColor.SetAlpha = 1;
        } else {
            stop();
            //let data = this.data.data;

        }
    }
    function visualFrame() {
        if (gPolyObj != null) {
            var sgWorld = CreateSGObj();
            var mouseInfo = sgWorld.Window.GetMouseInfo();
            var CursorCoord = sgWorld.Window.pixelToWorld(
                mouseInfo.X,
                mouseInfo.Y
            );
            if (CursorCoord == null) return false;
            var dr = gPolyObj.Position.DistanceTo(CursorCoord.Position);
            dpos = gPolyObj.Position.AimTo(CursorCoord.Position);
            gPolyObj.Distance = dr;
            gPolyObj.Position.Yaw = dpos.Yaw;
        }
    }

    function stop() {
        var sgWorld = CreateSGObj();
        sgWorld.Window.SetInputMode(0, "", true);
        //   queryStatus = 0;
        //   position = undefined;
        sgWorld.DetachEvent("OnLButtonClicked", visual);
        sgWorld.DetachEvent("OnFrame", visualFrame);
        //   currentFunc = undefined;
    }

    function observation(a) {
        var sgWorld = CreateSGObj();
        if (a) {
            var targetPos = gPolyObj.Position.Move(
                gPolyObj.Distance,
                gPolyObj.Position.Yaw,
                gPolyObj.Position.Pitch
            );
            targetPos = targetPos.AimTo(gPolyObj.Position);
            targetPos.ChangeAltitudeType(0);
            sgWorld.Navigate.SetPosition(targetPos);
            return;
        }
        sgWorld.Navigate.SetPosition(gPolyObj.Position);
    }

    function valueChanged(key) {
        if (gPolyObj) {
            switch (key) {
                case 0:
                    data.angle = $("#angle").val();
                    gPolyObj.FieldOfViewX = data.angle;
                    break;
                case 1:
                    data.height = $("#height").val();
                    gPolyObj.Position.Altitude = data.height;
                    break;
                case 2:
                    gPolyObj.VisibleAreaColor.FromHTMLColor(data.VisibleAreaColor); // 可视区颜色
                    break;
                case 3:
                    data.visualty = $("#visualOpacity").val();
                    gPolyObj.VisibleAreaColor.SetAlpha(parseFloat(data.visualty));
                    break;
                case 4:
                    gPolyObj.HiddenAreaColor.FromHTMLColor(data.HiddenAreaColor); // 隐藏区颜色
                    break;
                case 5:
                    data.hidety = $("#hiddenOpacity").val();
                    gPolyObj.HiddenAreaColor.SetAlpha(parseFloat(data.hidety));
                    break;
                case 6:
                    gPolyObj.RayColor.FromHTMLColor(data.RayColor); // 边框色
                    break;
                case 7:
                    data.bordety = $("#borderOpacity").val();
                    gPolyObj.RayColor.SetAlpha(parseFloat(data.bordety));
                    break;
                default:
                    break;
            }

        }
    }
</script>


</html>