rectangleQuery.html 11.8 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <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>
    <script src="/static/js/eventJS/search.js"></script>

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

    <style>
        .show-tab-title {
            width: 480px;
            overflow: auto;
            overflow-y: hidden;
        }

        .layui-form {
            height: 50px;
            font-size: 14px;
        }

        .layui-form-item {
            height: 50px;
        }

        .layui-input-block {
            height: 25px;
            font-size: 14px;
            width: 170px;
            margin-left: 80px;
        }

        .layui-form-label {
            float: left;
            padding: 9px 0px;
            text-align: center;
        }

        .tool {
            /* float: left; */
            left: 20px;
        }

        .layui-tab-content {
            padding: 0px;
        }

        .layui-form-label,
        .layui-tab-title {
            color: #FFF;
        }

        .layui-tab-title .layui-this {
            color: aqua;
        }

        .showdiv {
            width: 500px;
            height: 320px;
        }

        .ul {
            width: 480px;
        }
    </style>
</head>

<body marginwidth="0" marginheight="0" onload="init()">
    <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="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">图层选择</label>
                <div class="layui-input-block">
                    <select id="layerSelect" name="interest" lay-filter="aihao">
                        <option value="" selected=""></option>

                    </select>
                </div>

            </div>
        </form>
        <div class="tool">
            <i title="开始绘制" onclick="startDrawRect()">开始绘制</i>
        </div>
        <div class="result layui-tab">
            <h1 class="dialog title">属性展示</h1>
            <div class="show-tab-title">
                <ul class="layui-tab-title">
                    <!-- <li class="layui-this">网站设置</li> -->
                </ul>
            </div>

            <ul class="ul">
                <li class="item">
                    <span class="name">属性名</span>
                    <span class="value">属性值</span>
                </li>
            </ul>
            <div class="layui-tab-content">
                <!-- <div class="layui-tab-item layui-show">
                    <div class="showdiv">
                        <ul class="ul" id="liitems">
                            <li class="item">
                                <span class="name">属性名</span>
                                <span class="value">属性值</span>
                            </li>
                        </ul>
                    </div>
                </div> -->
            </div>


        </div>
    </div>


    <script>
        layui.use(['form', 'element'], function () {
            var $ = layui.jquery
                , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

            //触发事件
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });

            var form = layui.form;
            form.render('select');
        });
    </script>
    <script>
        function init() {
            var sgworld = CreateSGObj();
            ScanTree();
            for (var index = 0; index < layersList.length; index++) {
                var element = layersList[index];
                var str = "<option value=" + element.id + ">" + element.name + "</option>";
                $("#layerSelect").append(str);

            }
        }

        var position = null;
        var terrainRctg = null;

        function startDrawRect() {
            var sgworld = CreateSGObj();
            //添加鼠标左键单击事件
            sgworld.AttachEvent("OnLButtonClicked", rectangleQuery);
            sgworld.AttachEvent("OnFrame", rectangleQueryFrame);
            sgworld.Window.SetInputMode(1, "", true);
        }

        function rectangleQuery(Flags, X, Y) {
            var wpi;
            var sgWorld = CreateSGObj();
            if (null === position) {
                if (null !== terrainRctg) {
                    sgWorld.ProjectTree.DeleteItem(terrainRctg.ID);
                    terrainRctg = null;
                }
                if (!(wpi = sgWorld.Window.PixelToWorld(X, Y, -1))) return false;
                position = wpi.Position;
                position.Yaw = sgWorld.Navigate.GetPosition(3).Yaw;
                return;
            }

            finishedEdit();
            return false;
        }

        function rectangleQueryFrame() {
            // console.log('rectangle');
            if (!position) return;
            var sgWorld = CreateSGObj();
            var mi = sgWorld.Window.GetMouseInfo(),
                pos = sgWorld.Window.PixelToWorld(mi.X, mi.Y, -1).Position,
                length = position.DistanceTo(pos),
                angle = getAngle(pos),
                width = Math.sin(angle) * length,
                poi1 = position.Move(width * -1, position.Yaw, 0),
                poi2 = pos.Move(width, position.Yaw, 0);
            let array = new Array(
                position.X,
                position.Y,
                1,
                poi1.X,
                poi1.Y,
                1,
                pos.X,
                pos.Y,
                1,
                poi2.X,
                poi2.Y,
                1
            ),
                cRing = sgWorld.Creator.GeometryCreator.CreateLinearRingGeometry(
                    array
                ),
                cPolygonGeometry = sgWorld.Creator.GeometryCreator.CreatePolygonGeometry(
                    cRing,
                    null
                );
            if (!terrainRctg) {
                var nLineColor = 0xff00ff00,
                    nFillColor = 0xbb00ffff,
                    eAltitudeTypeCode = 0;
                terrainRctg = sgWorld.Creator.CreatePolygon(
                    cPolygonGeometry,
                    nLineColor,
                    nFillColor,
                    eAltitudeTypeCode,
                    "",
                    "选中区域"
                );
                return;
            }
            terrainRctg.Geometry = cPolygonGeometry;
        }

        function getAngle(Poi) {
            var sgWorld = CreateSGObj();
            var includeAngle = sgWorld.CoordServices.GetAimingAngles(
                position,
                Poi
            );
            var angle = includeAngle.Yaw - 90 - position.Yaw;
            return (angle / 180) * 3.14;
        }
        function finishedEdit() {
            position = null;
            var sgworld = CreateSGObj();
            sgworld.DetachEvent("OnLButtonClicked", rectangleQuery);
            sgworld.DetachEvent("OnFrame", rectangleQueryFrame);
            sgworld.Window.SetInputMode(0, "", true);
            var layerID = $("#layerSelect").val();
            ShowSpatialQueryValue(terrainRctg, layerID);
        }

        //通过传入的图形来进行空间查询(多边形查询的时候有用到)
        function ShowSpatialQueryValue(graphic, layerID) {
            //创建查询
            var SGWorld = CreateSGObj();
            var layer = SGWorld.ProjectTree.GetObject(layerID);
            $(".layui-tab-title").html("");
            $(".layui-tab-content").html("");
            //OT_3D_MESH_LAYER = 38    OT_3D_MESH_FEATURE_LAYER = 39
            if (layer.ObjectType == 38) {
                var featureLayers = layer.FeatureLayers;
                for (var x = 0; x < featureLayers.Count; x++) {
                    var featurelayer = featureLayers.Item(x);
                    var resFeatures = featurelayer.ExecuteSpatialQuery(graphic.Geometry, 1);
                    for (var i = 0; i < resFeatures.Count; i++) {
                        var pIFeature = resFeatures.Item(i);
                        $(".layui-tab-title").append("<li>" + pIFeature.ID + "</li>");//Tab表的表头
                        var strAdd = "<div class='layui-tab-item'><div class='showdiv'><ul class='ul' id='liitems'>";
                        //添加下面的展示面板
                        for (var j = 0; j < pIFeature.FeatureAttributes.Count; j++) {
                            var pIFeatureAttribute = pIFeature.FeatureAttributes.Item(j);
                            strAdd += "<li class='item'><span class='name'>" +
                                pIFeatureAttribute.Name + "</span><span class='value'>" +
                                pIFeatureAttribute.Value + "</span></li>";
                        }
                        strAdd += "</ul></div></div>";
                        $(".layui-tab-content").append(strAdd);
                    }
                }
            }
            //OT_FEATURE_LAYER = 36
            else if (layer.ObjectType == 36) {
                var resFeatures = layer.ExecuteSpatialQuery(graphic.Geometry, 1);

                for (var i = 0; i < resFeatures.Count; i++) {
                    var pIFeature = resFeatures.Item(i);
                    $(".layui-tab-title").append("<li>" + pIFeature.ID + "</li>");//Tab表的表头
                    var strAdd = "<div class='layui-tab-item'><div class='showdiv'><ul class='ul' id='liitems'>";
                    for (var j = 0; j < pIFeature.FeatureAttributes.Count; j++) {
                        var pIFeatureAttribute = pIFeature.FeatureAttributes.Item(j);
                        strAdd += "<li class='item'><span class='name'>" +
                            pIFeatureAttribute.Name + "</span><span class='value'>" +
                            pIFeatureAttribute.Value + "</span></li>";
                    }
                    strAdd += "</ul></div></div>";
                    $(".layui-tab-content").append(strAdd);
                }

            }
            $(".layui-tab-title").children(":first").addClass("layui-this");
            $(".layui-tab-content").children(":first").addClass("layui-show");
        }

    </script>
</body>

</html>