添加地形开挖

liuyg

2021-06-22 8eb00c8e0f9aad97f0aaf61d06388bc9006b3be5

添加地形开挖

 config.json

@@ -252,6 +252,10 @@
      {
        "name": "SQL查询",
        "uri": "widgets/SQLQuery/Widget"
      },
      {
        "name": "地形开挖",
        "uri": "widgets/digTheEarth/Widget"
      }
    ],
    "groups": [],

 widgets/digTheEarth/Widget.html

New file
@@ -0,0 +1,14 @@
<div title="点击绘制开挖区域,右键单击结束绘制,进行开挖">
    <div id="toolbardigTheEarth"  class="param-container tool-bar">
        <div class="param-item">
            <label class="form-label">开挖深度(米) :</label>
            <input id="depth" type="number" value="500" required="required" style="width:90px;" />
        </div>
        <div class="param-item">
            <button type="button" id="cleardigTheEarth" style="float:right;" class="button black">清除</button>
        </div>
    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
</div>

 widgets/digTheEarth/Widget.js

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

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

                // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                //     url: 'https://dev.virtualearth.net',
                //     mapStyle: Cesium.BingMapsStyle.AERIAL,
                //     key: 'AkOyUpgDCoz063AWW1WfHnxp5222UBdxLOp1XvRv0tuebQnr2S7UcZkiLgME7gX0'
                // }));
                var scene = viewer.scene;
                // 设置相机视角
                // viewer.scene.camera.setView({
                //     destination: Cesium.Cartesian3.fromDegrees(88.3648, 29.0946, 90000),
                //     orientation: {
                //         heading: 6.10547067016156,
                //         pitch: -0.8475077031996778,
                //         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 handlerPolygon = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon, 0);
                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 < 200 && windowPosition.y < 150) {
                        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) {
                    if (!result.object.positions) {
                        tooltip.showAt(result, '<p>请绘制正确的多边形</p>');
                        handlerPolygon.polygon.show = false;
                        handlerPolygon.polyline.show = false;
                        handlerPolygon.deactivate();
                        handlerPolygon.activate();
                        return;
                    };
                    var array = [].concat(result.object.positions);
                    tooltip.setVisible(false);
                    var positions = [];
                    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(h);
                        }
                    }
                    var dep = $('#depth').val();
                    viewer.scene.globe.removeAllExcavationRegion();
                    viewer.scene.globe.addExcavationRegion({
                        name: 'ggg',
                        position: positions,
                        height: dep,
                        transparent: false
                    });
                    handlerPolygon.polygon.show = false;
                    handlerPolygon.polyline.show = false;
                    handlerPolygon.deactivate();
                    handlerPolygon.activate();
                });
                handlerPolygon.activate();
                document.getElementById("cleardigTheEarth").onclick = function () {
                    viewer.scene.globe.removeAllExcavationRegion();
                    if (handlerPolygon.polygon) {
                        handlerPolygon.polygon.show = false;
                    }
                    if (handlerPolygon.polyline) {
                        handlerPolygon.polyline.show = false;
                    }
                    // handlerPolygon.polygon.show = false;
                    // handlerPolygon.polyline.show = false;
                };

                if (!scene.pickPositionSupported) {
                    alert('不支持深度纹理,无法绘制多边形，地形开挖功能无法使用！');
                }
                $('#toolbardigTheEarth').show();
                $('#loadingbar').remove();
                that.handlerPolygon = handlerPolygon;
            },
            handlerPolygon: '',
            closesDigTheEarth: function (froms) {
                // console.log('gaunbi');
                var that = this;
                if (froms == 'frist') {
                    // console.log('frist');
                } else {
                    that.map.scene.globe.removeAllExcavationRegion();
                    if (that.handlerPolygon.polygon) {
                        that.handlerPolygon.polygon.show = false;
                    }
                    if (that.handlerPolygon.polyline) {
                        that.handlerPolygon.polyline.show = false;
                    }
                    that.handlerPolygon.deactivate();
                }
            },
            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/digTheEarth/css/style.css

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

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

.jimu-widget-digTheEarth #toolbardigTheEarth {
  width: calc(100% - 10px);
  height: 60px;
  margin: 25px 5px 5px 5px;
  /* border: 1px solid salmon; */
  box-sizing: border-box;
}

.jimu-widget-digTheEarth #toolbardigTheEarth .param-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jimu-widget-digTheEarth #cleardigTheEarth {
  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-digTheEarth #cleardigTheEarth:hover {
  box-shadow: 2px 2px 20px -2px #1a8ff0;
}

 widgets/digTheEarth/manifest.json

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

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

 widgets/digTheEarth/nls/strings.js

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

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

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "地形开挖"
  })
);

 widgets/null/Widget.js

@@ -29,10 +29,11 @@

            },
            beginNull: function () {
                console.log('kaishi')

            },
            closesNull: function () {

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


 widgets/null/css/style.css

@@ -15,9 +15,10 @@
}

.jimu-widget-null .closeOUR {
  /* position: relative;
  left: 3px;
  font-size: 18px; */
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}


 widgets/spatialAnalysis/Widget.js

@@ -57,65 +57,83 @@
                    //     classs: 'SQLQuery-tool',
                    //     img: './images/addL/pdpx.png'
                    // }
                    , {//地形开挖，//做好
                        name: '地形开挖',
                        classs: 'digTheEarth-tool',
                        img: './images/addL/pdpx.png'
                    }
                ];
                that.beginSpatialAnalysis(domHtmls);

                $('.ccsliuNo').click(() => {//测试开关 点击图例其他的图片
                    var domHtmls = [
                        {
                            name: '可视分析',
                            classs: 'visibleArea-tool',
                            img: './images/addL/ksy.png'
                        }, {
                            name: '剖面分析',
                            classs: 'profileAnalysis-tool',
                            img: './images/addL/剖面分析.png'
                        }
                        , {//https://blog.csdn.net/supermapsupport/article/details/100134590
                            //需要iServer发布成三维服务
                            name: '坡度分析',
                            classs: 'slope-tool',
                            img: './images/addL/pdpx.png'
                        }
                        , {//做好静态，
                            name: '建造实体',
                            classs: 'modelDiagram-tool',
                            img: './images/addL/pdpx.png'
                        }
                        , {//SQL查询，//做好
                            name: 'SQL查询',
                            classs: 'SQLQuery-tool',
                            img: './images/addL/pdpx.png'
                        },
                        {//建造模型
                            name: '建造模型',
                            classs: 'modesssssllll',
                            img: './images/addL/pdpx.png'
                        }
                        ,
                        {//清除模型
                            name: '清除模型',
                            classs: 'modesssss2222',
                            img: './images/addL/pdpx.png'
                        }
                    ];
                    that.beginSpatialAnalysis(domHtmls);
                    var promise = false;
                    $('.modesssssllll').click(() => {
                        var URL_CONFIG = {
                            SCENE_CBD: 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace',
                        }
                        promise = this.map.scene.open(URL_CONFIG.SCENE_CBD);
                    })
                    $('.modesssss2222').click(() => {
                        if (promise) {
                            Cesium.when(promise, function (layer) {
                                for (var i = 0; i < layer.length; i++) {
                                    that.map.scene.layers.remove(layer[i].name)
                                }
                            })
                        }
                    })
                that.beginSpatialAnalysis(domHtmls);
                var isit = false;
                $('.ccsliu').dblclick(() => {//测试开关 点击图例其他的图片

                    if (isit) {
                        var domHtmls2 = [
                            {
                                name: '可视分析',
                                classs: 'visibleArea-tool',
                                img: './images/addL/ksy.png'
                            }, {
                                name: '剖面分析',
                                classs: 'profileAnalysis-tool',
                                img: './images/addL/剖面分析.png'
                            }
                            , {//https://blog.csdn.net/supermapsupport/article/details/100134590
                                //需要iServer发布成三维服务
                                name: '坡度分析',
                                classs: 'slope-tool',
                                img: './images/addL/pdpx.png'
                            }
                            , {//做好静态，
                                name: '建造实体',
                                classs: 'modelDiagram-tool',
                                img: './images/addL/pdpx.png'
                            }
                            , {//SQL查询，//做好
                                name: 'SQL查询',
                                classs: 'SQLQuery-tool',
                                img: './images/addL/pdpx.png'
                            }
                            , {//地形开挖，//做好
                                name: '地形开挖',
                                classs: 'digTheEarth-tool',
                                img: './images/addL/pdpx.png'
                            }
                            ,
                            {//建造模型
                                name: '建造模型',
                                classs: 'modesssssllll',
                                img: './images/addL/pdpx.png'
                            }
                            ,
                            {//清除模型
                                name: '清除模型',
                                classs: 'modesssss2222',
                                img: './images/addL/pdpx.png'
                            }
                        ];
                        that.beginSpatialAnalysis(domHtmls2);
                        var promise = false;
                        $('.modesssssllll').click(() => {
                            var URL_CONFIG = {
                                SCENE_CBD: 'http://www.supermapol.com/realspace/services/3D-CBDCache20200416/rest/realspace',
                            }
                            promise = this.map.scene.open(URL_CONFIG.SCENE_CBD);
                        })
                        $('.modesssss2222').click(() => {
                            if (promise) {
                                Cesium.when(promise, function (layer) {
                                    for (var i = 0; i < layer.length; i++) {
                                        that.map.scene.layers.remove(layer[i].name)
                                    }
                                })
                            }
                        })
                    } else {
                        that.beginSpatialAnalysis(domHtmls);
                    }
                    isit = !isit;
                })

            },
@@ -160,7 +178,7 @@
                    that.closeOnceUse();

                    $(".jimu-widget-slope").show();
                    topic.publish('getbeginSlope', this.beginSlope);
                    topic.publish('getbeginSlope', 'this.beginSlope');
                })
                //模型
                $('.modelDiagram-tool').click(function () {
@@ -171,7 +189,14 @@
                $('.SQLQuery-tool').click(function () {
                    that.closeOnceUse();
                    $(".jimu-widget-SQLQuery").show();
                    topic.publish('beginSQL', this.beginSQL);
                    topic.publish('beginSQL', 'this.beginSQL');

                })
                //地形开挖
                $('.digTheEarth-tool').click(function () {
                    that.closeOnceUse('frist');
                    $(".jimu-widget-digTheEarth").show();
                    topic.publish('beginDigTheEarth', 'beginDigTheEarth');

                })

@@ -181,7 +206,7 @@
                    $('.tool-y-box').hide();
                }
            },
            closeOnceUse: function () {
            closeOnceUse: function (who) {
                var that = this;
                that.map.scene.globe.depthTestAgainstTerrain = true;
                // 关闭量算
@@ -214,6 +239,9 @@
                //清除SQL查询
                $(".jimu-widget-SQLQuery").hide();
                topic.publish('closesSQL', 'closesSQL');
                //关闭地形开挖
                $(".jimu-widget-digTheEarth").hide();
                topic.publish('closesDigTheEarth', who);

            },
            onOpen: function () {