cesium中缓冲区分析

本是古典何须时尚 2022-08-31 12:30 272阅读 0赞

##### 效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE4NzQ1MA_size_16_color_FFFFFF_t_70]这里是点缓冲区与点数据分析的15000个点  
![在这里插入图片描述][ec51b46624ce44238ed3622e0e6b4094.png]

##### 代码 #####

###### 添加缓冲区 ######

/** * @Description: 初始化点缓冲 * @param centerPoint 缓冲区中心点 * @param dataPoint 缓冲区分析的数据 * @param bufferDistance 缓冲区距离 * @return ptsWithin 缓冲区分析结果 */
        initPointBuffer(centerPoint, dataPoint, bufferDistance) { 
            this.removeBufferPolygon();
    
            let point = centerPoint?centerPoint:[];
            let centerPoints = dataPoint?dataPoint:[];
            let viewer = this.viewer;
            this.addPoint(point, viewer);
    
            // 添加turf对象，加载缓冲区面
            let pointF = turf.point(point);
            let buffered = turf.buffer(pointF, bufferDistance, {  units: 'meters' });
            let bufferedGeometry = buffered.geometry.coordinates[0];
            let coordinates = buffered.geometry.coordinates;
            let points = coordinates[0];
            let degreesArray = this.pointsToDegreesArray(points);
            let deg1 = Cesium.Cartesian3.fromDegreesArray(degreesArray);
            this.addBufferPolygon(deg1);
    
            // turf面
            let searchWithin = [];
            searchWithin.push(bufferedGeometry);
            let searchWithinEntity = Cesium.turf.polygon(searchWithin);
    
            // 处理geometry点
            let Towerspoints = [];
            for (let i = 0; i < centerPoints.length; i++) { 
                let feature = new Object();
                feature.type = "Feature";
                feature.properties = {  Name: centerPoints[i].id };
                // feature.collection = centerPoints[i]._collection;
                feature.geometry = { 
                    type: "Point",
                    coordinates: [centerPoints[i].lat, centerPoints[i].lon],
                };
                Towerspoints.push(feature);
            }
            let TowersCollection = { 
                type: "FeatureCollection",
                features: Towerspoints,
            };
    
            // turf判断电面相交，返回结果值
            let ptsWithin = Cesium.turf.pointsWithinPolygon(
                TowersCollection,
                searchWithinEntity
            );
    
            return ptsWithin;
        }
    
        /** * @Description: 添加缓冲区中心点 * @param point 坐标点 * @param viewer 地图视图 * @return */
        addPoint(point, viewer) { 
            viewer.entities.add({ 
                id: "bufferPoint",
                position: Cesium.Cartesian3.fromDegrees(point[0], point[1], 0),
                point: { 
                    pixelSize: 10,
                    color: Cesium.Color.AQUA,
                    outlineWidth: 3,
                    outlineColor: Cesium.Color.CHARTREUSE.withAlpha(0.4),
                }
            });
        }
    /** * @Description: 添加缓冲面 * @param positions 笛卡尔坐标系位置 * @return */
        addBufferPolygon(positions) { 
            this.viewer.entities.add({ 
                id:"bufferPolygon",
                polygon: { 
                    hierarchy: new Cesium.PolygonHierarchy(positions),
                    material: Cesium.Color.RED.withAlpha(0.6),
                    classificationType: Cesium.ClassificationType.BOTH
                },
            });
        }
    
        /** * @Description: 格式转换 * @param points 点坐标 * @return degreesArray 坐标系 */
        pointsToDegreesArray(points) { 
            let degreesArray = [];
            points.map(item => { 
                degreesArray.push(item[0]);
                degreesArray.push(item[1]);
            });
            return degreesArray;
        }

调用

class CesiumUtile { 
    
        //初始化地图
        static initCesium(divMapId) { 
            let options = { 
                selectionIndicator: false,
                homeButton: false,//主页按钮，默认true
                // scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
                animation: false, //动画控制，默认true
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false,//地名查找,默认true
                timeline: false,//时间线,默认true
                navigationHelpButton: false,//导航帮助说明,默认true
                sceneModePicker: false,//是否显示投影方式控件
                infoBox: false,//点击要素之后显示的信息,默认true
                fullscreenButton: false,//全屏按钮,默认显示true
                navigationInstructionsInitiallyVisible: false,
                mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL,
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({ 
                    url: "地图地址",
                    layer: "tdtBasicLayer",
                    style: "default",
                    maximumLevel: 18,
                    format: "image/jpeg",
                    tileMatrixSetID: "GoogleMapsCompatible",
                    show: true,
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
                }),
            }
    
            let viewer = new Cesium.Viewer(divMapId, options);
            window.selfDefine.viewer = viewer;
            this.viewer = viewer;
            viewer.scene.globe.depthTestAgainstTerrain = false;
            viewer.camera.flyTo({ 
                destination: Cesium.Cartesian3.fromDegrees(105.973421, 38.757527, 7000000.0),
                duration: 4
            })
    
            let _this = this;
            this.jsonDatas = [];  //保存json對象
    
            for (let i = 0;i < 15000; i ++){ 
                let ran1 = 118.81 + parseInt(Math.random() * 100000).toString();
                let ran2 = 32.01 + parseInt(Math.random() * 10000).toString();
    
                let point1 = Number(ran1);
                let point2 = Number(ran2);
                _this.jsonDatas.push({ 
                    id:"bufferPoint" + i,
                    lat: ran1,
                    lon: ran2,
                })
                _this.addPoint(i,point1,point2);
            }
            this._personInfo();
        }
    
        static addPoint(index, point1, point2){ 
            this.viewer.entities.add({ 
                id: "bufferPoint"+ index,
                position: Cesium.Cartesian3.fromDegrees(point1, point2, 0),
                point: { 
                    pixelSize: 10,
                    color: Cesium.Color.YELLOW,
                    outlineWidth: 3,
                    outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
                }
            });
        }
    
        // region添加缓冲区
        static _personInfo() { 
            let viewer = window.selfDefine.viewer;
            this.bufferAn = new bufferAnalysis(viewer);
            let centerPoint = [118.809666, 32.0145666];
            let arrayData = [];  //globalVar.pollutionData;
            let dataPoint = this.jsonDatas;
            // for(let item in arrayData){ 
            // dataPoint = dataPoint.concat((arrayData[item][0]));
            // }
            let bufferResult = this.bufferAn.initPointBuffer(centerPoint, dataPoint, 3000);
            console.log("bufferResultData:", bufferResult);
            // store.commit("setBufferResult", bufferResult);
            // bufferRe.methods.updateBufferData();
        }
    
        // 删除缓冲区
        static _removeBuffer(){ 
            this.bufferAn && this.bufferAn.removeBufferPolygon();
        }
        // endregion
    }

[参考turf官网][turf]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDE4NzQ1MA_size_16_color_FFFFFF_t_70]: /images/20220829/21c78ef300944936a86c2df76edc7075.png
[ec51b46624ce44238ed3622e0e6b4094.png]: /images/20220829/6a9ea80f567f4939b464650d5efa06b2.png
[turf]: http://turfjs.org/docs/#pointsWithinPolygon