suerprisePlus
2024-11-27 ab8f3297f7c8243d486c9da0900e4f813b2ea2df
src/views/visualization/list/mapWeather.js
@@ -1,9 +1,40 @@
import mapServer from '../../../assets/js/mapSdk/mapServe';
import mapServer from '@/assets/js/mapSdk/mapServe.js';
import * as turf from '@turf/turf';
const mapWeather = {
    regionWeather: null,
    particle: null,
    showRain: 'ShowRain',
    wallLayer: null,
    pathLayer: null,
    listBiildBord: [],
    listParticle: [],
    getWearData(res) {
        return {
            name: res.address,
            data: [
                {
                    name: '名称',
                    val: res.address,
                },
                {
                    name: '气象级别',
                    val: res.level,
                },
                {
                    name: '所属线路',
                    val: res.line,
                },
                {
                    name: '数据来源',
                    val: res.source,
                },
                {
                    name: '发布时间',
                    val: res.time,
                },
            ],
        };
    },
    closeRegionWeather() {
        if (this.regionWeather) {
            this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_NONE;
@@ -19,6 +50,24 @@
                Viewer.scene.primitives.remove(Viewer.scene.primitives._primitives[i]);
            }
        }
        if (this.wallLayer) {
            Viewer.entities.remove(this.wallLayer);
            this.wallLayer = null;
            // this.wallLayer.removeFromMap();
            // this.wallLayer = null;
        }
        if (this.pathLayer) {
            this.pathLayer.deleteObject();
            this.pathLayer = null;
        }
        for (var i in this.listBiildBord) {
            this.listBiildBord[i].removeFromMap();
        }
        this.listBiildBord = [];
        for (var i in this.listParticle) {
            this.listParticle[i].deleteObject();
        }
        this.listParticle = [];
    },
    setRegionWeatherType(response) {
        this.closeRegionWeather();
@@ -32,46 +81,161 @@
            case 'rain':
                //  earthCtrl.camera.flyTo(coord[0], coord[1], 8000, 0, -90, 0, 0);
                this.showRain(response);
                break;
            case 'fire':
                this.showFire(response);
                earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                // earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                break;
            case 'snow':
                this.showSnow();
                earthCtrl.camera.flyTo(coord[0], coord[1], 1000, 0, -90, 0, 0);
                break;
            case 'thunder':
                this.showThunder(response);
                break;
        }
    },
    showFire(res) {
        const coord = this.getCoord(res);
        const obj = {
            x: coord[0],
            y: coord[1],
            z: 0,
        };
        this.particle = earthCtrl.factory.createParticleEffect(
            'flame',
            obj,
            {
                translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
                particleSize: 10,
    showThunder(response) {
        if (response.geom) {
            this.addWatherGeom(response.geom, 'thunder2.png');
        }
        // const points = this.chunkArray(response.point.split(','), 2);
        // for (var i in points) {
        //     const billboardEntity = earthCtrl.factory.createBillboard({
        //         name: '标签点',
        //         id: earthCtrl.factory.createUUID(),
        //         image: config.images + 'thunder.png', // 贴图,
        //         width: 40,
        //         height: 40,
        //         lon: parseFloat(points[i][0]),
        //         lat: parseFloat(points[i][1]),
        //         alt: 1,
        //         scale: 6,
        //     });
        //     this.listBiildBord.push(billboardEntity);
        // }
            },
            function (data) {}
        );
    addWatherGeom(response, image) {
        if (response.ploygon) {
            this.addWatherPloygon(this.chunkArray(response.ploygon, 2), image);
        }
        if (response.line) {
            this.addWatherLine(this.chunkArray(response.line, 2));
        }
    },
    addWatherLine(response) {
        const obj = {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'LineString',
                        coordinates: response,
                    },
                },
            ],
        };
        this.pathLayer = earthCtrl.factory.createPathLayer({
            url: obj,
            color: '#ff0000', //线的颜色
            width: 5.0, //线的宽度
            pointColor: '#FFFFFF', //移动点的颜色
            speed: 1,
            far: 50000,
        });
    },
    addWatherPloygon(response, image) {
        response.push(response[0]);
        const coord = this.getCentroid(response);
        earthCtrl.camera.flyTo(coord[0], coord[1], 80000, 0, -90, 0, 0);
        var geom = [];
        for (var i = 0; i < response.length; i++) {
            geom.push(response[i][0], response[i][1]);
        }
        this.wallLayer = Viewer.entities.add({
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(geom),
                material: new Cesium.ImageMaterialProperty({
                    image: config.images + image,
                    alpha: 0.2, // 设置透明度为0.5
                    repeat: Cesium.Cartesian2(1.0, 1.0), // 不重复
                    transparent: true, // 启用png透明
                    color: new Cesium.Color(1.0, 1.0, 1.0, 0.3), // 设置颜色和透明度
                }),
                stRotation: Cesium.Math.toRadians(0),
            },
        });
        // this.wallLayer = earthCtrl.factory.createPolygon({
        //     name: '面',
        //     id: earthCtrl.factory.createUUID(),
        //     material: Cesium.Color.fromCssColorString('rgba(128,128,128, .2)'),
        //     outlineColor: Cesium.Color.fromCssColorString('rgba(128,128,128, .5)'),
        //     lineWidth: 3,
        //     height: 10,
        //     outline: true,
        //     outlineWidth: 2,
        //     positions: SmartEarth.Cesium.Cartesian3.fromDegreesArrayHeights(geom),
        // });
        // const obj = { type: 'GeometryCollection', geometries: [{ type: 'LineString', coordinates: response }] };
        // // 流动墙图层
        // this.wallLayer = earthCtrl.factory.createTrailWallLayer({
        //     url: obj,
        //     color: '#0000ff05', //颜色
        //     height: 20, //高度
        //     speed: 2,
        // });
    },
    showFire(response) {
        if (response.geom) {
            this.addWatherGeom(response.geom, 'filre.png');
        }
        // const points = this.chunkArray(response.point.split(','), 2);
        // for (var i in points) {
        //     const particle = earthCtrl.factory.createParticleEffect(
        //         'flame',
        //         {
        //             x: parseFloat(points[i][0]),
        //             y: parseFloat(points[i][1]),
        //             z: 0,
        //         },
        //         {
        //             translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
        //             particleSize: 10,
        //         },
        //         function (data) {}
        //     );
        //     this.listParticle.push(particle);
        // }
        // const coord = this.getCoord(res);
        // const obj = {
        //     x: coord[0],
        //     y: coord[1],
        //     z: 0,
        // };
        // this.particle = earthCtrl.factory.createParticleEffect(
        //     'flame',
        //     obj,
        //     {
        //         translation: SmartEarth.Cesium.Cartesian3.fromElements(0, 0, 0), //平移
        //         particleSize: 10,
        //     },
        //     function (data) {}
        // );
    },
    showRain(res) {
        var area = [];
        var std =[];
        for (var i = 0; i < res.area.length; i += 3) {
        for (var i = 0; i < res.area.length; i += 2) {
            area.push(res.area[i]);
            area.push(res.area[i + 1]);
            std.push([res.area[i],res.area[i + 1]])
            std.push([res.area[i], res.area[i + 1]]);
        }
        std.push(std[0])
        std.push(std[0]);
        
        const polygon = turf.polygon([std]);
@@ -115,13 +279,6 @@
        });
        primitive.name = this.showRain;
        Viewer.scene.primitives.add(primitive);
        // Viewer.camera.lookAt(primitive.boundingSphere.center, new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-90), 5000));
        // if (this.regionWeather) {
        //     this.regionWeather.enableWeatherType = SmartEarth.Cesium.RegionWeather.TYPE_RAIN;
        //     this.regionWeather.regionAlpha = 0.6;
        //     this.regionWeather.regionGradientDistance = 300;
        // }
    },
    showSnow() {
@@ -135,6 +292,23 @@
        const coord = res.point.split(',');
        return coord;
    },
    getCentroid(response) {
        var centroid = turf.centroid(turf.polygon([response]));
        return centroid.geometry.coordinates;
    },
    chunkArray(array, size) {
        return array.reduce((chunks, current, index) => {
            const chunkIndex = Math.floor(index / size);
            if (!chunks[chunkIndex]) {
                chunks[chunkIndex] = [];
            }
            chunks[chunkIndex].push(current);
            return chunks;
        }, []);
    },
    getRegionWather(res) {
        if (res.type == 'fire') return;
        const coord = this.getCoord(res);