方量分析 需要接口计算数据

liuyg

2021-06-22 021232471a23e3de54f2aab103c4c25240d33545

方量分析  需要接口计算数据

 config.json

@@ -256,6 +256,10 @@
      {
        "name": "地形开挖",
        "uri": "widgets/digTheEarth/Widget"
      },
      {
        "name": "方量分析",
        "uri": "widgets/volumeAnalysis/Widget"
      }
    ],
    "groups": [],

 widgets/digTheEarth/Widget.js

@@ -49,50 +49,8 @@
                //         roll: 6.2831853016686185
                //     }
                // });
                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);
                }
                var tooltip = createTooltip(viewer._element);
              
                var tooltip = window.MYcreateTooltip(viewer._element);
                //绘制多边形
                var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
                handlerPolygon.activeEvt.addEventListener(function (isActive) {

 widgets/null/Widget.js

@@ -27,13 +27,17 @@
                    that.closesNull();
                })


                that.beginNull();

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

            },
            closesNull: function (froms) {
                console.log('guanbi')
                console.log('guanbi');
            },
            onOpen: function () {


 widgets/spatialAnalysis/Widget.js

@@ -31,6 +31,51 @@
                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;//全局使用

                var domHtmls = [//默认
                    {
                        name: '可视分析',
@@ -62,6 +107,11 @@
                        classs: 'digTheEarth-tool',
                        img: './images/addL/pdpx.png'
                    }
                    // , {//方量分析//做好
                    //     name: '方量分析',
                    //     classs: 'volumeAnalysis-tool',
                    //     img: './images/addL/pdpx.png'
                    // }
                ];

                that.beginSpatialAnalysis(domHtmls);
@@ -110,6 +160,15 @@
                            {//清除模型
                                name: '清除模型',
                                classs: 'modesssss2222',
                                img: './images/addL/pdpx.png'
                            }
                            , {//地形开挖，//做好
                                name: '地形开挖',
                                classs: 'digTheEarth-tool',
                                img: './images/addL/pdpx.png'
                            }, {//方量分析//做好
                                name: '方量分析',
                                classs: 'volumeAnalysis-tool',
                                img: './images/addL/pdpx.png'
                            }
                        ];
@@ -200,6 +259,13 @@

                })

                //方量分析
                $('.volumeAnalysis-tool').click(function () {
                    that.closeOnceUse('volumeAnalysis');
                    $(".jimu-widget-volumeAnalysis").show();
                    topic.publish('beginVolumeAnalysis', 'beginVolumeAnalysis');
                })

            },
            closeToolBox: function (item) {
                if (item != this.name) {
@@ -240,11 +306,20 @@
                $(".jimu-widget-SQLQuery").hide();
                topic.publish('closesSQL', 'closesSQL');
                //关闭地形开挖
                if (who != 'digTheEarth') {
                if ($(".jimu-widget-digTheEarth").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-digTheEarth").hide();
                    topic.publish('closesDigTheEarth');
                    console.log('dakai ')
                }

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



            },
            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）

 widgets/volumeAnalysis/Widget.html

New file
@@ -0,0 +1,38 @@
<div>
    <div id="toolbarVolumeAnalysis" class="param-container tool-bar">
        <div class="param-item">
            <b>开挖高程：</b>
            <input type="text" id="depthVolumeAnalysis" value="5000">
        </div>
        <div class="param-item">
            <b>开挖面积(平方米):</b>
            <input type="text" id="cutareaVolumeAnalysis" value="" readonly="readonly">
        </div>
        <div class="param-item">
            <b>开挖体积(立方米):</b>
            <input type="text" id="cutVolumeVolumeAnalysis" value="" readonly="readonly">
        </div>
        <div class="param-item">
            <b>填方面积(平方米):</b>
            <input type="text" id="fillareaVolumeAnalysis" value="" readonly="readonly">
        </div>
        <div class="param-item">
            <b>填方体积(立方米):</b>
            <input type="text" id="fillVolumeVolumeAnalysis" value="" readonly="readonly">
        </div>
        <div class="param-item">
            <b>未填挖面积(平方米):</b>
            <input type="text" id="remainderAreaVolumeAnalysis" value="" readonly="readonly">
        </div>

        <div class="butVolumeAnalysis" style="float: right;">
            <button type="button" id="filladdVolumeAnalysis" class="button black">绘制</button>
            <button type="button" id="fillclearVolumeAnalysis" class="button black">清除</button>
        </div>


    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
</div>

 widgets/volumeAnalysis/Widget.js

New file
@@ -0,0 +1,220 @@
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-volumeAnalysis',
            name: 'volumeAnalysis',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("beginVolumeAnalysis", lang.hitch(this, this.beginVolumeAnalysis));
                topic.subscribe("closesVolumeAnalysis", lang.hitch(this, this.closesVolumeAnalysis));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closesVolumeAnalysis();
                })

                // that.beginVolumeAnalysis();

            },
            beginVolumeAnalysis: function () {
                // console.log('kaishi');
                var that = this
                    , viewer = this.map;

                var clampMode = 0; // 空间模式
                var scene = viewer.scene;
                var widget = viewer.cesiumWidget;

                var tooltip = window.MYcreateTooltip(document.body);

                // var promise = scene.open('http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace')
                // Cesium.when.all(promise, function (layers) {//等待promise加载
                    //设置相机位置、视角
                    // viewer.scene.camera.setView({
                    //     destination: new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
                    //     orientation: {
                    //         heading: 1.4059101895600987,
                    //         pitch: -0.20917672793046682,
                    //         roll: 2.708944180085382e-13
                    //     }
                    // });

                    var handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, clampMode);

                    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 (handlerPolygon.isDrawing) {
                            tooltip.showAt(windowPosition, '<p>点击确定多边形中间点</p><p>右键单击结束绘制</p>');
                        } else {
                            tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
                        }
                    });

                    handlerPolygon.drawEvt.addEventListener(function (result) {
                        handlerPolygon.polygon.show = false;
                        // handlerPolygon.polyline.show = false;
                        handlerPolygon.deactivate();
                        tooltip.setVisible(false);

                        var dep = document.getElementById("depthVolumeAnalysis").value;

                        var array = [].concat(result.object.positions);
                        var positions = [];
                        var positionsii = [];
                        for (var i = 0, len = array.length; i < len; i++) {
                            var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
                            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                            var h = cartographic.height;
                            if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {

                                positions.push(longitude);
                                positions.push(latitude);
                                positions.push(parseInt(dep));

                                positionsii.push({
                                    x: longitude,
                                    y: latitude
                                });
                            }
                        }

                        //此处用的地形修改 而不是地形开挖
                        viewer.scene.globe.removeAllModifyRegion();
                        viewer.scene.globe.addModifyRegion({
                            name: 'ggg',
                            position: positions
                        });

                        var length = [];
                        length.push(positionsii.length);

                        //需要在此 动态构造一个 REGION类型的对象
                        var geometry = {
                            "id": 23,
                            "parts": length,
                            "points": positionsii,
                            "style": null,
                            "type": "REGION"
                        };


                        var queryObj = {
                            "cutFillType": "REGIONANDALTITUDE",
                            "baseAltitude": dep,
                            "region": geometry,
                            "resultDataset": "result",
                            "buildPyramid": true,
                            "deleteExistResultDataset": true
                        };
                        var queryObjJSON = JSON.stringify(queryObj);
                        $.ajax({
                            type: 'post',
                            url: "http://www.supermapol.com/realspace/services/spatialAnalysis-dxyx_ios/restjsr/spatialanalyst/datasets/DEM@%E5%9B%9B%E5%A7%91%E5%A8%98%E5%B1%B1/terraincalculation/cutfill.json?returnContent=true",
                            data: queryObjJSON,
                            success: function (data) {
                                console.log(data);
                                console.log(queryObj);
                                // var resultObj = JSON.parse(data);
                                var resultObj = data;

                                document.getElementById("cutareaVolumeAnalysis").value = resultObj.cutArea;
                                document.getElementById("cutVolumeVolumeAnalysis").value = resultObj.cutVolume;
                                document.getElementById("fillareaVolumeAnalysis").value = resultObj.fillArea;
                                document.getElementById("fillVolumeVolumeAnalysis").value = resultObj.fillVolume;
                                document.getElementById("remainderAreaVolumeAnalysis").value = resultObj.remainderArea;
                            }
                        });

                    });

                    document.getElementById("filladdVolumeAnalysis").onclick = function () {
                        handlerPolygon.activate();
                    };

                    document.getElementById("fillclearVolumeAnalysis").onclick = function () {
                        viewer.scene.globe.removeAllModifyRegion();
                        document.getElementById("cutareaVolumeAnalysis").value = "";
                        document.getElementById("cutVolumeVolumeAnalysis").value = "";
                        document.getElementById("fillareaVolumeAnalysis").value = "";
                        document.getElementById("fillVolumeVolumeAnalysis").value = "";
                        document.getElementById("remainderAreaVolumeAnalysis").value = "";
                        handlerPolygon.clear();
                    };

                    $('#toolbarVolumeAnalysis').show();
                    $('#loadingbar').remove();


                    if (!scene.pickPositionSupported) {
                        alert('不支持深度拾取,无法进行鼠标交互绘制！');
                    }
                // })
                that.handlerPolygon = handlerPolygon;

            },
            handlerPolygon: '',
            closesVolumeAnalysis: function (froms) {
                // console.log('guanbi');
                this.map.scene.globe.removeAllModifyRegion();
                document.getElementById("cutareaVolumeAnalysis").value = "";
                document.getElementById("cutVolumeVolumeAnalysis").value = "";
                document.getElementById("fillareaVolumeAnalysis").value = "";
                document.getElementById("fillVolumeVolumeAnalysis").value = "";
                document.getElementById("remainderAreaVolumeAnalysis").value = "";
                this.handlerPolygon.clear();
            },
            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/volumeAnalysis/css/style.css

New file
@@ -0,0 +1,63 @@
.jimu-widget-volumeAnalysis {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 220px !important;
  height: 320px !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-volumeAnalysis .closeOUR {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

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

.jimu-widget-volumeAnalysis #toolbarVolumeAnalysis {
  height: 250px;
  width: calc(100%-10px);
  margin: 25px 5px 5px 5px;
  /* border: 1px solid salmon; */
}

.jimu-widget-volumeAnalysis #toolbarVolumeAnalysis .param-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.jimu-widget-volumeAnalysis #toolbarVolumeAnalysis .param-item b {
  font-weight: 400;
}
.jimu-widget-volumeAnalysis #toolbarVolumeAnalysis .param-item input {
  border-radius: 5px;
  border-color: #39A5FD;
}

.jimu-widget-volumeAnalysis .butVolumeAnalysis button {
  width: 60px;
  height: 30px;
  margin-top: 10px;
  border: 1px solid transparent;
  background-color: transparent;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 2px 2px 15px -2px #39A5FD;
}

.jimu-widget-volumeAnalysis .butVolumeAnalysis button:hover {
  box-shadow: 2px 2px 20px -2px #1a8ff0;
}

 widgets/volumeAnalysis/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "volumeAnalysis",
  "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/volumeAnalysis/nls/es/strings.js

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

 widgets/volumeAnalysis/nls/strings.js

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

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

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "方量分析"
  })
);