contourAnalysis.html 12.4 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="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/JavaScript.js"></script>
    <script src="/static/js/popupJS.js"></script>

    <script src="/static/js/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">

    <link rel="stylesheet" href="/static/css/analysis.css">

    <style>
        /* 更改下拉框的样式 */
        .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: #071424;
            color: #fff;
        }

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

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

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

        /* 绘制按钮的样式 */
        .tiaojian .search-btn {
            width: 100px;
        }
    </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="lineOpacity" lay-verify="number" autocomplete="off" value="1.0"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示样式</label>
                        <div class="layui-input-block">
                            <select name="showStyle" lay-filter="aihao">
                                <option value="0" selected>等高线</option>
                                <option value="1">分层设色图</option>
                                <option value="2">等高线和分层设色图</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">等高线颜色</label>
                        <div class="layui-input-block colorselect">
                            <div id="test3" name="contourColor" 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="interval" lay-verify="title" autocomplete="off" value="100"
                                class="layui-input">
                        </div>
                    </div>
                </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;
        form.render('select');
        form.on('select(layer)', function (data) {
            //layerChange(data.value);
            form.render('select');
        });
        form.on('select(attrName)', function (data) {
            //atteNameChange(data.value);
            form.render('select');
        });

        // colorpicker.render({
        //     elem: '#test3'
        //     , color: 'rgb(68,66,66)'
        //     , format: 'hex' //默认为 hex
        // });
        colorpicker.render({
            elem: '#test3'
            , color: 'rgb(7, 155, 140)'
            , format: 'hex'
            , predefine: true
            , alpha: false
            , done: function (color) {
                // //$('#test-all-input').val(color); //向隐藏域赋值
                // layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem);

                // color || this.change(color); //清空时执行 change
                console.log("颜色" + color);
                mapColor = color;//mapColor在下面的script中定义

            }
            // , change: function (color) {
            //     //给当前页面头部和左侧设置主题色
            //     console.log(color);

            //     // $('.header-demo,.layui-side .layui-nav').css('background-color', color);
            // }
        });


    });

    // $("#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 terrainRctg = null;
    var _Position = null;
    var contourMapList = [];
    var mapColor = "#079b8c";
    function DrawRect() {
        terrainRctg = null;
        _Position = null;
        var SGWorld = CreateSGObj();
        try {
            SGWorld.AttachEvent("OnLButtonClicked", DrawRectLButtonEvent);
            SGWorld.AttachEvent("OnFrame", DrawRectFrameEvent);
            SGWorld.Window.SetInputMode(1, "", true);
        } catch (e) {
            alert(e.message);
        }
    }

    function DrawRectLButtonEvent(Flags, X, Y) {
        var SGWorld = new CreateSGObj();
        if (null == _Position) {
            if (terrainRctg != null) {
                SGWorld.ProjectTree.DeleteItem(terrainRctg.ID);
                terrainRctg = null;
            }
            //将屏幕的像素坐标转化为三位中的世界坐标
            var wpi = SGWorld.Window.PixelToWorld(X, Y, -1);//最后一个可以设置点击的对象是什么类型的 -1为默认值
            if (null == wpi) {
                return false;
            }
            _Position = wpi.Position;
            _Position.Yaw = SGWorld.Navigate.GetPosition(3).Yaw;
        } else {
            //第二次点击结束绘制
            FinishedEdit();
        }
        return false;

    }
    //绘制矩形点下第一个点，然后移动的事件
    function DrawRectFrameEvent() {
        if (_Position == null) return;
        var SGWorld = CreateSGObj();
        var mi = SGWorld.Window.GetMouseInfo();
        var position = SGWorld.Window.PixelToWorld(mi.X, mi.Y, -1).Position;
        var length = _Position.DistanceTo(position);
        var angle = GetAngle(position);
        var width = Math.sin(angle) * length;  /*这里矩形的宽就得到了*/

        var poi1 = _Position.Move(width * -1, _Position.Yaw, 0);  /*两个对角点沿摄像机方向延伸一个宽度*/
        var poi2 = position.Move(width, _Position.Yaw, 0);

        var array = new Array(_Position.X, _Position.Y, 1,
            poi1.X, poi1.Y, 1,
            position.X, position.Y, 1,
            poi2.X, poi2.Y, 1);
        var cRing = SGWorld.Creator.GeometryCreator.CreateLinearRingGeometry(array);
        var cPolygonGeometry = SGWorld.Creator.GeometryCreator.CreatePolygonGeometry(cRing, null);

        if (terrainRctg == null) {
            var nLineColor = 0xFF00FF00;
            var nFillColor = 0xBB00FFFF;
            var eAltitudeTypeCode = 0;
            terrainRctg = SGWorld.Creator.CreatePolygon(cPolygonGeometry, nLineColor, nFillColor, eAltitudeTypeCode, "", "选中区域");
        }
        else {
            terrainRctg.Geometry = cPolygonGeometry;
        }
    }
    function FinishedEdit() {
        _Position = null;
        var SGWorld = new CreateSGObj();
        //获取矩形的左上角和右下角的值
        var points = terrainRctg.Geometry.Rings.Item(0).Points,
            pos0,
            pos1,
            pos2,
            pos3,
            aveYaw,
            rectHeight,
            rectWidth;
        //获取绘制的矩形的四个点坐标，转换为位置
        pos0 = SGWorld.Creator.CreatePosition(
            points.Item(0).X,
            points.Item(0).Y,
            points.Item(0).Z
        );
        pos1 = SGWorld.Creator.CreatePosition(
            points.Item(1).X,
            points.Item(1).Y,
            points.Item(1).Z
        );
        pos2 = SGWorld.Creator.CreatePosition(
            points.Item(2).X,
            points.Item(2).Y,
            points.Item(2).Z
        );
        pos3 = SGWorld.Creator.CreatePosition(
            points.Item(3).X,
            points.Item(3).Y,
            points.Item(3).Z
        );
        //通过四个点位置，计算矩形的Yaw平均值
        aveYaw =
            (pos1.AimTo(pos2).Yaw +
                180 +
                pos2.AimTo(pos1).Yaw +
                pos3.AimTo(pos0).Yaw +
                pos0.AimTo(pos3).Yaw +
                180) /
            4.0;
        rectHeight = pos3.DistanceTo(pos0); //获取绘制的矩形的高度
        rectWidth = pos1.DistanceTo(pos0); //获取绘制的矩形的宽度

        var data = layui.form.val('example');

        let cmType = data.showStyle,
            contourMap = SGWorld.Analysis.CreateContourMap(
                0,
                0,
                0,
                0,
                cmType,
                "",
                "",
                ""
            ); //创建一个等高线图
        //设置等高线图的位置、偏航角、高度、宽度、等高距、等高线颜色、等高线不透明度
        contourMap.Position = terrainRctg.Position;
        contourMap.Position.Yaw = aveYaw;
        contourMap.Depth = rectHeight;
        contourMap.Width = rectWidth;
        contourMap.ContourLinesInterval = parseFloat(data.interval);
        contourMap.ContourLinesColor.FromHTMLColor(mapColor);
        contourMap.ContourLinesColor.SetAlpha(parseFloat(data.lineOpacity));
        SGWorld.ProjectTree.DeleteItem(terrainRctg.ID); //删除绘制的矩形，只保留形成的等高线图
        terrainRctg = null;
        contourMapList.push(contourMap.ID); //向临时对象数组中添加临时对象的ID

        //完成后的鼠标变化与监听
        //SGWorld.ProjectTree.DeleteItem(terrainRctg.ID);
        if (terrainRctg != null)
            terrainRctg = null;
        if (_Position != null)
            _Position = null;
        SGWorld.DetachEvent("OnLButtonClicked", DrawRectLButtonEvent);
        SGWorld.DetachEvent("OnFrame", DrawRectFrameEvent);
        SGWorld.Window.SetInputMode(0, "", true);

    }

    function GetAngle(Poi) {
        var SGWorld = new CreateSGObj();
        var includeAngle = SGWorld.CoordServices.GetAimingAngles(_Position, Poi);
        var angle = includeAngle.Yaw - 90 - _Position.Yaw;
        return (angle / 180 * 3.14);
    }
    //清除生成的矩形等高线分析相关内容
    function ClearContourEvent() {
        var SGWorld = new CreateSGObj();

        for (var i = 0; i < contourMapList.length; i++) {
            SGWorld.ProjectTree.DeleteItem(contourMapList[i]);
        }
        contourMapList.length = 0;
        //SGWorld.ProjectTree.DeleteItem(terrainRctg.ID);
        //if (terrainRctg != null)
        //    terrainRctg = null;
        //if (_Position != null)
        //    _Position = null;
        //SGWorld.DetachEvent("OnLButtonClicked", DrawRectLButtonEvent);
        //SGWorld.DetachEvent("OnFrame", DrawRectFrameEvent);
        //SGWorld.Window.SetInputMode(0, "", true);
    }
</script>

</html>