空间查询

liuyg

2021-06-23 562a250ed18bd862702991d86437703d94cc16c3

空间查询

 config.json

@@ -260,6 +260,10 @@
      {
        "name": "方量分析",
        "uri": "widgets/volumeAnalysis/Widget"
      },
      {
        "name": "空间查询",
        "uri": "widgets/spatialQuery/Widget"
      }
    ],
    "groups": [],

 widgets/modelDiagram/Widget.js

@@ -115,7 +115,7 @@
                            , id: 104
                            , num: [3, 3, 1, 1]
                        }, {
                            title: '牛奶车动画'
                            title: '牛奶车'
                            , value: './images/gltf/CesiumMilkTruck.glb'
                            , id: 105
                            , num: [3, 3, 1, 1]

 widgets/null/Widget.js

@@ -32,12 +32,12 @@

            },
            beginNull: function () {
                console.log('kaishi');
                console.log(`${this.name}--kaishi`);
                var that = this;

            },
            closesNull: function (froms) {
                console.log('guanbi');
                console.log(`${this.name}--guanbi`);
            },
            onOpen: function () {


 widgets/null/css/style.css

@@ -24,4 +24,19 @@

.jimu-widget-null .closeOUR:hover {
  color: red;
}
}

/* .jimu-widget-null .but {
  line-height: 30px;
  width: 80px;
  height: 30px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 2px 2px 15px -5px #378ef1;
   border: 1px solid transparent;
  background-color: #fff;
}

.jimu-widget-null .but:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
} */

 widgets/searchL/Widget.html

@@ -1,9 +1,10 @@
<div>
    <div class="ccsliu"></div>
    <div id="i-f-gjz" class="input-font"
        style="border-radius: 5px 0 0px 5px;width:4.7rem;background-color: #3E9FFC;color: #fff;">关键字</div>
    <div id="i-f-zb" class="input-font" style="width:3.5rem">坐标</div>
    <!-- <input type="text" placeholder="输入关键字以搜索" class="input-sm /> -->
    <input id="local_data" autocomplete="off"  data-provide="typeahead" type="text" class="input-sms"
    <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sms"
        placeholder="输入关键字以搜索: 鄱阳湖" />
    <div id="inputTwo">
        <input id="local_data1" autocomplete="off" data-provide="typeahead" type="number" class="input-sms1"

 widgets/searchL/Widget.js

@@ -33,6 +33,51 @@
            startup: function () {
                var that = this;

                function createTooltip(frameDiv) {//抄录createTooltip函数

                    var tooltip = function (frameDiv) {

                        var div = document.createElement('DIV');
                        div.className = "twipsy right";

                        var arrow = document.createElement('DIV');
                        arrow.className = "twipsy-arrow";
                        div.appendChild(arrow);

                        var title = document.createElement('DIV');
                        title.className = "twipsy-inner";
                        div.appendChild(title);

                        this._div = div;
                        this._title = title;
                        this.message = '';

                        // add to frame div and display coordinates
                        frameDiv.appendChild(div);
                        var that = this;
                        div.onmousemove = function (evt) {
                            that.showAt({ x: evt.clientX, y: evt.clientY }, that.message);
                        };
                    };

                    tooltip.prototype.setVisible = function (visible) {
                        this._div.style.display = visible ? 'block' : 'none';
                    };

                    tooltip.prototype.showAt = function (position, message) {
                        if (position && message) {
                            this.setVisible(true);
                            this._title.innerHTML = message;
                            this._div.style.left = position.x + 10 + "px";
                            this._div.style.top = (position.y - this._div.clientHeight / 2) + "px";
                            this.message = message;
                        }
                    };

                    return new tooltip(frameDiv);
                }
                window.MYcreateTooltip = createTooltip;//全局使用

                //关键词&&坐标
                $("#i-f-gjz").click(function () {
                    that.states = 'one';
@@ -230,7 +275,7 @@
                this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            // 注册鼠标左键单击事件
            clickHand: function clickHand(data) {
            clickHand: function clickHand(data) {// 全局鼠标点击图标事件 渲染地图图标时 添加个相对应的数组储存该对象数据 通过数组是否存在判断点击的项目
                var pickedObjects = this.map.scene.drillPick(data.position) || 0;
                // console.log(pickedObjects);
                if (pickedObjects.length != 0) {
@@ -299,6 +344,16 @@

                        } else if (pickedObjects[0].primitive.id.SQLData != undefined) {//SQL查询图标点击事件
                            // console.log('SQLData')
                        } else if (pickedObjects[0].primitive.id.spatialQueryData != undefined) {//SQL查询图标点击事件
                            var data = pickedObjects[0].primitive.id.spatialQueryData;
                            data.name = pickedObjects[0].primitive.id.name;
                            data.dom = pickedObjects[0].primitive.id.description;
                            // console.log(data);
                            var doms = $('#spatialQueryValuemain');
                            var domo = $('#spatialQueryValue');
                            doms.empty();
                            doms.append('<div>name:' + data.name + '<div/>' + data.dom._value);
                            domo.show();
                        }
                    }
                }

 widgets/searchL/css/style.css

@@ -19,6 +19,15 @@
  align-items: center;
}

.jimu-widget-searchL .ccsliu {
  position: fixed;
  top: 0;
  background-color: transparent;
  width: 20px;
  height: 20px;
  cursor: help;
}

.jimu-widget-searchL .input-font {
  /* width: 3rem; */
  height: 35px;
@@ -63,8 +72,7 @@
  height: calc(100% - 40px);
}

.jimu-widget-searchL .searchLMain .layui-tab-content .layui-tab-item,
.jimu-widget-searchL .searchLMain .layui-tab-content .layui-tab-item .layui-form {
.jimu-widget-searchL .searchLMain .layui-tab-content .layui-tab-item, .jimu-widget-searchL .searchLMain .layui-tab-content .layui-tab-item .layui-form {
  height: 100%;
}

@@ -95,28 +103,24 @@
  border-left: 1px solid rgba(0, 0, 0, .2);
}

.jimu-widget-searchL .input-sms1::-webkit-input-placeholder,
.jimu-widget-searchL .input-sms::-webkit-input-placeholder {
.jimu-widget-searchL .input-sms1::-webkit-input-placeholder, .jimu-widget-searchL .input-sms::-webkit-input-placeholder {
  color: #afafaf;
  font-size: 14px;
}

.jimu-widget-searchL .input-sms1::-moz-placeholder,
.jimu-widget-searchL .input-sms::-moz-placeholder {
.jimu-widget-searchL .input-sms1::-moz-placeholder, .jimu-widget-searchL .input-sms::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #afafaf;
  font-size: 14px;
}

.jimu-widget-searchL .input-sms1:-moz-placeholder,
.jimu-widget-searchL .input-sms:-moz-placeholder {
.jimu-widget-searchL .input-sms1:-moz-placeholder, .jimu-widget-searchL .input-sms:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #afafaf;
  font-size: 14px;
}

.jimu-widget-searchL .input-sms1::-ms-input-placeholder,
.jimu-widget-searchL .input-sms::-ms-input-placeholder {
.jimu-widget-searchL .input-sms1::-ms-input-placeholder, .jimu-widget-searchL .input-sms::-ms-input-placeholder {
  color: #afafaf;
  font-size: 14px;
}
@@ -148,8 +152,7 @@
  background-color: #ffffff;
}

.jimu-widget-searchL .layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after {
.jimu-widget-searchL .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
  border-bottom: 2px solid #39A5FD;
}

@@ -186,6 +189,7 @@
  position: relative;
  top: -4px;
} */

.jimu-widget-searchL .searchLMain [id^='layui-table-page'] {
  position: absolute;
  left: 20px;
@@ -229,6 +233,7 @@
}

/* 隐藏layui表格溢出的详情框 */
.layui-table-grid-down{
display: none;

.layui-table-grid-down {
  display: none;
}

 widgets/spatialAnalysis/Widget.js

@@ -31,52 +31,52 @@
                var that = this;
                // 暴露在外的接口

                topic.subscribe("closeOnceUse", lang.hitch(this, this.closeOnceUse));
                topic.subscribe("closeOnceUse", lang.hitch(this, this.closeOnceUse));

                function createTooltip(frameDiv) {//抄录createTooltip函数
                // function createTooltip(frameDiv) {//抄录createTooltip函数

                    var tooltip = function (frameDiv) {
                //     var tooltip = function (frameDiv) {

                        var div = document.createElement('DIV');
                        div.className = "twipsy right";
                //         var div = document.createElement('DIV');
                //         div.className = "twipsy right";

                        var arrow = document.createElement('DIV');
                        arrow.className = "twipsy-arrow";
                        div.appendChild(arrow);
                //         var arrow = document.createElement('DIV');
                //         arrow.className = "twipsy-arrow";
                //         div.appendChild(arrow);

                        var title = document.createElement('DIV');
                        title.className = "twipsy-inner";
                        div.appendChild(title);
                //         var title = document.createElement('DIV');
                //         title.className = "twipsy-inner";
                //         div.appendChild(title);

                        this._div = div;
                        this._title = title;
                        this.message = '';
                //         this._div = div;
                //         this._title = title;
                //         this.message = '';

                        // add to frame div and display coordinates
                        frameDiv.appendChild(div);
                        var that = this;
                        div.onmousemove = function (evt) {
                            that.showAt({ x: evt.clientX, y: evt.clientY }, that.message);
                        };
                    };
                //         // add to frame div and display coordinates
                //         frameDiv.appendChild(div);
                //         var that = this;
                //         div.onmousemove = function (evt) {
                //             that.showAt({ x: evt.clientX, y: evt.clientY }, that.message);
                //         };
                //     };

                    tooltip.prototype.setVisible = function (visible) {
                        this._div.style.display = visible ? 'block' : 'none';
                    };
                //     tooltip.prototype.setVisible = function (visible) {
                //         this._div.style.display = visible ? 'block' : 'none';
                //     };

                    tooltip.prototype.showAt = function (position, message) {
                        if (position && message) {
                            this.setVisible(true);
                            this._title.innerHTML = message;
                            this._div.style.left = position.x + 10 + "px";
                            this._div.style.top = (position.y - this._div.clientHeight / 2) + "px";
                            this.message = message;
                        }
                    };
                //     tooltip.prototype.showAt = function (position, message) {
                //         if (position && message) {
                //             this.setVisible(true);
                //             this._title.innerHTML = message;
                //             this._div.style.left = position.x + 10 + "px";
                //             this._div.style.top = (position.y - this._div.clientHeight / 2) + "px";
                //             this.message = message;
                //         }
                //     };

                    return new tooltip(frameDiv);
                }
                window.MYcreateTooltip = createTooltip;//全局使用
                //     return new tooltip(frameDiv);
                // }
                // window.MYcreateTooltip = createTooltip;//全局使用

                var domHtmls = [//默认
                    {
@@ -118,6 +118,9 @@

                that.beginSpatialAnalysis(domHtmls);
                var isit = false;
                $('.ccslius').click(() => {
                    isit = false;
                })
                $('.ccsliu').dblclick(() => {//测试开关 点击图例其他的图片

                    if (isit) {
@@ -154,6 +157,11 @@
                            }, {//方量分析//做好
                                name: '方量分析',
                                classs: 'volumeAnalysis-tool',
                                img: './images/addL/pdpx.png'
                            }
                            , {//空间查询
                                name: '空间查询',
                                classs: 'spatialQuery-tool',
                                img: './images/addL/pdpx.png'
                            }
                            ,
@@ -263,6 +271,13 @@
                    topic.publish('beginVolumeAnalysis', 'beginVolumeAnalysis');
                })

                //空间查询
                $('.spatialQuery-tool').click(function () {
                    that.closeOnceUse();
                    $(".jimu-widget-spatialQuery").show();
                    topic.publish('beginSpatialQuery', 'beginSpatialQuery');
                })

            },
            closeToolBox: function (item) {
                if (item != this.name) {
@@ -307,13 +322,16 @@
                    $(".jimu-widget-digTheEarth").hide();
                    topic.publish('closesDigTheEarth');
                }

                //关闭方量贩分析
                if ($(".jimu-widget-volumeAnalysis").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-volumeAnalysis").hide();
                    topic.publish('closesVolumeAnalysis');
                }

                //关闭空间查询
                if ($(".jimu-widget-spatialQuery").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-spatialQuery").hide();
                    topic.publish('closesSpatialQuery');
                }


            },

 widgets/spatialQuery/Widget.html

New file
@@ -0,0 +1,34 @@
<div title="点击绘画区域，右键结束">
    <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div id="toolbarSpatialQuery"  style="position: absolute;left: 5px;top: 5px;display: block;">
        <button type="button" id="searchSpatialQuery" class="button black">绘画查询区域</button>
    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
    <div id="spatialQueryValue" title="数据展示">
        <div id="spatialQueryValuemain"></div>
        <i class="layui-icon closeOURspatialQueryValue">
            &#x1006;
        </i></span>
    </div>
</div>

 widgets/spatialQuery/Widget.js

New file
@@ -0,0 +1,273 @@
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-spatialQuery',
            name: 'spatialQuery',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("beginSpatialQuery", lang.hitch(this, this.beginSpatialQuery));
                topic.subscribe("closesSpatialQuery", lang.hitch(this, this.closesSpatialQuery));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closesSpatialQuery();
                })

                $(`.${that.baseClass}`).find('.closeOURspatialQueryValue').click(() => {
                    $(`#spatialQueryValue`).hide();
                    $(`#spatialQueryValuemain`).empty();
                })


                // that.beginSpatialQuery();

            },
            beginSpatialQuery: function () {
                console.log(`${this.name}--kaishi`);
                var that = this
                    , viewer = that.map;


                var scene = viewer.scene;
                scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
                scene.skyAtmosphere.brightnessShift = 0.4;  //修改大气的亮度
                scene.debugShowFramesPerSecond = false;
                scene.hdrEnabled = false;
                scene.sun.show = false;
                // 01设置环境光的强度-新处理CBD场景
                scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
                // 添加光源
                var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 480);
                //光源方向点

                var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531, 430);
                var dirLightOptions = {
                    targetPosition: targetPosition1,
                    color: new Cesium.Color(1.0, 1.0, 1.0, 1),
                    intensity: 0.55
                };
                directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);
                scene.addLightSource(directionalLight_1);
                var widget = viewer.cesiumWidget;
                var IDs = [];
                var dataUrl = "http://www.supermapol.com/realspace/services/data-cbd/rest/data/featureResults.rjson?returnContent=true";


                $('#loadingbar').remove();
                // try {
                var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace');
                Cesium.when(promise, function (layer) {
                    //设置相机位置、视角，便于观察场景
                    scene.camera.setView({
                        destination: new Cesium.Cartesian3.fromDegrees(116.4566, 39.9149, 5323.445971240632),
                        orientation: {
                            heading: 0,
                            pitch: -1.5188,
                            roll: 6.283185307179563
                        }
                    });
                    var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon);
                    var tooltip = window.MYcreateTooltip(document.body);
                    $("#searchSpatialQuery").click(function () {
                        // console.log(1)
                        handlerPolygon.activate();
                        // console.log(2)
                    });
                    handlerPolygon.activeEvt.addEventListener(function (isActive) {
                        if (isActive == true) {
                            viewer.enableCursorStyle = false;
                            viewer._element.style.cursor = '';
                            $('body').removeClass('drawCur').addClass('drawCur');
                        } else {
                            viewer.enableCursorStyle = true;
                            $('body').removeClass('drawCur');
                        }
                    });
                    handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
                        if (windowPosition.x < 210 && windowPosition.y < 120) {
                            tooltip.setVisible(false);
                            return;
                        }
                        if (handlerPolygon.isDrawing) {
                            tooltip.showAt(windowPosition, '<p>点击确定查询区域中间点</p><p>右键单击结束绘制</p>');
                        } else {
                            tooltip.showAt(windowPosition, '<p>点击绘制查询区域第一个点</p>');
                        }
                    });
                    handlerPolygon.drawEvt.addEventListener(function (result) {
                        tooltip.setVisible(false);
                        handlerPolygon.polygon.show = false;
                        handlerPolygon.polyline.show = false;

                        var positions = result.object.positions;

                        var geometries = [];
                        for (var i = 0; i < positions.length; i++) {
                            var position = positions[i];
                            var cartographic = Cesium.Cartographic.fromCartesian(position);
                            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                            var latitude = Cesium.Math.toDegrees(cartographic.latitude);

                            var queryPoint = { // 查询点对象
                                x: longitude,
                                y: latitude
                            };
                            geometries.push(queryPoint)
                        }


                        query(geometries);
                    });
                }, function () {
                    var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                    widget.showErrorPanel(title, undefined, e);
                });
                // } catch (e) {
                //     if (widget._showRenderLoopErrors) {
                //         var title = '渲染时发生错误，已停止渲染。';
                //         widget.showErrorPanel(title, undefined, e);
                //     }
                // }

                function processCompleted(features) {
                    var selectedFeatures = features;
                    // console.log(selectedFeatures);
                    var color;
                    IDs = [];
                    viewer.entities.removeAll();
                    for (var i = 0; i < selectedFeatures.length; i++) {
                        var value = selectedFeatures[i].fieldValues["0"];
                        var feature = selectedFeatures[i];
                        for (var j = 0; j < feature.fieldNames.length; j++) {
                            var index = j.toString();
                            if (j == 0) {
                                var des = '<table class="cesium-infoBox-defaultTable"><tbody>' + '<tr><th>' + selectedFeatures[i].fieldNames["0"] + '</th><td>' + selectedFeatures[i].fieldValues["0"] + '</td></tr>';
                            } else if (j == feature.fieldNames.length - 1) {
                                des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] + '</td></tr>' + "</tbody></table>";
                            } else {
                                des += '<tr><th>' + selectedFeatures[i].fieldNames[index] + '</th><td>' + selectedFeatures[i].fieldValues[index] + '</td></tr>';
                            }
                        }
                        viewer.entities.add({
                            position: Cesium.Cartesian3.fromDegrees(parseFloat(selectedFeatures[i].fieldValues["12"]), parseFloat(selectedFeatures[i].fieldValues["13"]), parseFloat(selectedFeatures[i].fieldValues["16"])),
                            billboard: {
                                image: './images/addL/dworgin.png',
                                width: 30,
                                height: 40,

                            },
                            name: selectedFeatures[i].fieldValues["11"],
                            description: des,
                            spatialQueryData: selectedFeatures[i]
                        });
                        IDs.push(parseInt(value) + 11);
                    }
                    // console.log(des);
                    var buildingLayer = scene.layers.find("Building@CBD");
                    if (IDs.length > 0) {
                        buildingLayer.setSelection(IDs);
                    }
                }

                function query(queryPoints) {
                    var queryObj = {
                        "getFeatureMode": "SPATIAL",
                        "spatialQueryMode": "CONTAIN",
                        "datasetNames": ["二维数据:Building"],
                        "geometry": {
                            // id: 0,
                            // style: null,
                            // parts: [queryPoints.length],
                            points: queryPoints,
                            type: "REGION"
                        }
                    };

                    var queryData = JSON.stringify(queryObj); // 转化为JSON字符串作为查询参数

                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        data: queryData,
                        success: function (result) {
                            var resultObj = JSON.parse(result);
                            // console.log(resultObj);
                            if (resultObj.featureCount > 0) {
                                processCompleted(resultObj.features);
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        },
                        // complete: function () {
                        //     console.log("complete");
                        // }
                    })
                }

                function processFailed(e) {
                    alert(e.error.errorMsg);
                }

                that.promise = promise;
            },
            promise: '',
            closesSpatialQuery: function (froms) {
                var that = this
                    , viewer = that.map;
                viewer.entities.removeAll();
                $(`#spatialQueryValue`).hide();
                $(`#spatialQueryValuemain`).empty();

                Cesium.when(that.promise, function (layer) {
                    for (var i = 0; i < layer.length; i++) {
                        that.map.scene.layers.remove(layer[i].name)
                    }
                })

                console.log(`${this.name}--guanbi`);
            },
            onOpen: function () {

            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
                console.log('jies')
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/spatialQuery/css/style.css

New file
@@ -0,0 +1,67 @@
.jimu-widget-spatialQuery {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 160px !important;
  height: 40px !important;
  background-color: rgb(255, 255, 255);
  font-size: 14px;
  color: rgb(0, 0, 0);
  z-index: 12 !important;
  border-radius: 10px;
  display: none;
  box-shadow: 0 0 8px #fff;
  padding: 0px 5px !important;
}

.jimu-widget-spatialQuery .closeOUR {
  position: absolute;
  right: 5px;
  top: calc(50% - 9px);
  font-size: 18px;
  cursor: pointer;
}

.jimu-widget-spatialQuery .closeOUR:hover {
  color: red;
}

.jimu-widget-spatialQuery #searchSpatialQuery {
  line-height: 30px;
  width: 120px;
  height: 30px;
  font-size: 16px;
  border-radius: 5px;
  box-shadow: 2px 2px 15px -5px #378ef1;
  border: 1px solid transparent;
  background-color: #fff;
}

.jimu-widget-spatialQuery #searchSpatialQuery:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
}

.jimu-widget-spatialQuery #spatialQueryValue {
  width: 320px;
  height: 320px;
  background-color: #fff;
  position: relative;
  top: 50px;
  left: -165px;
  box-shadow: 0 0 8px #fff;
  border-radius: 10px;
  padding: 8px;
  display: none;
}

.jimu-widget-spatialQuery .closeOURspatialQueryValue {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

.jimu-widget-spatialQuery .closeOURspatialQueryValue:hover {
  color: red;
}

 widgets/spatialQuery/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "spatialQuery",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "liuyg",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/spatialQuery/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "spatialQuery"
  })
);

 widgets/spatialQuery/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "spatialQuery"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/spatialQuery/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "空间查询"
  })
);