From c03856d80d71e92499bf0b084c4e862eb4d48a3d Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 02 Feb 2023 14:45:49 +0800
Subject: [PATCH] 水文水环境分析-洪水淹没页面--实现判断当前点是否在所绘多边形内部（当点在线上时存在误判）
---
jimu.js/MapManager.js | 13 +++---
corelib/common/popup/floodAnalysis.html | 12 +++++
widgets/FloodAnalysis/Widget.js | 67 ++++++++++++++++++++++++++++++++-
3 files changed, 81 insertions(+), 11 deletions(-)
diff --git a/corelib/common/popup/floodAnalysis.html b/corelib/common/popup/floodAnalysis.html
index 8bcc1a1..0d69d2c 100644
--- a/corelib/common/popup/floodAnalysis.html
+++ b/corelib/common/popup/floodAnalysis.html
@@ -16,7 +16,17 @@
<div class="flood-box-left">
<img id="canvasImage">
</div>
- <div class="flood-box-right">22</div>
+ <div class="flood-box-right">
+ <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>
<div class="flood-box-bottom">
<button type='button' id="start-analysis-btn"> 开始分析 </button>
diff --git a/jimu.js/MapManager.js b/jimu.js/MapManager.js
index 92bf4f6..7728255 100644
--- a/jimu.js/MapManager.js
+++ b/jimu.js/MapManager.js
@@ -110,12 +110,12 @@
//设置地形
- /*if (appConfig.map.terrain && appConfig.map.terrain.show) {
- var globe = this.map.scene.globe;
- var terrainProvider = new Cesium.CesiumTerrainProvider(appConfig.map.terrain);
- globe.terrainProvider = terrainProvider;
- globe.enableLighting = false; //默认关闭灯光
- }*/
+ // if (appConfig.map.terrain && appConfig.map.terrain.show) {
+ // var globe = this.map.scene.globe;
+ // var terrainProvider = new Cesium.CesiumTerrainProvider(appConfig.map.terrain);
+ // globe.terrainProvider = terrainProvider;
+ // globe.enableLighting = false; //默认关闭灯光
+ // }
//设置离线地图默认显示
@@ -123,7 +123,6 @@
this.map.baseLayerPicker.viewModel.selectedTerrain = this.map.baseLayerPicker.viewModel.terrainProviderViewModels[0];
$(".cesium-baseLayerPicker-sectionTitle").eq(0).html("底图");
$(".cesium-baseLayerPicker-sectionTitle").eq(1).html("地形");
-
//对外暴露的公共接口
topic.subscribe("gis/map/setCenter", lang.hitch(this, this.centerAt));
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 6205b8e..85f17b3 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/widgets/FloodAnalysis/Widget.js
@@ -11,7 +11,8 @@
'jimu/BaseWidget',
'./Tooltip-div',
'./FloodAnalysis',
- 'libs/layer/layer.js'
+ 'libs/layer/layer.js',
+ 'libs/turf/turf.min.js'
],
function (declare,
lang,
@@ -21,7 +22,8 @@
BaseWidget,
tooltip,
flood,
- layer
+ layer,
+ turf,
) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-FloodAnalysis',
@@ -34,9 +36,12 @@
riverPrimitive: null,
material: null,
drawingPolyline: null,
+ //绘制的多边形数组
polygonCartesianArray:[],
//canvas转换后的图片
canvasImage:null,
+ //房屋人口
+ peoplePositionArray:[],
startup: function () {
this.inherited(arguments);
var self = this;
@@ -301,6 +306,8 @@
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(3)').trigger('click');
@@ -310,7 +317,7 @@
//面板关闭的时候触发 （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 () {
@@ -444,6 +451,14 @@
var top = ($(window).height() - 600) / 2;
var left = ($(window).width() - 900 - 340) / 2 + 340;
var self = this
+
+ for (let i = 0; i < this.peoplePositionArray.length; i++) {
+ let inPolygon = this.isPointInPolygon(this.peoplePositionArray[i])
+
+ this.peoplePositionArray[i].inPolygon = inPolygon
+
+ }
+
layer.open({
title:'模拟分析',
type: 2,
@@ -454,6 +469,7 @@
content: url,
id: "floodAnalysisLayer",
closeBtn: 1,
+ //把父页面数据传递给子弹窗并渲染
success: function(layero, index) {
var body = layer.getChildFrame("body",index);//绑定父子之间的关系，用于数据传递，缺少则无法传递
var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象
@@ -464,7 +480,52 @@
//添加点
addPoint:function (){
+ const url = './widgets/FloodAnalysis/data.json'
+ this.getJsonUrl(url)
+ },
+ //判断点是否在多边形内部
+ 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
+ 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
--
Gitblit v1.9.3