赣州市洪水风险预警系统三维版本
guoshilong
2023-02-06 d41024c55f6b7515d3880457d83be99fbbcf6622
水文水环境分析-洪水淹没:画线进行分析修改为画多边形进行分析
8 files modified
1 files deleted
2846 ■■■■■ changed files
corelib/common/popup/css/style.css 2 ●●● patch | view | raw | blame | history
widgets/FloodAnalysis/Widget copy.html 75 ●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/Widget copy.js 469 ●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/Widget.html 34 ●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/Widget.js 1448 ●●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/css/style copy .css 165 ●●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/css/style copy.css 225 ●●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/css/style.css 202 ●●●● patch | view | raw | blame | history
widgets/FloodAnalysis/data.json 226 ●●●●● patch | view | raw | blame | history
corelib/common/popup/css/style.css
@@ -818,7 +818,7 @@
.evaluate-box-middle{
    width: 96%;
    height: 425px;
    height: 650px;
    border: 1px solid black;
    padding: 0px 10px 0px 10px;
}
widgets/FloodAnalysis/Widget copy.html
@@ -1,43 +1,46 @@
<div>
    <div class="dynamicriver-main">
        <div class="dynamicriver-header">
            <i></i> 水面线分析
            <div class="close-dynamicriver">×</div>
        </div>
        <!--<div>
            <span>请选择水面线:</span><select id="flightRoute"></select>
        </div>-->
        <div class="water-analysis">
            <ul class="water-analysis-content">
            </ul>
        </div>
    <div class="flood-analysis-header">
        <i></i> 洪水淹没分析
    </div>
    <div class="dynamicriver-result">
        <div>
            数据信息
            <div class="close-dynamicriver-result">×</div>
        </div>
    <!--<div>
        <span>请选择水面线:</span><select id="flightRoute"></select>
    </div>-->
    <div class="flood-water-analysis">
        <ul>
            <li>
                <span class="dynamicriver-result-name">录入人</span>
                <span class="dynamicriver-result-sname"></span>
            </li>
            <li>
                <span class="dynamicriver-result-name">采集时间</span>
                <span class="dynamicriver-result-ctime"></span>
            </li>
            <li>
                <span class="dynamicriver-result-name">录入时间</span>
                <span class="dynamicriver-result-ltime"></span>
            </li>
            <li><span>水位(m):</span><input id="flood_analysis_sw_headtab" type="text" value="200" /></li>
        </ul>
    </div>
    <div id="aooaa">
        <div class="flood-water-analysis-new">
            <div>
                <input type="button" id="flood_hzsm_headtab" value="绘制水面线" />
                <input type="button" id='flood_qcsmx_headtab' value="清除">
            </div>
<!--            <div>-->
<!--                <input type="button" id="thematic_smsz_headtab" value="水面上涨" />-->
<!--                <input type="button" id="thematic_smxj_headtab" value="水面下降" />-->
<!--            </div>-->
        </div>
    </div>
    <div class="flood-detail">
        <div class="flood-detail-header">
            <i></i> 洪水淹没详情
        </div>
</div>
        <div class="flood-detail-content">
            <div class="flood-detail-text">
                <div>
                    <span>0-3m淹没面积:</span><span>10km²</span>
                </div>
                <div>
                    <span>1-2m淹没面积:</span><span>20km²</span>
                </div>
                <div>
                    <span>>3m淹没面积:</span><span>22km²</span>
                </div>
            </div>
            <div class="flood-detail-button">
                <input type="button" id="flood-detail-ksfx" value="开始分析" />
            </div>
        </div>
    </div>
</div>
widgets/FloodAnalysis/Widget copy.js
@@ -1,6 +1,6 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2020 zhongsong. All Rights Reserved.
// 模块描述:河流水面线分析
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
@@ -10,19 +10,25 @@
    'dojo/topic',
    'jimu/BaseWidget',
    './Tooltip-div',
    './DynamicDraw'
    './FloodAnalysis',
    'libs/layer/layer.js',
    'libs/turf/turf.min.js'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget
        BaseWidget,
        tooltip,
        flood,
        layer,
        turf,
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-DynamicRiver',
            name: 'DynamicRiver',
            riverWidth: 200,
            baseClass: 'jimu-widget-FloodAnalysis',
            name: 'FloodAnalysis',
            riverWidth: 300,
            riverHeight: 10,
            speed: 10,
            positions: [],
@@ -30,8 +36,13 @@
            riverPrimitive: null,
            material: null,
            drawingPolyline: null,
            // 增加waterData 用来存放列表数据
            waterData: null,
            //绘制的多边形数组
            polygonCartesianArray:[],
            //canvas转换后的图片
            canvasImage:null,
            //房屋人口
            peoplePositionArray:[],
            myWaterPrimitive:null,
            startup: function () {
                this.inherited(arguments);
                var self = this;
@@ -39,106 +50,82 @@
                this.map.scene.globe.depthTestAgainstTerrain = true;
                //取消双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                // 点击地图上绘制水面线,并且显示水面线详细数据
                $('.water-analysis-content').on('click', '.content-right', function (e) {
                    var dataIndex = $(e.target).parent().index();
                    var cartesians = [];
                    self.map.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(Number(self.waterData[dataIndex].zb[0].jd), Number(self.waterData[dataIndex].zb[0].wd), 5000),
                        easingFunction: Cesium.EasingFunction.QUADRACTIC_IN_OUT
                //绘制水面事件
                $("#flood_hzsm_headtab").click(function () {
                    DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
                        if (self.drawingPolyline != undefined)
                            self.map.entities.remove(self.drawingPolyline);
                        var lineOpts = {
                            polyline: {
                                positions: cartesians,
                                clampToGround: true,
                                width: 3,
                                color: "#279a9a"
                            }
                        };
                        self.drawingPolyline = self.map.entities.add(lineOpts);
                        cartesians.splice(cartesians.length - 1, cartesians.length);
                        self.drawLines(cartesians);
                        self.movehandLer()
                        self.showDetail(true)
                    });
                });
                    $('.dynamicriver-result-sname').text(self.waterData[dataIndex].sname);
                    $('.dynamicriver-result-ctime').text(self.waterData[dataIndex].ctime.substring(0, 10));
                    $('.dynamicriver-result-ltime').text(self.waterData[dataIndex].ltime.substring(0, 10));
                    if (e.target.nodeName == 'SPAN') {
                        $('.dynamicriver-result').stop().show();
                        $('.dynamicriver-main').stop().hide();
                    }
                    // $('.jimu-widget-DynamicRiver .dynamicriver-result').fadeIn();
                    self.waterData[dataIndex].zb.forEach(function (item, index) {
                        cartesians.push(Cesium.Cartesian3.fromDegrees(item.jd, item.wd, item.elevation))
                    })
                    // self.drawLines(cartesians);
                    // DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
                    if (self.drawingPolyline != undefined)
                        self.map.entities.remove(self.drawingPolyline);
                    var lineOpts = {
                        polyline: {
                            positions: cartesians,
                            clampToGround: true,
                            width: 3,
                            color: "#279a9a"
                        }
                    };
                    self.drawingPolyline = self.map.entities.add(lineOpts);
                    cartesians.splice(cartesians.length - 1, cartesians.length);
                    self.drawLines(cartesians);
                    // });
                })
                $('.close-dynamicriver').click(function () {
                    $('.jimu-widget-DynamicRiver').stop().hide();
                })
                // 关闭详细信息事件
                $('.close-dynamicriver-result').click(function () {
                    $('.dynamicriver-result').stop().hide();
                    $('.dynamicriver-main').stop().show();
                $('#flood_qcsmx_headtab').click(function () {
                    self.map.entities.remove(self.drawingPolyline);
                    self.map.scene.primitives.remove(self.riverPrimitive);
                    self.map.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(115.257787, 25.885506, 549263.35),
                        easingFunction: Cesium.EasingFunction.QUADRACTIC_IN_OUT
                    });
                    self.showDetail(false)
                })
                // $("#thematic_hlkd_headtab").change(function (e) {
                //     self.riverWidth = Number($(this).val());
                //     self.resetPos();
                // });
                $("#flood_analysis_sw_headtab").change(function (e) {
                    self.riverHeight = Number($(this).val());
                    self.resetPos();
                });
                // $("#thematic_sls_headtab").change(function (e) {
                //     self.speed = Number($(this).val());
                //     self.resetPos();
                // });
                //
                // $("#thematic_smsz_headtab").click(function () {
                //     self.offsetHeight(Number($("#thematic_bhz_headtab").val()), 5);
                // });
                //
                // $("#thematic_smxj_headtab").click(function () {
                //     self.offsetHeight(-Number($("#thematic_bhz_headtab").val()), 5);
                // });
                $('#flood-detail-ksfx').click(function () {
                    self.floodAnalysisPopup()
                })
                /*for(var e = [
                        [115.907543, 30.441563, 541.47],
                        [115.904337, 30.439412, 491.79],
                        [115.900612, 30.438483, 449.11],
                        [115.896375, 30.439377, 388.29],
                        [115.890586, 30.442215, 345.94],
                        [115.876946, 30.444641, 292.73]
                    ], r = [], i = 0; i < e.length; i++) r.push(Cesium.Cartesian3.fromDegrees(e[i][0], e[i][1], e[i][2]));
                this.positions = r;
                this.init();*/
            },
            init: function () {
                this.prepareVertex();
                if (this.sideRes) {
                    this.material = this.prepareMaterial();
                    this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
                    this.riverPrimitive = this.createPrimitive();
                    this.map.scene.primitives.add(this.riverPrimitive);
                    this.myWaterPrimitive = this.map.scene.primitives.add(this.riverPrimitive);
                }
            },
            prepareVertex: function () {
                if (this.positions.length > 0) {
                    this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
                }
            },
            setPositions: function (e) {
                this.positions = e;
                this.init();
            },
            resetPos: function () {
                this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
                if (this.sideRes) {
@@ -148,14 +135,16 @@
                    this.map.scene.primitives.add(this.riverPrimitive);
                }
            },
            drawLines: function (r) {
                this.setPositions(r);
            },
            prepareMaterial: function () {
                var e = new Cesium.Material({
                    fabric: {
                        uniforms: {
                            image: "widgets/DynamicRiver/images/movingRiver.png",
                            image: "widgets/ThematicDynamicRiver/images/movingRiver.png",
                            alpha: 0.5,
                            moveVar: new Cesium.Cartesian3(50, 1, 100),
                            reflux: -1,
@@ -168,6 +157,7 @@
                });
                return e
            },
            createPrimitive: function () {
                var t = new Float64Array(this.sideRes.vertexs),
                    i = new Cesium.GeometryAttributes;
@@ -201,9 +191,11 @@
                    })
                })
            },
            offsetHeight: function (height, time) {
                this.startDH(height, time)
            },
            startDH: function (height, time) {
                if (height && time && this.riverPrimitive) {
                    for (var i = this, r = 0, n = height / (20 * time), o = this.sideRes.self, s = new Cesium.Cartesian3, l = 0, u = o.length; l < u; l++) {
@@ -221,6 +213,7 @@
                    }, this.map.clock.onTick.addEventListener(this.dhEvent)
                }
            },
            //水面线转成水面
            _lines2Plane: function (positions, width, height) {
                function n(point, height) {
@@ -302,6 +295,17 @@
                    D.push(v[H].x), D.push(v[H].y), D.push(v[H].z), k.push(B.high.x), k.push(B.high.y), k.push(B.high.z), A.push(B.low.x), A.push(B.low.y), A.push(B.low.z), O.push(0, 0)
                }
                this.polygonCartesianArray = []
                for (let i = 0; i < y.length; i++) {
                    this.polygonCartesianArray.push(y[i])
                }
                for (let i = 0; i < v.length; i++) {
                    this.polygonCartesianArray.push(v[i])
                }
                //计算polygon面积
                this.getPolygonArea(this.getPositionArray(this.polygonCartesianArray),this.polygonCartesianArray)
                return {
                    left: v,
                    right: y,
@@ -313,34 +317,29 @@
                    uvs: new Float32Array(O)
                }
            },
            onOpen: function () {
                //面板打开的时候触发 (when open this panel trigger)
                this.map.scene.globe.baseColor = Cesium.Color.BLACK;
                //初始化点
                this.addPoint()
                //切换底图
                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
                // 发送请求获得到水面线列表基本数据
                var self = this;
                $.ajax({
                    url: 'http://localhost:82/blade-ycreal/waterline/querylist',
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        self.waterData = data.data;
                        var lidom = null;
                        var contentLeft = null;
                        var contentRight = null;
                        for (var i = 0; i < data.data.length; i++) {
                            lidom = $('<li> </li>');
                            contentLeft = $("<span class='content-left'></span>").text(data.data[i].sname);
                            contentRight = $("<span class='content-right'></span>");
                            lidom.prepend(contentLeft);
                            lidom.append(contentRight);
                            $('.water-analysis-content').append(lidom);
                        }
                    }
                })
                this.map.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(116.016905,25.884684, 10000),
                });
                this.showDetail(false)
            },
            onClose: function () {
                //面板关闭的时候触发 (when this panel is closed trigger)
                this.map.entities.remove(this.drawingPolyline);
                this.map.scene.primitives.remove(this.riverPrimitive);
                this.map.entities.removeAll()
            },
            onMinimize: function () {
@@ -360,7 +359,269 @@
                //todo
                //do something before this func
                this.inherited(arguments);
            },
            //Cartesian3转换为经纬度
            getPositionArray:function (cartesiansArray){
                var positionArray = []
                if (cartesiansArray.length>0){
                    for (let i = 0; i < cartesiansArray.length; i++) {
                        //获取的对象中的经纬度为弧度
                        let cartographic= Cesium.Cartographic.fromCartesian(cartesiansArray[i])
                        //弧度转换
                        let longitude = Cesium.Math.toDegrees(cartographic.longitude)
                        let latitude = Cesium.Math.toDegrees(cartographic.latitude)
                        let height = cartographic.height
                        positionArray.push({
                            lon:longitude,
                            lat:latitude,
                            hei:height,
                        })
                    }
                }
                return positionArray
            },
            //获取多边形面积
            getPolygonArea:function (points,positions){
                let radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
                let degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
                //计算多边形面积
                function getArea(points) {
                    let res = 0;
                    //拆分三角曲面
                    for (let i = 0; i < points.length - 2; i++) {
                        let j = (i + 1) % points.length;
                        let k = (i + 2) % points.length;
                        let totalAngle = Angle(points[i], points[j], points[k]);
                        let dis_temp1 = distance(positions[i], positions[j]);
                        let dis_temp2 = distance(positions[j], positions[k]);
                        res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle)) ;
                    }
                    return (res/1000000.0).toFixed(4);
                }
                /*角度*/
                function Angle(p1, p2, p3) {
                    let bearing21 = Bearing(p2, p1);
                    let bearing23 = Bearing(p2, p3);
                    let angle = bearing21 - bearing23;
                    if (angle < 0) {
                        angle += 360;
                    }
                    return angle;
                }
                /*方向*/
                function Bearing(from, to) {
                    let lat1 = from.lat * radiansPerDegree;
                    let lon1 = from.lon * radiansPerDegree;
                    let lat2 = to.lat * radiansPerDegree;
                    let lon2 = to.lon * radiansPerDegree;
                    let angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
                    if (angle < 0) {
                        angle += Math.PI * 2.0;
                    }
                    angle = angle * degreesPerRadian;//角度
                    return angle;
                }
                //计算距离
                function distance(point1,point2){
                    let point1cartographic = Cesium.Cartographic.fromCartesian(point1);
                    let point2cartographic = Cesium.Cartographic.fromCartesian(point2);
                    /**根据经纬度计算出距离**/
                    let geodesic = new Cesium.EllipsoidGeodesic();
                    geodesic.setEndPoints(point1cartographic, point2cartographic);
                    let s = geodesic.surfaceDistance;
                    //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
                    //返回两点之间的距离
                    s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
                    return s;
                }
                console.log(getArea(points)+"平方公里","777")
            },
            //鼠标事件
            movehandLer: function movehandLer() {
                // 取消默认双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                // 获取鼠标事件
                this.mountainHandler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
                // 给鼠标左键添加事件函数
                // this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            //点击事件
            clickHand:function (click){
                var pickedObjects = this.map.scene.pick(click.position);
                if (pickedObjects && pickedObjects.primitive instanceof Cesium.Primitive) {
                    // this.canvasToImage()
                    this.floodAnalysisPopup()
                }
            },
            //洪水分析弹窗
            floodAnalysisPopup:function (){
                var self = this
                var inPolygon = []
                for (let i = 0; i < this.peoplePositionArray.length; i++) {
                    let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                    if (isIn){
                        inPolygon.push(this.peoplePositionArray[i])
                    }
                }
                var jsonStr = JSON.stringify(inPolygon)
                var url = './corelib/common/popup/floodAnalysis.html';
                var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
                var top = ($(window).height() - 600) / 2;
                var left = ($(window).width() - 1300 - 340) / 2 + 340;
                layer.open({
                    title:'评估分析',
                    type: 2,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['1100px', '600px'],
                    skin: 'floodAnalysis',
                    offset: [top, left],
                    content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码,避免中文字符乱码,避免url截取错误
                    id: "floodAnalysisLayer",
                    closeBtn: 1,
                    //把父页面数据传递给子弹窗并渲染
                    success: function(layero, index) {
                        //绑定父子之间的关系,用于数据传递,缺少则无法传递
                        var body = layer.getChildFrame("body",index);
                        //得到iframe页的窗口对象
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        // //渲染子页面中的img
                        // iframeWin.$('#canvasImage')[0].src = self.canvasImage;
                        var table = ""
                        var house = 0
                        var people = 0
                        var area = 0
                        var money = 0
                        for (let i = 0; i < inPolygon.length; i++) {
                            table += '<tr>'+
                                '<td><div>' + inPolygon[i].name + '</div></td>' +
                                '<td><div>' + inPolygon[i].house + '</div></td>' +
                                '<td><div>' + inPolygon[i].people + '</div></td>' +
                                '<td><div>' + inPolygon[i].area + '</div></td>' +
                                '<td><div>' + inPolygon[i].money + '</div></td>' +
                                '</tr>'
                            house += inPolygon[i].house
                            people += inPolygon[i].people
                            area += inPolygon[i].area
                            money += inPolygon[i].money
                        }
                        iframeWin.$('#evaluate-tbody').html(table)
                        iframeWin.$(".house").html(house + '户')
                        iframeWin.$(".people").html(people + '人')
                        iframeWin.$(".area").html(area + 'km²')
                        iframeWin.$(".money").html(money + '万元')
                    },
                });
            },
            //添加点
            addPoint:function (){
                const url = './widgets/FloodAnalysis/data.json'
                this.getJsonUrl(url)
            },
            showDetail:function(show){
                //显示详情
                if (show){
                    $('.flood-detail').show()
                }else {
                    $('.flood-detail').hide()
                }
            },
            //判断点是否在多边形内部
            isPointInPolygon : function (point){
                //获取经纬度
                var polygonPosition = this.getPositionArray(this.polygonCartesianArray)
                //turf要求首尾闭合
                var turfPolygon = []
                polygonPosition.forEach(e=>{
                    var temp = [e.lon,e.lat]
                    turfPolygon.push(temp)
                })
                turfPolygon.push([polygonPosition[0].lon,polygonPosition[0].lat])
                var poly= turf.polygon([turfPolygon])
                var pt = turf.point([point.LGTD,point.LTTD])
                return turf.booleanPointInPolygon(pt,poly)
            },
            //获取json对象,测试用
            getJsonUrl: function getJsonUrl(url) {
                var self = this;
                $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'get',
                    success: function success(data) {
                        const viewer = self.map
                        var dataArray = data.data
                        dataArray.forEach(e=>{
                            e.house = Number(e.house)
                            e.people = Number(e.people)
                            e.area = Number(e.area)
                            e.money = Number(e.money)
                        })
                        self.peoplePositionArray = []
                        self.peoplePositionArray = dataArray
                        for (let i = 0; i < dataArray.length; i++) {
                            var temp = viewer.entities.add({
                                position: Cesium.Cartesian3.fromDegrees(dataArray[i].LGTD, dataArray[i].LTTD),
                                point: {
                                    color: Cesium.Color.RED,
                                    pixelSize: 16,
                                    //防止地形遮挡住点
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                                },
                            });
                        }
                    }
                });
            },
            //canvas转换为image
            canvasToImage:function (){
                var canvas = this.map.scene.canvas
                let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                this.canvasImage = image
                // //导出看效果
                // let link = document.createElement("a");
                // let blob = this.dataURLtoBlob(image);
                // let objurl = URL.createObjectURL(blob);
                // link.download = "scene.png";
                // link.href = objurl;
                // link.click();
            },
            dataURLtoBlob:function (dataurl) {
            let arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        });
    });
widgets/FloodAnalysis/Widget.html
@@ -1,26 +1,28 @@
<div>
    <div class="flood-analysis-header">
    <div class="analysis-header">
        <i></i> 洪水淹没分析
    </div>
    <!--<div>
        <span>请选择水面线:</span><select id="flightRoute"></select>
    </div>-->
    <div class="flood-water-analysis">
    <div class="dong">
        <ul>
            <li><span>水位(m):</span><input id="flood_analysis_sw_headtab" type="text" value="200" /></li>
            <li><span>分析区域:</span><input id="dong_draw" type="button" value="绘制区域"></li>
            <li><span>最低海拔(米):</span><input type="text" id="dong_min_height"></li>
            <li><span>最高海拔(米):</span><input type="text" id="dong_max_height"></li>
            <li><span>淹没速度(米/秒):</span><input type="text" id='dong_time' value='0.5'></li>
            <li><input id='dong_start' type="button" value="开始分析"><input id='dong_delet' type="button" value="清除"></li>
        </ul>
        <div class="flood-water-analysis-new">
            <div>
                <input type="button" id="flood_hzsm_headtab" value="绘制水面线" />
                <input type="button" id='flood_qcsmx_headtab' value="清除">
            </div>
<!--            <div>-->
<!--                <input type="button" id="thematic_smsz_headtab" value="水面上涨" />-->
<!--                <input type="button" id="thematic_smxj_headtab" value="水面下降" />-->
<!--            </div>-->
        </div>
    </div>
    <p>what why no sea</p>
    <div class="dong-echarts" id='dong_echarts'>
    </div>
    <div class='dong-progress'>
        <h2>分析结果中,请稍等...</h2>
        <span class="container">
            <span id="progress_bar"  class="h-100P bar"></span>
        </span>
    </div>
    <div class="storage-capacity-curve" id="storage_echarts">
    </div>
    <div class="flood-detail">
        <div class="flood-detail-header">
            <i></i> 洪水淹没详情
widgets/FloodAnalysis/Widget.js
@@ -2,615 +2,875 @@
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
    './Tooltip-div',
    './FloodAnalysis',
    'libs/layer/layer.js',
    'libs/turf/turf.min.js'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        tooltip,
        flood,
        layer,
        turf,
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-FloodAnalysis',
            name: 'FloodAnalysis',
            riverWidth: 300,
            riverHeight: 10,
            speed: 10,
            positions: [],
            sideRes: null,
            riverPrimitive: null,
            material: null,
            drawingPolyline: null,
            //绘制的多边形数组
            polygonCartesianArray:[],
            //canvas转换后的图片
            canvasImage:null,
            //房屋人口
            peoplePositionArray:[],
            myWaterPrimitive:null,
            startup: function () {
                this.inherited(arguments);
                var self = this;
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js','libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer,turf) {
    return declare([BaseWidget], {
        baseClass: 'jimu-widget-FloodAnalysis',
        name: 'FloodAnalysis',
        //人员数据点位
        peoplePositionArray:[],
        //绘制多边形的顶点经纬度
        polygonPositionArray:[],
        startup: function startup() {
            // 数组用于存放添加点的Id删除实体点的时候会用到
            var pointId = [];
                this.map.scene.globe.depthTestAgainstTerrain = true;
                //取消双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                //绘制水面事件
                $("#flood_hzsm_headtab").click(function () {
                    DrawDynamicClampGround.startDrawingPolyline(self.map, function (cartesians) {
                        if (self.drawingPolyline != undefined)
                            self.map.entities.remove(self.drawingPolyline);
                        var lineOpts = {
                            polyline: {
                                positions: cartesians,
                                clampToGround: true,
                                width: 3,
                                color: "#279a9a"
            // 鼠标事件
            var waterEntity;
            // 点击绘制按钮开始绘制
            var that = this;
            var yanmo;
            var flag = false;
            var flagScend = false;
            // 海拔
            var altitude = [];
            var drawingMode = 'polygon';
            var activeShape;
            var boildOne = null;
            var boildTwo = null;
            var boildThree = null;
            // 向三维场景中添加的点的集合
            var tempPoints = [];
            var positions = [];
            var handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);
            var shape;
            $('#dong_draw').click(function () {
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
                //隐藏详情框
                that.showDetail(false)
                $('#dong_time').val(0.5);
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //if (handler != null) handler.destroy();
                handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);
                function drawShape(positionData) {
                    if (drawingMode == 'polygon') {
                        shape = that.map.entities.add({
                            polygon: {
                                hierarchy: positionData,
                                material: Cesium.Color.fromBytes(252, 193, 10, 130)
                            }
                        });
                    }
                    that.fixedShape = shape;
                    return shape;
                }
                clearInterval(yanmo);
                yanmo = null;
                positions = [];
                var polygon = null;
                var cartesian = null;
                var floatingPoint; //浮动点
                var activeShapePoints = [];
                var active = null;
                tempPoints = [];
                altitude = [];
                that.map.scene.globe.depthTestAgainstTerrain = false;
                // handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);
                // 取消双击事件-追踪该位置
                that.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                // 鼠标左键点击事件
                handler.setInputAction(function (movement) {
                    // 给鼠标点击增加的点添加随机的ID便于删除
                    var randomId = Math.random() * 100 + 8 + (Math.random() * 500 + 102);
                    var ray = that.map.camera.getPickRay(movement.position);
                    cartesian = that.map.scene.globe.pick(ray, that.map.scene);
                    if (positions.length == 0) {
                        positions.push(cartesian.clone());
                        flagScend = true;
                    }
                    // positions.pop();
                    positions.push(cartesian);
                    // 向三维场景中添加点
                    var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    altitude.push(Math.round(cartographic.height));
                    if (Cesium.defined(cartesian)) {
                        if (activeShapePoints.length === 0) {
                            floatingPoint = that.map.entities.add({
                                // 给实体点添加ID
                                id: '1a-2b-3c',
                                name: '多边形面积',
                                position: positions[positions.length - 1],
                                point: {
                                    pixelSize: 6,
                                    color: Cesium.Color.RED,
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                                }
                            });
                            pointId.push('1a-2b-3c');
                            activeShapePoints.push(cartesian);
                            var dynamicPositions = new Cesium.CallbackProperty(function () {
                                if (drawingMode === 'polygon') {
                                    return new Cesium.PolygonHierarchy(activeShapePoints);
                                }
                                return activeShapePoints;
                            }, false);
                            active = drawShape(dynamicPositions); //绘制动态图
                        }
                        activeShapePoints.push(cartesian);
                        floatingPoint = that.map.entities.add({
                            // 给实体点添加ID
                            id: randomId,
                            name: '多边形面积',
                            position: positions[positions.length - 1],
                            point: {
                                pixelSize: 6,
                                color: Cesium.Color.RED,
                                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                            }
                        });
                        pointId.push(randomId);
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                // 鼠标移动事件
                handler.setInputAction(function (event) {
                    if (positions.length == 0) {
                        that.map.entities.remove(boildOne);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildOne = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击开始绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length == 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildTwo = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length > 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        that.map.entities.remove(boildThree);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildThree = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点,右键点击完成绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(120, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (Cesium.defined(floatingPoint)) {
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        if (Cesium.defined(newPosition)) {
                            floatingPoint.position.setValue(newPosition);
                            activeShapePoints.pop();
                            activeShapePoints.push(newPosition);
                        }
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                // 鼠标右键点击事件
                handler.setInputAction(function (movement) {
                    var cartographic = Cesium.Cartographic.fromCartesian(that.map.scene.globe.pick(that.map.camera.getPickRay(movement.position), that.map.scene));
                    // 向三维场景中添加点
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    that.polygonPositionArray = tempPoints
                    positions.push(activeShapePoints[activeShapePoints.length - 1]);
                    if (positions.length >= 2) {
                        if (!Cesium.defined(polygon)) {
                            polygon = new PolygonPrimitive(positions);
                        } else {
                            positions.pop();
                            positions.push(cartesian);
                        }
                    }
                    if (activeShapePoints.length) {
                        activeShape = drawShape(activeShapePoints); //绘制最终图
                    }
                    // that.map.entities.remove(floatingPoint);
                    that.map.entities.remove(active);
                    that.map.entities.remove(boildOne);
                    that.map.entities.remove(boildTwo);
                    that.map.entities.remove(boildThree);
                    if (!flagScend) return;
                    flagScend = false;
                    altitude.push(Math.round(cartographic.height));
                    altitude.sort(function (a, b) {
                        if (a > b) return 1;else if (a < b) return -1;else return 0;
                    });
                    $('#dong_max_height').val(altitude[altitude.length - 1]);
                    $('#dong_min_height').val(altitude[0]);
                    handler.destroy();
                    flag = true;
                    return;
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
                var PolygonPrimitive = function () {
                    function _(positions) {
                        this.options = {
                            name: '多边形',
                            polygon: {
                                hierarchy: [],
                                material: Cesium.Color.WHITE.withAlpha(0)
                            }
                        };
                        self.drawingPolyline = self.map.entities.add(lineOpts);
                        cartesians.splice(cartesians.length - 1, cartesians.length);
                        self.drawLines(cartesians);
                        self.movehandLer()
                        self.showDetail(true)
                        this.positions = positions;
                        this._init();
                    }
                    _.prototype._init = function () {
                        var _self = this;
                        //实时更新polygon.hierarchy
                        this.options.polygon.hierarchy = new Cesium.CallbackProperty(function () {
                            return new Cesium.PolygonHierarchy(positions);
                        }, false);
                        waterEntity = that.map.entities.add(this.options);
                        that.fixedWaterEntity = waterEntity;
                    };
                    return _;
                }();
            });
            // 点击开始分析按钮,开始分析
            $('#dong_start').click(function () {
                //宽度设置为0 隐藏进度条
                $('.dong-progress .container #progress_bar').width(0);
                //隐藏div
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                if (flag != true) {
                    if (yanmo != null) {
                        layer.msg('请等待绘制完成', {
                            time: 1000
                        });
                        return;
                    }
                    layer.msg('请先选择绘制区域', {
                        time: 1000
                    });
                    return;
                };
                // 提取坐标信息
                var list = waterEntity.polygon.hierarchy.getValue().positions;
                // 存放坐标信息,做请求数据使用
                var echartRings = [[]];
                // 处理坐标信息,将世界坐标转换成经纬度
                for (var i = 1; i < list.length; i++) {
                    var cartographic = Cesium.Cartographic.fromCartesian(list[i]);
                    var lat = Cesium.Math.toDegrees(cartographic.latitude);
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    echartRings[0].push([lng, lat]);
                }
                // // 发请求数据
                // var enenen = {
                //     "displayFieldName": "",
                //     "geometryType": "esriGeometryPolygon",
                //     "spatialReference": {
                //         "wkid": 4490,
                //         "latestWkid": 4490
                //     },
                //     "fields": [{
                //         "name": "OBJECTID",
                //         "type": "esriFieldTypeOID",
                //         "alias": "OBJECTID"
                //     }, {
                //         "name": "SHAPE_Length",
                //         "type": "esriFieldTypeDouble",
                //         "alias": "SHAPE_Length"
                //     }, {
                //         "name": "SHAPE_Area",
                //         "type": "esriFieldTypeDouble",
                //         "alias": "SHAPE_Area"
                //     }],
                //     "features": [{
                //         "geometry": {
                //             "rings": echartRings,
                //             "spatialReference": {
                //                 "wkid": 4490,
                //                 "latestWkid": 4490
                //             }
                //         },
                //         "symbol": null,
                //         "attributes": {
                //             "OBJECTID": 1163
                //         }
                //     }],
                //     "exceededTransferLimit": false
                //     // 数据转换格式
                // };enenen = JSON.stringify(enenen);
                that.map.entities.remove(activeShape);
                // 最高海拔
                var maxHet = Number($('#dong_max_height').val());
                // 最低海拔
                var minHet = Number($('#dong_min_height').val());
                // 每秒上升海拔
                var time = Number($('#dong_time').val());
                // 动态获取最低海拔
                $('#dong_min_height').change(function () {
                    minHet = $(this).val();
                });
                $('#flood_qcsmx_headtab').click(function () {
                    self.map.entities.remove(self.drawingPolyline);
                    self.map.scene.primitives.remove(self.riverPrimitive);
                    self.showDetail(false)
                })
                // 总淹没体积
                var textArea = parseInt(getArea(tempPoints) * (maxHet - minHet) / 100000);
                var seriesData = [];
                var altitude = (maxHet - minHet) / 20;
                var altitudeHet = 0;
                // 1秒后开始进入淹没分析
                setTimeout(function () {
                    flag = false;
                    if (waterEntity) {
                        that.map.scene.globe.depthTestAgainstTerrain = true;
                        waterEntity.polygon.perPositionHeight = true, waterEntity.polygon.material = Cesium.Color.fromBytes(33, 122, 193, 220);
                        var h = minHet - 50 || altitude[0] - 50;
                        waterEntity.polygon.extrudedHeight = minHet - 50 || altitude[0] - 50; //需要提前设置 不然会全部出现
                        yanmo = setInterval(function () {
                            h = h + time || 1;
                            if (h >= (maxHet || altitude[altitude.length - 1])) {
                                h = maxHet || altitude[altitude.length - 1]; //给个最大值
                                waterEntity.polygon.extrudedHeight = h;
                                clearTimeout(yanmo);
                                flag = true;
                // $("#thematic_hlkd_headtab").change(function (e) {
                //     self.riverWidth = Number($(this).val());
                //     self.resetPos();
                // });
                $("#flood_analysis_sw_headtab").change(function (e) {
                    self.riverHeight = Number($(this).val());
                    self.resetPos();
                });
                // $("#thematic_sls_headtab").change(function (e) {
                //     self.speed = Number($(this).val());
                //     self.resetPos();
                // });
                //
                // $("#thematic_smsz_headtab").click(function () {
                //     self.offsetHeight(Number($("#thematic_bhz_headtab").val()), 5);
                // });
                //
                // $("#thematic_smxj_headtab").click(function () {
                //     self.offsetHeight(-Number($("#thematic_bhz_headtab").val()), 5);
                // });
                $('#flood-detail-ksfx').click(function () {
                    self.floodAnalysisPopup()
                })
                                // //显示div
                                // $('.dong-progress').stop().show();
                                // // 总长度
                                // var totalWidth = $('.dong-progress .container').width();
                                // // 过度长度
                                // var excessiveWidth = totalWidth / 100;
                                // var watchWidth = 0;
                                // // 进度条的定时器
                                // var proTime = setInterval(function () {
                                //     watchWidth += excessiveWidth;
                                //     if (watchWidth > totalWidth) {
                                //         watchWidth = totalWidth;
                                //     }
                                //     $('.dong-progress .container #progress_bar').width(watchWidth);
                                // }, 22);
                                // $.ajax({
                                //     url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/submitJob',
                                //     type: 'post',
                                //     dataType: 'json',
                                //     data: {
                                //         f: 'pjson',
                                //         fxfw: enenen
                                //     },
                                //     success: function success(result) {
                                //         troubleshooting(0);
                                //
                                //         function troubleshooting(i) {
                                //             $.ajax({
                                //                 url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/jobs/' + result.jobId + '?f=pjson',
                                //                 type: 'get',
                                //                 dataType: 'json',
                                //                 data: {},
                                //                 success: function success(data) {
                                //                     if (data.jobStatus == 'esriJobSucceeded') {
                                //                         var perurl = data.results.fxfw_Intersect_Statistics.paramUrl;
                                //                         $.ajax({
                                //                             url: 'http://171.35.109.175:18080/arcgis/rest/services/GZSW/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/GPServer/%E5%8F%A0%E5%8A%A0%E5%88%86%E6%9E%90/jobs/' + result.jobId + '/' + perurl,
                                //                             type: 'post',
                                //                             dataType: 'json',
                                //                             data: {
                                //                                 f: 'pjson'
                                //                             },
                                //                             success: function success(message) {
                                //                                 if (watchWidth < totalWidth) {
                                //                                     watchWidth = totalWidth;
                                //                                 }
                                //                                 clearInterval(proTime);
                                //                                 // 在此处创建库容曲线
                                //                                 var storageLine = echarts.init(document.getElementById('storage_echarts'));
                                //                                 var storageOptions = {
                                //                                     title: {
                                //                                         text: '库容曲线'
                                //                                     },
                                //                                     tooltip: {
                                //                                         trigger: 'axis'
                                //                                     },
                                //                                     gird: {
                                //                                         top: '20px'
                                //                                     },
                                //                                     legend: {
                                //                                         data: ['最大淹没体积']
                                //                                     },
                                //                                     xAxis: {
                                //                                         type: 'value',
                                //                                         min: 0,
                                //                                         max: textArea,
                                //                                         splitNumber: 10
                                //                                     },
                                //                                     yAxis: {
                                //                                         name: '水位(m)',
                                //                                         nameTextStyle: {
                                //                                             color: 'rgba(40, 37, 161, 0.849)'
                                //                                         },
                                //                                         type: 'value',
                                //                                         min: 0,
                                //                                         max: maxHet,
                                //                                         splitNumber: 10,
                                //                                         axisLabel: {
                                //                                             formatter: '{value}'
                                //                                         }
                                //                                     },
                                //                                     series: [{
                                //                                         name: '最大淹没体积',
                                //                                         type: 'line',
                                //                                         data: [],
                                //                                         smooth: true
                                //                                     }]
                                //                                 };
                                //                                 storageOptions.series[0].data = seriesData;
                                //                                 storageLine.setOption(storageOptions);
                                //
                                //                                 var features = message.value.features;
                                //                                 if (features == false) {
                                //                                     layer.msg('此处不在可分析范围内', {
                                //
                                //                                         time: 1000
                                //                                     });
                                //                                     $('.dong-progress .container #progress_bar').width(0);
                                //                                     $('.dong-progress').stop().hide();
                                //                                     return;
                                //                                 }
                                //                                 $('.dong-progress .container #progress_bar').width(totalWidth);
                                //                                 var echartsResult = [];
                                //                                 var subTitle = '';
                                //                                 // 淹没总面积
                                //                                 var shapeAreas = 0;
                                //                                 var echartsName = null;
                                //                                 var echartsColor = null;
                                //                                 for (var j = 0; j < features.length; j++) {
                                //                                     shapeAreas += features[j].attributes.SUM_Shape_Area;
                                //                                 }
                                //                                 for (var i = 0; i < features.length; i++) {
                                //                                     if (features[i].attributes.gridcode == 1) {
                                //                                         echartsName = '城镇';
                                //                                         echartsColor = '#B56DD1';
                                //                                     } else if (features[i].attributes.gridcode == 2) {
                                //                                         echartsName = '植被';
                                //                                         echartsColor = '#5F8812';
                                //                                     } else if (features[i].attributes.gridcode == 3) {
                                //                                         echartsName = '水域';
                                //                                         echartsColor = '#0B6FC5';
                                //                                     } else if (features[i].attributes.gridcode == 4) {
                                //                                         echartsName = '裸地';
                                //                                         echartsColor = '#CE8B44';
                                //                                     } else if (features[i].attributes.gridcode == 5) {
                                //                                         echartsName = '农业用地';
                                //                                         echartsColor = '#B5D874';
                                //                                     }
                                //                                     echartsResult.push({
                                //                                         value: (features[i].attributes.SUM_Shape_Area / 1000000).toFixed(2),
                                //                                         name: echartsName,
                                //                                         itemStyle: {
                                //                                             color: echartsColor
                                //                                         }
                                //                                     });
                                //                                     subTitle += echartsName + '淹没面积为' + (features[i].attributes.SUM_Shape_Area / 1000000).toFixed(2) + 'km²,占比为' + (features[i].attributes.SUM_Shape_Area / shapeAreas * 100).toFixed(2) + '%;';
                                //                                 }
                                //                                 var textSub = '\u6DF9\u6CA1\u6D77\u62D4\u9AD8\u5EA6\u4E3A' + maxHet + 'm\uFF0C\u6DF9\u6CA1\u603B\u9762\u79EF\u4E3A' + (shapeAreas / 1000000).toFixed(2) + 'km\xB2\u3002\u5176\u4E2D';
                                //                                 textSub += subTitle;
                                //                                 $('.jimu-widget-AnalysisOfBarrierLake p').text(textSub);
                                //                                 var echartsData = echarts.init(document.getElementById('dong_echarts'));
                                //                                 var options = {
                                //                                     title: {
                                //                                         text: '淹没分析结果',
                                //                                         left: '41%',
                                //                                         textStyle: {
                                //                                             color: '#5DBFFF',
                                //                                             fontSize: 26
                                //                                         },
                                //                                         top: 14
                                //                                     },
                                //                                     tooltip: {
                                //                                         trigger: 'item',
                                //                                         formatter: '{b} <br/>面积 : {c} km² ({d}%)',
                                //                                         position: 'right'
                                //                                     },
                                //                                     legend: {
                                //                                         orient: 'vertical',
                                //                                         // top: 'middle',
                                //                                         right: 4,
                                //                                         bottom: 2,
                                //                                         textStyle: { //图例文字的样式
                                //                                             color: '#fff',
                                //                                             fontSize: 14
                                //                                         },
                                //                                         data: ['城镇', '植被', '水域', '裸地', '农业用地']
                                //                                     },
                                //                                     series: [{
                                //                                         type: 'pie',
                                //                                         radius: '80%',
                                //                                         center: ['55%', '56%'],
                                //                                         selectedMode: 'single',
                                //                                         label: {
                                //                                             normal: {
                                //                                                 position: 'inner',
                                //                                                 show: false
                                //                                             }
                                //                                         },
                                //                                         data: echartsResult,
                                //                                         emphasis: {
                                //                                             itemStyle: {
                                //                                                 shadowBlur: 10,
                                //                                                 shadowOffsetX: 0,
                                //                                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                                //                                             }
                                //                                         }
                                //                                     }]
                                //                                 };
                                //                                 echartsData.setOption(options);
                                //                                 $('.dong-progress .container #progress_bar').width(0);
                                //                                 $('.dong-progress').stop().hide();
                                //                                 $('#dong_echarts').stop().show();
                                //                                 $('.jimu-widget-AnalysisOfBarrierLake p').stop().show();
                                //                             }
                                //                         });
                                //                         return;
                                //                     } else {
                                //                         troubleshooting(i + 1);
                                //                     }
                                //                 }
                                //             });
                                //         }
                                //     }
                                // });
            },
            init: function () {
                this.prepareVertex();
                if (this.sideRes) {
                    this.material = this.prepareMaterial();
                    this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
                    this.riverPrimitive = this.createPrimitive();
                    this.myWaterPrimitive = this.map.scene.primitives.add(this.riverPrimitive);
                }
            },
            prepareVertex: function () {
                if (this.positions.length > 0) {
                    this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
                }
            },
            setPositions: function (e) {
                this.positions = e;
                this.init();
            },
            resetPos: function () {
                this.sideRes = this._lines2Plane(this.positions, this.riverWidth, this.riverHeight);
                if (this.sideRes) {
                    this.material = this.prepareMaterial();
                    this.riverPrimitive && this.map.scene.primitives.remove(this.riverPrimitive);
                    this.riverPrimitive = this.createPrimitive();
                    this.map.scene.primitives.add(this.riverPrimitive);
                }
            },
            drawLines: function (r) {
                this.setPositions(r);
            },
            prepareMaterial: function () {
                var e = new Cesium.Material({
                    fabric: {
                        uniforms: {
                            image: "widgets/ThematicDynamicRiver/images/movingRiver.png",
                            alpha: 0.5,
                            moveVar: new Cesium.Cartesian3(50, 1, 100),
                            reflux: -1,
                            speed: this.speed,
                            move: true,
                            flipY: false
                        },
                        source: "czm_material czm_getMaterial(czm_materialInput materialInput) { \n                        czm_material material = czm_getDefaultMaterial(materialInput); \n                        vec2 st = materialInput.st;\n                        if(move){\n                            float r = sqrt((st.x-0.8)*(st.x-0.8) + (st.y-0.8)*(st.y-0.8));\n                            float r2 = sqrt((st.x-0.2)*(st.x-0.2) + (st.y-0.2)*(st.y-0.2));\n                            float z = cos(moveVar.x*r + czm_frameNumber/100.0*moveVar.y)/moveVar.z;\n                            float z2 = cos(moveVar.x*r2 + czm_frameNumber/100.0*moveVar.y)/moveVar.z;\n                            st += sqrt(z*z+z2*z2);\n                            st.s += reflux * czm_frameNumber/1000.0 * speed;\n                            st.s = mod(st.s,1.0);\n                        }\n                        if(flipY){\n                            st = vec2(st.t,st.s);\n                        }\n                        vec4 colorImage = texture2D(image, st);\n                        material.alpha = alpha;\n                        material.diffuse = colorImage.rgb; \n                        return material; \n                    }"
                                return;
                            }
                            waterEntity.polygon.extrudedHeight = h;
                            that.showDetail(true)
                        }, 100);
                    }
                });
                return e
            },
            createPrimitive: function () {
                var t = new Float64Array(this.sideRes.vertexs),
                    i = new Cesium.GeometryAttributes;
                i.position = new Cesium.GeometryAttribute({
                    componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                    componentsPerAttribute: 3,
                    values: t
                }),
                    i.st = new Cesium.GeometryAttribute({
                        componentDatatype: Cesium.ComponentDatatype.FLOAT,
                        componentsPerAttribute: 2,
                        values: this.sideRes.uvs
                    });
                var r = new Cesium.Geometry({
                    attributes: i,
                    indices: this.sideRes.indexs,
                    primitiveType: Cesium.PrimitiveType.TRIANGLES,
                    boundingSphere: Cesium.BoundingSphere.fromVertices(t)
                }),
                    n = new Cesium.GeometryInstance({
                        geometry: r
                    }),
                    o = new Cesium.RenderState;
                return o.depthTest.enabled = !0, new Cesium.Primitive({
                    geometryInstances: n,
                    appearance: new Cesium.Appearance({
                        material: this.material,
                        renderState: o,
                        vertexShaderSource: "attribute vec3 position3DHigh;\n                attribute vec3 position3DLow;\n                attribute vec2 st;\n                attribute float batchId;\n                \n                varying vec3 v_positionMC;\n                varying vec3 v_positionEC;\n                varying vec2 v_st;\n                \n                void main()\n                {\n                    vec4 p = czm_computePosition();\n                \n                    v_positionMC = position3DHigh + position3DLow;           // position in model coordinates\n                    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;     // position in eye coordinates\n                    v_st = st;\n                \n                    gl_Position = czm_modelViewProjectionRelativeToEye * p;\n                }\n                ",
                        fragmentShaderSource: "varying vec3 v_positionMC;\n                varying vec3 v_positionEC;\n                varying vec2 v_st;\n                \n                void main()\n                {\n                    czm_materialInput materialInput;\n                \n                    vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0)));\n                #ifdef FACE_FORWARD\n                    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);\n                #endif\n                \n                    materialInput.s = v_st.s;\n                    materialInput.st = v_st;\n                    materialInput.str = vec3(v_st, 0.0);\n                \n                    // Convert tangent space material normal to eye space\n                    materialInput.normalEC = normalEC;\n                    materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC);\n                \n                    // Convert view vector to world space\n                    vec3 positionToEyeEC = -v_positionEC;\n                    materialInput.positionToEyeEC = positionToEyeEC;\n                \n                    czm_material material = czm_getMaterial(materialInput);\n                \n                #ifdef FLAT\n                    gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);\n                #else\n                    gl_FragColor = czm_phong(normalize(positionToEyeEC), material,czm_lightDirectionEC);\n                #endif\n                }\n                "
                    })
                })
            },
            offsetHeight: function (height, time) {
                this.startDH(height, time)
            },
            startDH: function (height, time) {
                if (height && time && this.riverPrimitive) {
                    for (var i = this, r = 0, n = height / (20 * time), o = this.sideRes.self, s = new Cesium.Cartesian3, l = 0, u = o.length; l < u; l++) {
                        var c = Cesium.Cartesian3.normalize(o[l], new Cesium.Cartesian3);
                        Cesium.Cartesian3.add(s, c, s)
                    }
                    Cesium.Cartesian3.normalize(s, s);
                    var h = Cesium.clone(this.riverPrimitive.modelMatrix);
                    this.dhEvent = function () {
                        if (Math.abs(r) <= Math.abs(height)) {
                            var t = Cesium.Cartesian3.multiplyByScalar(s, r, new Cesium.Cartesian3);
                            i.riverPrimitive.modelMatrix = Cesium.Matrix4.multiplyByTranslation(h, t, new Cesium.Matrix4)
                        } else i.map.clock.onTick.removeEventListener(i.dhEvent);
                        r += n
                    }, this.map.clock.onTick.addEventListener(this.dhEvent)
                }
            },
            //水面线转成水面
            _lines2Plane: function (positions, width, height) {
                function n(point, height) {
                    if (!(point instanceof Cesium.Cartesian3)) return void console.log("请确认点是Cartesian3类型!");
                    if (!height || 0 == height) return void console.log("请确认高度是非零数值!");
                    var i = Cesium.Cartesian3.normalize(point, new Cesium.Cartesian3),
                        r = new Cesium.Ray(point, i);//射线
                    return Cesium.Ray.getPoint(r, height)
                }, 1000);
            });
            $('#dong_delet').click(function () {
                that.showDetail(false)
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
                handler.destroy();
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                clearInterval(yanmo);
                yanmo = null;
            });
            $('#flood-detail-ksfx').click(function () {
                that.floodAnalysisPopup()
            })
            var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)
            var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度
            function getArea(points) {
                var res = 0;
                //拆分三角曲面
                for (var i = 0; i < points.length - 2; i++) {
                    var j = (i + 1) % points.length;
                    var k = (i + 2) % points.length;
                    var totalAngle = Angle(points[i], points[j], points[k]);
                    var dis_temp1 = distance(positions[i], positions[j]);
                    var dis_temp2 = distance(positions[j], positions[k]);
                    res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));
                }
                function o(point, point1, height) {
                    var r = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(point1, point, new Cesium.Cartesian3), new Cesium.Cartesian3),
                        n = Cesium.Cartesian3.normalize(point, new Cesium.Cartesian3),
                        o = Cesium.Cartesian3.cross(n, r, new Cesium.Cartesian3),
                        a = Cesium.Cartesian3.cross(r, n, new Cesium.Cartesian3),
                        l = new Cesium.Ray(point, o),
                        u = new Cesium.Ray(point, a);
                    return {
                        left: Cesium.Ray.getPoint(l, height),
                        right: Cesium.Ray.getPoint(u, height)
                    }
                }
                if (!positions || positions.length <= 1 || !width || 0 == width) return void console.log("请确认参数符合规则:数组长度大于1,宽高不能为0!");
                for (var r = positions.length, a = [], l = [], u = width / 2, c = 0; c < r; c++) {
                    var h = void 0,
                        d = void 0,
                        f = void 0,
                        p = void 0,
                        m = void 0;
                    if (0 == c ? (h = positions[c], d = positions[c], f = positions[c + 1]) : c == r - 1 ? (h = positions[c - 1], d = positions[c], f = positions[c - 1]) : (h = positions[c - 1], d = positions[c], f = positions[c + 1]), 0 != height && (h = n(h, height), d = n(d, height), f = n(f, height)), h && d && f) {
                        var g = o(d, f, u);
                        if (p = g.left, m = g.right, 0 == c) {
                            a.push(p), l.push(m), a.push(p), l.push(m);
                            continue
                        }
                        if (!(c < r - 1)) {
                            a.push(m), l.push(p), a.push(m), l.push(p);
                            continue
                        }
                        a.push(p), l.push(m), g = o(d, h, u), p = g.left, m = g.right, a.push(m), l.push(p)
                    }
                }
                var v = [],
                    y = [];
                if (a.length != 2 * r) return void console.log("计算左右侧点出问题!");
                for (var _ = 0; _ < r; _++) {
                    var w = positions[_],
                        b = a[2 * _ + 0],
                        C = a[2 * _ + 1],
                        x = Cesium.Cartesian3.subtract(b, w, new Cesium.Cartesian3),
                        P = Cesium.Cartesian3.subtract(C, w, new Cesium.Cartesian3),
                        M = Cesium.Cartesian3.add(x, P, new Cesium.Cartesian3),
                        E = Cesium.Cartesian3.add(w, M, new Cesium.Cartesian3);
                    v.push(Cesium.clone(E));
                    var T = l[2 * _ + 0],
                        S = l[2 * _ + 1];
                    x = Cesium.Cartesian3.subtract(T, w, new Cesium.Cartesian3), P = Cesium.Cartesian3.subtract(S, w, new Cesium.Cartesian3), M = Cesium.Cartesian3.add(x, P, new Cesium.Cartesian3), E = Cesium.Cartesian3.add(w, M, new Cesium.Cartesian3), y.push(Cesium.clone(E))
                }
                for (var O = [], D = [], k = [], A = [], R = [], F = 0; F < r; F++) {
                    var L = Cesium.EncodedCartesian3.fromCartesian(y[F]);
                    D.push(y[F].x), D.push(y[F].y), D.push(y[F].z), k.push(L.high.x), k.push(L.high.y), k.push(L.high.z), A.push(L.low.x), A.push(L.low.y), A.push(L.low.z), O.push(1, 1), F < r - 1 && (R.push(F + 2 * r), R.push(F + 1), R.push(F + 1 + r), R.push(F + 2 * r), R.push(F + 1 + r), R.push(r + F + 2 * r))
                }
                for (var I = 0; I < r; I++) {
                    var N = Cesium.EncodedCartesian3.fromCartesian(v[I]);
                    D.push(v[I].x), D.push(v[I].y), D.push(v[I].z), k.push(N.high.x), k.push(N.high.y), k.push(N.high.z), A.push(N.low.x), A.push(N.low.y), A.push(N.low.z), O.push(1, 0)
                }
                for (var V = 0; V < r; V++) {
                    var z = Cesium.EncodedCartesian3.fromCartesian(y[V]);
                    D.push(y[V].x), D.push(y[V].y), D.push(y[V].z), k.push(z.high.x), k.push(z.high.y), k.push(z.high.z), A.push(z.low.x), A.push(z.low.y), A.push(z.low.z), O.push(0, 1)
                }
                for (var H = 0; H < r; H++) {
                    var B = Cesium.EncodedCartesian3.fromCartesian(v[H]);
                    D.push(v[H].x), D.push(v[H].y), D.push(v[H].z), k.push(B.high.x), k.push(B.high.y), k.push(B.high.z), A.push(B.low.x), A.push(B.low.y), A.push(B.low.z), O.push(0, 0)
                }
                this.polygonCartesianArray = []
                for (let i = 0; i < y.length; i++) {
                    this.polygonCartesianArray.push(y[i])
                }
                for (let i = 0; i < v.length; i++) {
                    this.polygonCartesianArray.push(v[i])
                }
                //计算polygon面积
                this.getPolygonArea(this.getPositionArray(this.polygonCartesianArray),this.polygonCartesianArray)
                return {
                    left: v,
                    right: y,
                    self: positions,
                    vertexs: new Float32Array(D),
                    vertexsH: new Float32Array(k),
                    vertexsL: new Float32Array(A),
                    indexs: new Uint16Array(R),
                    uvs: new Float32Array(O)
                }
            },
            onOpen: function () {
                //面板打开的时候触发 (when open this panel trigger)
                this.map.scene.globe.baseColor = Cesium.Color.BLACK;
                //初始化点
                this.addPoint()
                //切换底图
                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
                $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
                this.map.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(116.021604,25.893668, 50000),
                });
                this.showDetail(false)
            },
            onClose: function () {
                //面板关闭的时候触发 (when this panel is closed trigger)
                this.map.entities.remove(this.drawingPolyline);
                this.map.scene.primitives.remove(this.riverPrimitive);
                this.map.entities.removeAll()
            },
            onMinimize: function () {
                this.resize();
            },
            onMaximize: function () {
                this.resize();
            },
            resize: function () {
            },
            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            },
            //Cartesian3转换为经纬度
            getPositionArray:function (cartesiansArray){
                var positionArray = []
                if (cartesiansArray.length>0){
                    for (let i = 0; i < cartesiansArray.length; i++) {
                        //获取的对象中的经纬度为弧度
                        let cartographic= Cesium.Cartographic.fromCartesian(cartesiansArray[i])
                        //弧度转换
                        let longitude = Cesium.Math.toDegrees(cartographic.longitude)
                        let latitude = Cesium.Math.toDegrees(cartographic.latitude)
                        let height = cartographic.height
                        positionArray.push({
                            lon:longitude,
                            lat:latitude,
                            hei:height,
                        })
                    }
                }
                return positionArray
            },
            //获取多边形面积
            getPolygonArea:function (points,positions){
                let radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
                let degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
                //计算多边形面积
                function getArea(points) {
                    let res = 0;
                    //拆分三角曲面
                    for (let i = 0; i < points.length - 2; i++) {
                        let j = (i + 1) % points.length;
                        let k = (i + 2) % points.length;
                        let totalAngle = Angle(points[i], points[j], points[k]);
                        let dis_temp1 = distance(positions[i], positions[j]);
                        let dis_temp2 = distance(positions[j], positions[k]);
                        res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle)) ;
                    }
                    return (res/1000000.0).toFixed(4);
                }
                /*角度*/
                function Angle(p1, p2, p3) {
                    let bearing21 = Bearing(p2, p1);
                    let bearing23 = Bearing(p2, p3);
                    let angle = bearing21 - bearing23;
                    if (angle < 0) {
                        angle += 360;
                    }
                    return angle;
                }
                /*方向*/
                function Bearing(from, to) {
                    let lat1 = from.lat * radiansPerDegree;
                    let lon1 = from.lon * radiansPerDegree;
                    let lat2 = to.lat * radiansPerDegree;
                    let lon2 = to.lon * radiansPerDegree;
                    let angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
                    if (angle < 0) {
                        angle += Math.PI * 2.0;
                    }
                    angle = angle * degreesPerRadian;//角度
                    return angle;
                }
                //计算距离
                function distance(point1,point2){
                    let point1cartographic = Cesium.Cartographic.fromCartesian(point1);
                    let point2cartographic = Cesium.Cartographic.fromCartesian(point2);
                    /**根据经纬度计算出距离**/
                    let geodesic = new Cesium.EllipsoidGeodesic();
                    geodesic.setEndPoints(point1cartographic, point2cartographic);
                    let s = geodesic.surfaceDistance;
                    //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
                    //返回两点之间的距离
                    s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
                    return s;
                }
                console.log(getArea(points)+"平方公里","777")
            },
            //鼠标事件
            movehandLer: function movehandLer() {
                // 取消默认双击事件
                this.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                // 获取鼠标事件
                this.mountainHandler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
                // 给鼠标左键添加事件函数
                this.mountainHandler.setInputAction(lang.hitch(this, this.clickHand), Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            //点击事件
            clickHand:function (click){
                var pickedObjects = this.map.scene.pick(click.position);
                if (pickedObjects && pickedObjects.primitive instanceof Cesium.Primitive) {
                    // this.canvasToImage()
                    this.floodAnalysisPopup()
                }
            },
            //洪水分析弹窗
            floodAnalysisPopup:function (){
                var url = './corelib/common/popup/floodAnalysis.html';
                var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
                var top = ($(window).height() - 600) / 2;
                var left = ($(window).width() - 900 - 340) / 2 + 340;
                var self = this
                var inPolygon = []
                for (let i = 0; i < this.peoplePositionArray.length; i++) {
                    let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                    if (isIn){
                        inPolygon.push(this.peoplePositionArray[i])
                    }
                }
                var jsonStr = JSON.stringify(inPolygon)
                layer.open({
                    title:'评估分析',
                    type: 2,
                    maxmin: false, //开启最大化最小化按钮
                    area: ['1100px', '600px'],
                    skin: 'floodAnalysis',
                    offset: [top, left],
                    content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码,避免中文字符乱码,避免url截取错误
                    id: "floodAnalysisLayer",
                    closeBtn: 1,
                    //把父页面数据传递给子弹窗并渲染
                    success: function(layero, index) {
                        //绑定父子之间的关系,用于数据传递,缺少则无法传递
                        var body = layer.getChildFrame("body",index);
                        //得到iframe页的窗口对象
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        // //渲染子页面中的img
                        // iframeWin.$('#canvasImage')[0].src = self.canvasImage;
                        var table = ""
                        var house = 0
                        var people = 0
                        var area = 0
                        var money = 0
                        for (let i = 0; i < inPolygon.length; i++) {
                            table += '<tr>'+
                                '<td><div>' + inPolygon[i].name + '</div></td>' +
                                '<td><div>' + inPolygon[i].house + '</div></td>' +
                                '<td><div>' + inPolygon[i].people + '</div></td>' +
                                '<td><div>' + inPolygon[i].area + '</div></td>' +
                                '<td><div>' + inPolygon[i].money + '</div></td>' +
                                '</tr>'
                            house += inPolygon[i].house
                            people += inPolygon[i].people
                            area += inPolygon[i].area
                            money += inPolygon[i].money
                        }
                        iframeWin.$('#evaluate-tbody').html(table)
                        iframeWin.$(".house").html(house + '户')
                        iframeWin.$(".people").html(people + '人')
                        iframeWin.$(".area").html(area + 'km²')
                        iframeWin.$(".money").html(money + '万元')
                    },
                });
            },
            //添加点
            addPoint:function (){
                const url = './widgets/FloodAnalysis/data.json'
                this.getJsonUrl(url)
            },
            showDetail:function(show){
                //显示详情
                if (show){
                    $('.flood-detail').show()
                }else {
                    $('.flood-detail').hide()
                }
            },
            //判断点是否在多边形内部
            isPointInPolygon : function (point){
                //获取经纬度
                var polygonPosition = this.getPositionArray(this.polygonCartesianArray)
                //turf要求首尾闭合
                var turfPolygon = []
                polygonPosition.forEach(e=>{
                    var temp = [e.lon,e.lat]
                    turfPolygon.push(temp)
                })
                turfPolygon.push([polygonPosition[0].lon,polygonPosition[0].lat])
                var poly= turf.polygon([turfPolygon])
                var pt = turf.point([point.LGTD,point.LTTD])
                return turf.booleanPointInPolygon(pt,poly)
            },
            //获取json对象,测试用
            getJsonUrl: function getJsonUrl(url) {
                var self = this;
                $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'get',
                    success: function success(data) {
                        const viewer = self.map
                        var dataArray = data.data
                        dataArray.forEach(e=>{
                            e.house = Number(e.house)
                            e.people = Number(e.people)
                            e.area = Number(e.area)
                            e.money = Number(e.money)
                        })
                        self.peoplePositionArray = []
                        self.peoplePositionArray = dataArray
                        for (let i = 0; i < dataArray.length; i++) {
                            var temp = viewer.entities.add({
                                position: Cesium.Cartesian3.fromDegrees(dataArray[i].LGTD, dataArray[i].LTTD),
                                point: {
                                    color: Cesium.Color.RED,
                                    pixelSize: 16,
                                    //防止地形遮挡住点
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                                },
                            });
                        }
                    }
                });
            },
            //canvas转换为image
            canvasToImage:function (){
                var canvas = this.map.scene.canvas
                let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                this.canvasImage = image
                // //导出看效果
                // let link = document.createElement("a");
                // let blob = this.dataURLtoBlob(image);
                // let objurl = URL.createObjectURL(blob);
                // link.download = "scene.png";
                // link.href = objurl;
                // link.click();
            },
            dataURLtoBlob:function (dataurl) {
            let arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
                return (res / 1000000.0).toFixed(4);
            }
            return new Blob([u8arr], { type: mime });
            /*角度*/
            function Angle(p1, p2, p3) {
                var bearing21 = Bearing(p2, p1);
                var bearing23 = Bearing(p2, p3);
                var angle = bearing21 - bearing23;
                if (angle < 0) {
                    angle += 360;
                }
                return angle;
            }
            /*方向*/
            function Bearing(from, to) {
                var lat1 = from.lat * radiansPerDegree;
                var lon1 = from.lon * radiansPerDegree;
                var lat2 = to.lat * radiansPerDegree;
                var lon2 = to.lon * radiansPerDegree;
                var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
                if (angle < 0) {
                    angle += Math.PI * 2.0;
                }
                angle = angle * degreesPerRadian; //角度
                return angle;
            }
            //计算距离
            function distance(point1, point2) {
                var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
                var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
                /**根据经纬度计算出距离**/
                var geodesic = new Cesium.EllipsoidGeodesic();
                geodesic.setEndPoints(point1cartographic, point2cartographic);
                var s = geodesic.surfaceDistance;
                //返回两点之间的距离
                s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
                return s;
            }
            this.closeDeleteEntity = function () {
                handler.destroy();
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
            };
        },
        onOpen: function onOpen() {
            //面板打开的时候触发 (when open this panel trigger)
            this.map.scene.globe.baseColor = Cesium.Color.BLACK;
        });
            //初始化点
            this.addPoint()
            //切换底图
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
            //设置地图初始位置
            this.map.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(116.016905,25.884684, 10000),
            });
            //隐藏详情框
            this.showDetail(false)
        },
        onClose: function onClose() {
            this.closeDeleteEntity();
            //面板关闭的时候触发 (when this panel is closed trigger)
            $('.dong-progress .container #progress_bar').width(0);
            $('.dong-progress').stop().hide();
            $('#dong_echarts').stop().hide();
            $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
            this.map.scene.globe.baseColor = Cesium.Color.WHITE;
        },
        onMinimize: function onMinimize() {
            this.resize();
        },
        onMaximize: function onMaximize() {
            this.resize();
        },
        resize: function resize() {},
        destroy: function destroy() {
            //销毁的时候触发
            //todo
            //do something before this func
            this.inherited(arguments);
        },
        deleteEntitys: function deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity) {
            if (pointId !== []) {
                for (var i = 0; i < pointId.length; i++) {
                    that.map.entities.removeById(pointId[i]);
                }
                pointId = [];
            }
            that.map.entities.remove(shape);
            that.map.entities.remove(boildOne);
            that.map.entities.remove(boildTwo);
            that.map.entities.remove(boildThree);
            if (waterEntity != null) {
                that.map.entities.removeById(waterEntity._id);
            }
        },
        //添加点
        addPoint:function (){
            const url = './widgets/FloodAnalysis/data.json'
            this.getJsonUrl(url)
        },
        //获取json对象,测试用
        getJsonUrl: function getJsonUrl(url) {
            var self = this;
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'get',
                success: function success(data) {
                    const viewer = self.map
                    var dataArray = data.data
                    dataArray.forEach(e=>{
                        e.house = Number(e.house)
                        e.people = Number(e.people)
                        e.area = Number(e.area)
                        e.money = Number(e.money)
                    })
                    self.peoplePositionArray = []
                    self.peoplePositionArray = dataArray
                    for (let i = 0; i < dataArray.length; i++) {
                        var temp = viewer.entities.add({
                            position: Cesium.Cartesian3.fromDegrees(dataArray[i].LGTD, dataArray[i].LTTD),
                            point: {
                                color: Cesium.Color.RED,
                                pixelSize: 16,
                                //防止地形遮挡住点
                                disableDepthTestDistance: Number.POSITIVE_INFINITY
                            },
                        });
                    }
                }
            });
        },
        //是否显示详情框
        showDetail:function(show){
            //显示详情
            if (show){
                $('.flood-detail').show()
            }else {
                $('.flood-detail').hide()
            }
        },
        //洪水分析弹窗
        floodAnalysisPopup:function (){
            var self = this
            var inPolygon = []
            for (let i = 0; i < this.peoplePositionArray.length; i++) {
                let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                if (isIn){
                    inPolygon.push(this.peoplePositionArray[i])
                }
            }
            var jsonStr = JSON.stringify(inPolygon)
            var url = './corelib/common/popup/floodAnalysis.html';
            var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 800) / 2;
            var left = ($(window).width() - 1300 - 340) / 2 + 340;
            layer.open({
                title:'评估分析',
                type: 2,
                maxmin: false, //开启最大化最小化按钮
                area: ['1100px', '800px'],
                skin: 'floodAnalysis',
                offset: [top, left],
                content: urlEvaluate + "?data=" + encodeURIComponent(jsonStr),//使用encodeURIComponent转码,避免中文字符乱码,避免url截取错误
                id: "floodAnalysisLayer",
                closeBtn: 1,
                //把父页面数据传递给子弹窗并渲染
                success: function(layero, index) {
                    //绑定父子之间的关系,用于数据传递,缺少则无法传递
                    var body = layer.getChildFrame("body",index);
                    //得到iframe页的窗口对象
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    // //渲染子页面中的img
                    // iframeWin.$('#canvasImage')[0].src = self.canvasImage;
                    var table = ""
                    var house = 0
                    var people = 0
                    var area = 0
                    var money = 0
                    for (let i = 0; i < inPolygon.length; i++) {
                        table += '<tr>'+
                            '<td><div>' + inPolygon[i].name + '</div></td>' +
                            '<td><div>' + inPolygon[i].house + '</div></td>' +
                            '<td><div>' + inPolygon[i].people + '</div></td>' +
                            '<td><div>' + inPolygon[i].area + '</div></td>' +
                            '<td><div>' + inPolygon[i].money + '</div></td>' +
                            '</tr>'
                        house += inPolygon[i].house
                        people += inPolygon[i].people
                        area += inPolygon[i].area
                        money += inPolygon[i].money
                    }
                    iframeWin.$('#evaluate-tbody').html(table)
                    iframeWin.$(".house").html(house + '户')
                    iframeWin.$(".people").html(people + '人')
                    iframeWin.$(".area").html(area + 'km²')
                    iframeWin.$(".money").html(money + '万元')
                },
            });
        },
        //判断点是否在多边形内部
        isPointInPolygon : function (point){
            //获取经纬度
            var polygonPosition = this.polygonPositionArray
            //turf要求首尾闭合
            var turfPolygon = []
            polygonPosition.forEach(e=>{
                var temp = [e.lon,e.lat]
                turfPolygon.push(temp)
            })
            turfPolygon.push([polygonPosition[0].lon,polygonPosition[0].lat])
            var poly= turf.polygon([turfPolygon])
            var pt = turf.point([point.LGTD,point.LTTD])
            return turf.booleanPointInPolygon(pt,poly)
        },
    });
});
widgets/FloodAnalysis/css/style copy .css
File was deleted
widgets/FloodAnalysis/css/style copy.css
@@ -1,21 +1,20 @@
@import "Tooltip-div.css";
.jimu-widget-DynamicRiver {
    display: none;
    width: 100%;
    height: auto;
    /* overflow-x: hidden; */
    font-size: 14px;
    color: rgb(238, 235, 235);
    background-color: rgba(48, 48, 48, 0.7);
.jimu-widget-FloodAnalysis{
  width: 100%;
  height: 160px !important;
  position: fixed !important;
  left: 30px !important;
  top: 75px !important;
  overflow-x: hidden;
  background: rgba(31, 39, 48, .7);
  font-size: 14px;
  border: 1px solid rgb(69, 154, 251);
  border-radius: 5px;
  color: rgb(255, 255, 255);
}
.jimu-widget-DynamicRiver .dynamicriver-main {
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
}
.jimu-widget-DynamicRiver .dynamicriver-header {
.jimu-widget-FloodAnalysis .flood-analysis-header {
    position: relative;
    width: 100%;
    height: 40px;
@@ -24,7 +23,7 @@
    border-bottom: 1px solid rgb(69, 154, 251);
}
.jimu-widget-DynamicRiver .dynamicriver-header i {
.jimu-widget-FloodAnalysis .flood-analysis-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
@@ -34,132 +33,108 @@
    background-size: 20px;
}
.jimu-widget-DynamicRiver .dynamicriver-header .close-dynamicriver {
    position: absolute;
    top: 50%;
    right: 8px;
    font-size: 38px;
    font-weight: 400;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    transform: translateY(-50%);
.jimu-widget-FloodAnalysis .flood-water-analysis {
    margin: 12px 17px 10px  17px;
}
.jimu-widget-DynamicRiver .water-analysis {
    margin: 10px 8px;
}
.jimu-widget-DynamicRiver .water-analysis ul,
.jimu-widget-DynamicRiver .water-analysis ul li {
    margin: 0;
.jimu-widget-FloodAnalysis .flood-water-analysis ul ,
.jimu-widget-FloodAnalysis .flood-water-analysis ul li ,
.jimu-widget-FloodAnalysis .flood-water-analysis ul input {
    padding: 0;
    margin: 0;
}
.jimu-widget-DynamicRiver .water-analysis ul {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.jimu-widget-DynamicRiver .water-analysis ul li {
.jimu-widget-FloodAnalysis .flood-water-analysis ul li {
    margin: 5px 0;
    list-style: none;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}
.jimu-widget-DynamicRiver .water-analysis ul li span.content-left {
    float: left;
    padding-left: 10px;
    height: 100%;
    width: 80%;
    text-align: left;
}
.jimu-widget-DynamicRiver .water-analysis ul li span.content-right {
    float: left;
    height: 100%;
    width: 20%;
    background: url(../../../images/dynamicRiver-see.png) no-repeat;
    background-position: 50%;
    background-size: 50%;
    border-left: 1px solid #fff;
}
.jimu-widget-DynamicRiver .dynamicriver-result div,
.jimu-widget-DynamicRiver .dynamicriver-result ul,
.jimu-widget-DynamicRiver .dynamicriver-result li {
    margin: 0;
    padding: 0;
}
.jimu-widget-DynamicRiver .dynamicriver-result {
    display: none;
    position: absolute;
    top: 260px;
    right: 10px;
    width: 220px;
    height: auto;
    background-color: rgba(48, 48, 48, 0.7);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 6px;
}
.jimu-widget-DynamicRiver .dynamicriver-result > div {
    position: relative;
.jimu-widget-FloodAnalysis .flood-water-analysis ul li input {
    padding: 0 10px;
    width: 48%;
    height: 100%;
    color: #fff;
    border: none;
    background: rgba(140, 151, 165, 0.5);
}
.jimu-widget-FloodAnalysis .flood-water-analysis ul li span {
    display: inline-block;
    width: 52%;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input {
    margin: 5px 0;
    width: 48%;
    height: 36px;
    color: #fff;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(odd) {
    float:left;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(even) {
    float: right;
}
/**淹没详情**/
.flood-detail{
    position: fixed;
    top: 270px;
    width: 440px;
    height: 200px;
    left: 30px !important;
    overflow-x: hidden;
    background: rgba(31, 39, 48, .7);
    font-size: 14px;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    display: none;
}
.flood-detail-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    text-align: left;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}
.jimu-widget-DynamicRiver .dynamicriver-result div .close-dynamicriver-result {
    position: absolute;
    top: 50%;
    right: 8px;
    font-size: 30px;
    font-weight: 400;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    transform: translateY(-50%);
.flood-detail-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
}
.jimu-widget-DynamicRiver .dynamicriver-result ul {
    margin: 10px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-radius: 6px;
}
.jimu-widget-DynamicRiver .dynamicriver-result ul li {
    list-style: none;
    display: flex;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #fff;
}
.jimu-widget-DynamicRiver .dynamicriver-result ul li:last-child {
    border-radius: 6px;
}
.jimu-widget-DynamicRiver .dynamicriver-result ul li span:first-child {
    flex: 1;
    border-right: 1px solid #fff;
.flood-detail-content{
    height: 45%;
    text-align: center;
    margin: 12px 17px 10px 17px;
}
.jimu-widget-DynamicRiver .dynamicriver-result ul li span:last-child {
    flex: 2;
    padding-left: 8px;
}
.flood-detail-text{
    height: 95%;
    font-size: 20px;
}
.flood-detail-button input{
    margin: 5px 0;
    width: 48%;
    height: 36px;
    color: #fff;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}
widgets/FloodAnalysis/css/style.css
@@ -1,20 +1,28 @@
@import "Tooltip-div.css";
.jimu-widget-FloodAnalysis{
  width: 100%;
  height: 160px !important;
  position: fixed !important;
  left: 30px !important;
  top: 75px !important;
  overflow-x: hidden;
  background: rgba(31, 39, 48, .7);
  font-size: 14px;
  border: 1px solid rgb(69, 154, 251);
  border-radius: 5px;
  color: rgb(255, 255, 255);
.jimu-widget-FloodAnalysis {
    width: 440px !important;
    height: 100%;
    position: fixed !important;
    left: 30px !important;
    top: 75px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(31, 39, 48, .7);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
}
.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis i,
.jimu-widget-FloodAnalysis ul,
.jimu-widget-FloodAnalysis li,
.jimu-widget-FloodAnalysis span,
.jimu-widget-FloodAnalysis input,
.jimu-widget-FloodAnalysis h2 {
    margin: 0;
    padding: 0;
}
.jimu-widget-FloodAnalysis .flood-analysis-header {
.jimu-widget-FloodAnalysis div.analysis-header {
    position: relative;
    width: 100%;
    height: 40px;
@@ -23,7 +31,7 @@
    border-bottom: 1px solid rgb(69, 154, 251);
}
.jimu-widget-FloodAnalysis .flood-analysis-header i {
.jimu-widget-FloodAnalysis div.analysis-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
@@ -33,60 +41,162 @@
    background-size: 20px;
}
.jimu-widget-FloodAnalysis .flood-water-analysis {
    margin: 12px 17px 10px  17px;
.jimu-widget-FloodAnalysis div.dong {
    margin: 8px 17px;
}
.jimu-widget-FloodAnalysis .flood-water-analysis ul ,
.jimu-widget-FloodAnalysis .flood-water-analysis ul li ,
.jimu-widget-FloodAnalysis .flood-water-analysis ul input {
    padding: 0;
    margin: 0;
}
.jimu-widget-FloodAnalysis .flood-water-analysis ul li {
.jimu-widget-FloodAnalysis ul li {
    margin: 5px 0;
    list-style: none;
    height: 36px;
    line-height: 36px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
}
.jimu-widget-FloodAnalysis .flood-water-analysis ul li input {
    padding: 0 10px;
    width: 48%;
    height: 100%;
    color: #fff;
    border: none;
    background: rgba(140, 151, 165, 0.5);
}
.jimu-widget-FloodAnalysis .flood-water-analysis ul li span {
.jimu-widget-FloodAnalysis li span {
    display: inline-block;
    width: 52%;
    width: 51%;
    text-align: left;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input {
    margin: 5px 0;
    width: 48%;
    height: 36px;
.jimu-widget-FloodAnalysis li input {
    display: inline-block;
    width: 49%;
    height: 42px;
    border: 0;
    color: #fff;
    vertical-align: middle;
    background: rgba(140, 151, 165, 0.7);
    padding: 0 10px;
}
.jimu-widget-FloodAnalysis li:nth-child(5) input {
    width: 49%;
}
.jimu-widget-FloodAnalysis li:nth-child(5) input:nth-child(1) {
    margin-right: 2%;
}
.jimu-widget-FloodAnalysis li:nth-child(1) input,
.jimu-widget-FloodAnalysis li:nth-child(5) input {
    cursor: pointer;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(odd) {
    float:left;
.jimu-widget-FloodAnalysis .dong-echarts {
    display: none;
    position: absolute;
    top: 360px;
    background: rgba(90, 87, 87, 0.7);
    width: 560px;
    height: 360px;
    z-index: 55;
}
.jimu-widget-FloodAnalysis .flood-water-analysis .flood-water-analysis-new input:nth-child(even) {
    float: right;
.jimu-widget-FloodAnalysis p {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 368px;
    left: 12px;
    width: 150px;
    height: 200px;
    color: #fff;
    line-height: 20px;
    text-indent: 2em;
    letter-spacing: 1.5px;
    font-size: 16px;
    word-break: break-all;
    text-align-last: left;
    text-align: justify;
    text-justify: distribute-all-lines;
    z-index: 56;
}
.jimu-widget-FloodAnalysis .dong-progress {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 0px;
    z-index: 33;
    background: rgba(59, 59, 59, 0.7);
}
.jimu-widget-FloodAnalysis .dong-progress h2 {
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}
.jimu-widget-FloodAnalysis .dong-progress .container {
    display: inline-block;
    width: 100%;
    height: 20px;
    padding-right: 10px;
    border: 1px solid #999;
    border-radius: 5px;
}
.jimu-widget-FloodAnalysis .dong-progress .container .h-100P {
    height: 100%;
}
.jimu-widget-FloodAnalysis .dong-progress .container .bar {
    display: inline-block;
    background: linear-gradient(to right, #ff4343, #48adff);
    color: white;
    font-weight: bold;
    padding: 0 5px;
    text-align: right;
    border-radius: 5px;
    border-right: 1px solid #999;
}
.jimu-widget-FloodAnalysis .storage-capacity-curve {
    display: none;
    padding-top: 10px;
    position: absolute;
    top: 360px;
    left: 580px;
    background: rgba(206, 204, 204, 0.7);
    width: 500px;
    height: 360px;
    z-index: 55;
}
.jimu-widget-FloodAnalysis .storage-name {
    display: none;
    position: absolute;
    top: 686px;
    left: 780px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(40, 37, 161, 0.7);
    z-index: 111 !important;
}
/**淹没详情**/
.flood-detail{
    position: fixed;
    top: 270px;
    top: 420px;
    width: 440px;
    height: 200px;
    left: 30px !important;
widgets/FloodAnalysis/data.json
@@ -62,6 +62,232 @@
      "people": "100",
      "area": "8.551",
      "money": "39.789"
    },
    {
      "name": "沙洲坝镇",
      "LGTD": "115.997386",
      "LTTD": "25.884228",
      "house": "15",
      "people": "135",
      "area": "12.77",
      "money": "42.123"
    },
    {
      "name": "大坪头",
      "LGTD": "116.009435",
      "LTTD": "25.891839",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "罗布塘",
      "LGTD": "116.012287",
      "LTTD": "25.896596",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    },
    {
      "name": "窑下排",
      "LGTD": "116.009354",
      "LTTD": "25.866026",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "龙子口",
      "LGTD": "115.997337",
      "LTTD": "25.865782",
      "house": "15",
      "people": "135",
      "area": "12.77",
      "money": "42.123"
    },
    {
      "name": "白屋子",
      "LGTD": "115.991039",
      "LTTD": "25.877146",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    },
    {
      "name": "塘背",
      "LGTD": "116.059050",
      "LTTD": "25.885193",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "福水村",
      "LGTD": "116.063359",
      "LTTD": "25.876916",
      "house": "31",
      "people": "90",
      "area": "15.11",
      "money": "12.43"
    },
    {
      "name": "陈坊垄",
      "LGTD": "116.061225",
      "LTTD": "25.875275",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    },
    {
      "name": "溪背村",
      "LGTD": "116.031522",
      "LTTD": "25.866108",
      "house": "35",
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "黄荆垇",
      "LGTD": "116.052346",
      "LTTD": "25.868921",
      "house": "40",
      "people": "124",
      "area": "12.078",
      "money": "51.3"
    },
    {
      "name": "谢屋",
      "LGTD": "116.048576",
      "LTTD": "25.863552",
      "house": "35",
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "邱屋",
      "LGTD": "116.044104",
      "LTTD": "25.857309",
      "house": "35",
      "people": "175",
      "area": "12.888",
      "money": "50.123"
    },
    {
      "name": "红沙岭下",
      "LGTD": "116.058560",
      "LTTD": "25.869444",
      "house": "20",
      "people": "100",
      "area": "8.551",
      "money": "39.789"
    },
    {
      "name": "靠岭背",
      "LGTD": "116.053197",
      "LTTD": "25.855536",
      "house": "70",
      "people": "350",
      "area": "24.456",
      "money": "100.456"
    },
    {
      "name": "冷水井",
      "LGTD": "116.062919",
      "LTTD": "25.864527",
      "house": "20",
      "people": "100",
      "area": "8.551",
      "money": "39.789"
    },
    {
      "name": "仙人岗",
      "LGTD": "116.066362",
      "LTTD": "25.865598",
      "house": "15",
      "people": "135",
      "area": "12.77",
      "money": "42.123"
    },
    {
      "name": "詹屋",
      "LGTD": "116.037672",
      "LTTD": "25.852593",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "桥坑",
      "LGTD": "115.987810",
      "LTTD": "25.861294",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    },
    {
      "name": "老虎塘",
      "LGTD": "115.989406",
      "LTTD": "25.856659",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "丰坑",
      "LGTD": "115.985503",
      "LTTD": "25.847369",
      "house": "15",
      "people": "135",
      "area": "12.77",
      "money": "42.123"
    },
    {
      "name": "刘屋",
      "LGTD": "115.996429",
      "LTTD": "25.853648",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    },
    {
      "name": "黄竹坑子",
      "LGTD": "115.980189",
      "LTTD": "25.840939",
      "house": "105",
      "people": "5",
      "area": "15.77",
      "money": "34.123"
    },
    {
      "name": "大塆",
      "LGTD": "116.055886",
      "LTTD": "25.837923",
      "house": "31",
      "people": "90",
      "area": "15.11",
      "money": "12.43"
    },
    {
      "name": "洪瑞苑",
      "LGTD": "116.022552",
      "LTTD": "25.882196",
      "house": "25",
      "people": "37",
      "area": "14.72",
      "money": "10.53"
    }
  ]
}