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

guoshilong

2023-02-02 c03856d80d71e92499bf0b084c4e862eb4d48a3d

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

 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>

 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));

 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