polygonQuery.html 13.7 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="startDrawPolygon()">开始绘制</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>

    <!-- layui的使用 -->
    <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 polyline = null;
        var terrainPolygon = null;

        function startDrawPolygon() {
            var sgworld = CreateSGObj();
            if (null !== polyline) {
                sgworld.ProjectTree.DeleteItem(polyline.ID);
                polyline = null;
            }
            if (null !== terrainPolygon) {
                sgworld.ProjectTree.DeleteItem(terrainPolygon.ID);
                terrainPolygon = null;
            }

            //添加鼠标左键单击事件
            sgworld.AttachEvent("OnLButtonClicked", polygonQuery);
            sgworld.AttachEvent("OnFrame", polygonQueryFrame);
            sgworld.AttachEvent("OnRButtonUp", polygonQueryRButtonUpEvent)
            sgworld.Window.SetInputMode(1, "", true);
        }

        function polygonQuery(Flags, X, Y) {
            var sgWorld = CreateSGObj();
            let lineColor = sgWorld.Creator.CreateColor(255, 100, 0, 255),
                fillColor = sgWorld.Creator.CreateColor(100, 255, 0, 255),
                lineWidth = 1,
                lineOpacity = 1,
                fillOpacity = 0.5,
                wpi = sgWorld.Window.PixelToWorld(X, Y, -1),
                position = wpi.Position.Copy();
            position.Altitude = 1;
            if (!terrainPolygon) {
                if (!polyline) {

                    let lineGeometry = sgWorld.Creator.GeometryCreator.CreateLineStringGeometry(
                        [position, position]
                    );
                    polyline = sgWorld.Creator.CreatePolyline(
                        lineGeometry,
                        lineColor,
                        2,
                        sgWorld.ProjectTree.RootID,
                        "线"
                    );
                    polyline.Geometry.StartEdit();
                } else //当点击第二个点的时候，此时已经可以形成闭合环了
                {
                    let points = polyline.Geometry.Points,
                        ring = sgWorld.Creator.GeometryCreator.CreateLinearRingGeometry(
                            [
                                points.Item(0).X,
                                points.Item(0).Y,
                                1,
                                wpi.Position.X,
                                wpi.Position.Y,
                                1,
                                wpi.Position.X,
                                wpi.Position.Y,
                                1
                            ]
                        ),
                        polygonGeometry = sgWorld.Creator.GeometryCreator.CreatePolygonGeometry(
                            ring,
                            null
                        );
                    terrainPolygon = sgWorld.Creator.CreatePolygon(
                        polygonGeometry,
                        lineColor,
                        fillColor,
                        0,
                        sgWorld.ProjectTree.RootID,
                        "多边形"
                    );
                    terrainPolygon.LineStyle.Width = lineWidth;
                    terrainPolygon.LineStyle.Color.SetAlpha(lineOpacity);
                    terrainPolygon.TreeItem.ShowInViewerTree = true;
                    terrainPolygon.Geometry.StartEdit();
                    polyline.Geometry.EndEdit();
                    sgWorld.ProjectTree.DeleteItem(polyline.ID);
                    polyline = null;
                }
            } else {
                terrainPolygon.Geometry.ExteriorRing.Points.DeletePoint(terrainPolygon.Geometry.ExteriorRing.Points.Count - 1);
                terrainPolygon.Geometry.ExteriorRing.Points.AddPoint(wpi.Position.X, wpi.Position.Y, 1);
                terrainPolygon.Geometry.ExteriorRing.Points.AddPoint(wpi.Position.X, wpi.Position.Y, 1);
            }
        }

        function polygonQueryFrame() {
            let sgWorld = CreateSGObj(),
                teWindow = sgWorld.Window,
                mouseInfo = teWindow.GetMouseInfo(),
                point = teWindow.PixelToWorld(mouseInfo.X, mouseInfo.Y, 0);
            if (polyline) {

                polyline.Geometry.Points.DeletePoint(polyline.Geometry.Points.Count - 1);
                polyline.Geometry.Points.AddPoint(point.Position.X, point.Position.Y, 1);
                return;
            }
            if (!terrainPolygon) return;
            terrainPolygon.Geometry.ExteriorRing.Points.DeletePoint(terrainPolygon.Geometry.ExteriorRing.Points.Count - 1);
            terrainPolygon.Geometry.ExteriorRing.Points.AddPoint(point.Position.X, point.Position.Y, 1);
        }

        function polygonQueryRButtonUpEvent(Flags, X, Y) {
            var SGWorld = new CreateSGObj();
            //结束多边形编辑功能
            SGWorld.DetachEvent("OnLButtonClicked", polygonQuery);
            SGWorld.DetachEvent("OnRButtonUp", polygonQueryRButtonUpEvent);
            SGWorld.DetachEvent("OnFrame", polygonQueryFrame);
            SGWorld.Window.SetInputMode(0, "", true);
            terrainPolygon.Geometry.ExteriorRing.Points.DeletePoint(terrainPolygon.Geometry.ExteriorRing.Points.Count - 1);
            terrainPolygon.Geometry.EndEdit();
            var layerID = $("#layerSelect").val();
            ShowSpatialQueryValue(terrainPolygon, 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 geo = graphic.Geometry;
                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>