水文水环境分析-洪水淹没:画线进行分析修改为画多边形进行分析
8 files modified
1 files deleted
| | |
| | | |
| | | .evaluate-box-middle{ |
| | | width: 96%; |
| | | height: 425px; |
| | | height: 650px; |
| | | border: 1px solid black; |
| | | padding: 0px 10px 0px 10px; |
| | | } |
| | |
| | | <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> |
| | |
| | | /////////////////////////////////////////////////////////////////////////// |
| | | // Copyright © 2020 zhongsong. All Rights Reserved. |
| | | // 模块描述:河流水面线分析 |
| | | // Copyright © 2022 guoshilong. All Rights Reserved. |
| | | // 模块描述:洪水淹没分析 |
| | | /////////////////////////////////////////////////////////////////////////// |
| | | define([ |
| | | 'dojo/_base/declare', |
| | |
| | | '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: [], |
| | |
| | | riverPrimitive: null, |
| | | material: null, |
| | | drawingPolyline: null, |
| | | // 增加waterData 用来存放列表数据 |
| | | waterData: null, |
| | | //绘制的多边形数组 |
| | | polygonCartesianArray:[], |
| | | //canvas转换后的图片 |
| | | canvasImage:null, |
| | | //房屋人口 |
| | | peoplePositionArray:[], |
| | | myWaterPrimitive:null, |
| | | startup: function () { |
| | | this.inherited(arguments); |
| | | var self = this; |
| | |
| | | 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) { |
| | |
| | | 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, |
| | |
| | | }); |
| | | return e |
| | | }, |
| | | |
| | | createPrimitive: function () { |
| | | var t = new Float64Array(this.sideRes.vertexs), |
| | | i = new Cesium.GeometryAttributes; |
| | |
| | | }) |
| | | }) |
| | | }, |
| | | |
| | | 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++) { |
| | |
| | | }, this.map.clock.onTick.addEventListener(this.dhEvent) |
| | | } |
| | | }, |
| | | |
| | | //水面线转成水面 |
| | | _lines2Plane: function (positions, width, height) { |
| | | function n(point, height) { |
| | |
| | | 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, |
| | |
| | | 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 () { |
| | |
| | | //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 }); |
| | | }, |
| | | |
| | | |
| | | }); |
| | | }); |
| | |
| | | <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> 洪水淹没详情 |
| | |
| | | // 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) |
| | | }, |
| | | }); |
| | | }); |
| | |
| | | @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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | |
| | | @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; |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | "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" |
| | | } |
| | | ] |
| | | } |