水文水环境分析-洪水淹没页面--实现判断当前点是否在所绘多边形内部（当点在线上时存在误判）

guoshilong

2023-02-02 c03856d80d71e92499bf0b084c4e862eb4d48a3d

 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