代码更新

surprise

2024-01-15 87e98d5b5efeb7a9cf6330ae03e6dd53699b7ef1

 src/assets/js/Layer/drawGrid.js

@@ -1,35 +1,49 @@
import * as turf from '@turf/turf';
import store from '../../../store';
import { Grid_Insert } from '@/api/api'
import Bus from '../../../components/tools/Bus';
var drawGrid = {
    id: "Rectangle",
    ids: [],
    flag: null,
    drawRect: function () {
        this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.canvas);
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        var points = [];
        var shape = this.renderRect(points);
        var step = 0;
        var $this = this;

       store.state.isBatchGridArr =true; 
        this.handler.setInputAction(function (e) {
            var cartesian = Viewer.scene.pickPosition(e.position);
            var cartesian = viewer.scene.pickPosition(e.position);
            if (!Cesium.defined(cartesian)) {
                var ray = Viewer.camera.getPickRay(e.position);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
                var ray = viewer.camera.getPickRay(e.position);
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
            }
            points[step] = cartesian;
            step++;
            if (step === 3) {
                $this.handler.destroy();
                store.state.isshowGrid= true
                store.state.isshowGrid = true
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function (e) {
            var cartesian = Viewer.scene.pickPosition(e.startPosition);
            var cartesian = viewer.scene.pickPosition(e.startPosition);
            if (!Cesium.defined(cartesian)) {
                var ray = Viewer.camera.getPickRay(e.startPosition);
                cartesian = Viewer.scene.globe.pick(ray, Viewer.scene);
                var ray = viewer.camera.getPickRay(e.startPosition);
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
            }
            points[2] = cartesian;
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },

    removeRect: function () {
        var entity = Viewer.entities._entities._array;
        for (var i = 0; i < entity.length; i++) {
            if (entity[i].id == 'Rectangle') {
                Viewer.entities.remove(entity[i])
                i--
            }
        }
    },
    renderRect: function (points) {
        var shape = Viewer.entities.add({
@@ -42,16 +56,16 @@
                        var r2 = Cesium.Cartographic.fromCartesian(points[2]);

                        var p0 = turf.point([
                          (r0.longitude * 180) / Math.PI,
                          (r0.latitude * 180) / Math.PI
                            (r0.longitude * 180) / Math.PI,
                            (r0.latitude * 180) / Math.PI
                        ]);
                        var p1 = turf.point([
                          (r1.longitude * 180) / Math.PI,
                          (r1.latitude * 180) / Math.PI
                            (r1.longitude * 180) / Math.PI,
                            (r1.latitude * 180) / Math.PI
                        ]);
                        var p2 = turf.point([
                          (r2.longitude * 180) / Math.PI,
                          (r2.latitude * 180) / Math.PI
                            (r2.longitude * 180) / Math.PI,
                            (r2.latitude * 180) / Math.PI
                        ]);

                        this.rectanglePoint = p1;
@@ -72,10 +86,10 @@
                        });

                        var coordinates = [
                          points[0],
                          Cesium.Cartesian3.fromDegrees(dest1.geometry.coordinates[0], dest1.geometry.coordinates[1]),
                          points[2],
                          Cesium.Cartesian3.fromDegrees(dest2.geometry.coordinates[0], dest2.geometry.coordinates[1])
                            points[0],
                            Cesium.Cartesian3.fromDegrees(dest1.geometry.coordinates[0], dest1.geometry.coordinates[1]),
                            points[2],
                            Cesium.Cartesian3.fromDegrees(dest2.geometry.coordinates[0], dest2.geometry.coordinates[1])
                        ];
                        return new Cesium.PolygonHierarchy(coordinates);
                    }
@@ -85,18 +99,73 @@
                outlineColor: Cesium.Color.BLACK,
            },
        });
 

        return shape;
    },
    drawPoint: function ( res) {
        var rect = Viewer.entities.getById(this.id);
    drawPoint: function (res) {
        var rect = viewer.entities.getById(this.id);
        if (!rect) return;

        var points = rect.polygon.hierarchy.getValue().positions;
        //var r0 = Cesium.Cartographic.fromCartesian(points[0]);
        //var r1 = Cesium.Cartographic.fromCartesian(points[1]);
        //var r2 = Cesium.Cartographic.fromCartesian(points[2]);
        

        var r0 = Cesium.Cartographic.fromCartesian(points[0]);
        var r1 = Cesium.Cartographic.fromCartesian(points[1]);
        var r2 = Cesium.Cartographic.fromCartesian(points[2]);
        var p0 = turf.point([(r0.longitude * 180) / Math.PI, (r0.latitude * 180) / Math.PI]);
        var p1 = turf.point([(r1.longitude * 180) / Math.PI, (r1.latitude * 180) / Math.PI]);
        var p2 = turf.point([(r2.longitude * 180) / Math.PI, (r2.latitude * 180) / Math.PI]);
        // 做成 3 * 4 的网格
        var wCount = res.col + 1, hCount = res.row + 1;
        this.flag = parseInt(res.col) * parseInt(res.col);
        var wStep = turf.distance(p0, p1, { units: "meters" }) / (wCount - 1);
        var hStep = turf.distance(p1, p2, { units: "meters" }) / (hCount - 1);

        var wAngle = turf.bearing(p0, p1);
        var hAngle = turf.bearing(p1, p2);
        var op = { units: "meters", };
        var arr = [p0.geometry.coordinates];
        this.removeRect();
        for (var i = 1; i < hCount; i++) {
            for (var j = 1; j < wCount; j++) {
                var start_west, start_hest;
                if (j == 1) {
                    start_west = p0.geometry.coordinates;
                } else {
                    start_west = turf.destination(p0, wStep * (j - 1), wAngle, op).geometry.coordinates;
                }
                var end_west = turf.destination(p0, wStep * j, wAngle, op).geometry.coordinates;
                var start_hest = turf.destination(start_west, hStep * i, hAngle, op).geometry.coordinates;
                var end_hest = turf.destination(end_west, hStep * i, hAngle, op).geometry.coordinates;
                var val = [
                    [start_west[0], start_west[1], 18],
                    [end_west[0], end_west[1], 18],
                    [end_hest[0], end_hest[1], 18],
                    [start_hest[0], start_hest[1], 18],
                    [start_west[0], start_west[1], 18]
                ]
                this.setInsertGridData(val, (i * j))
            }
        }
    },
    setGridRowCol: function (res) {

        store.state.isshowGrid = false;

        // this.drawPoint(res);
        this.drawRects(res)

    },

    drawRects: function (res) {
        this.cc = 0;
        var rect = viewer.entities.getById(this.id);
        if (!rect) return;
        var points = rect.polygon.hierarchy.getValue().positions;
        viewer.entities.removeAll(); // viewer.entities.remove(rect);

        var r0 = Cesium.Cartographic.fromCartesian(points[0]);
        var r1 = Cesium.Cartographic.fromCartesian(points[1]);
        var r2 = Cesium.Cartographic.fromCartesian(points[2]);
@@ -106,55 +175,68 @@
        var p2 = turf.point([(r2.longitude * 180) / Math.PI, (r2.latitude * 180) / Math.PI]);

        // 做成 3 * 4 的网格
        var wCount =res.col, hCount = res.row;
   
        var wStep = turf.distance(p0, p1, { units: "meters" }) / (wCount - 1);
        var hStep = turf.distance(p1, p2, { units: "meters" }) / (hCount - 1);

        // var wCount = 3, hCount = 4;
        var wCount = res.col, hCount = res.row;
        this.flag = parseInt(wCount) * parseInt(hCount);
        var op = { units: "meters", };
        var wStep = turf.distance(p0, p1, op) / wCount;
        var hStep = turf.distance(p1, p2, op) / hCount;
        var wAngle = turf.bearing(p0, p1);
        var hAngle = turf.bearing(p1, p2);
        var op = { units: "meters", };

        var arr = [p0.geometry.coordinates];

        for (var i = 1; i < wCount; i++) {
            var dest = turf.destination(p0, wStep * i, wAngle, op);
            arr.push(dest.geometry.coordinates);
        }
 
        this.removeRect();
        for (var i = 0; i < wCount; i++) {
            var p = arr[i];
            for (var j = 1; j < hCount; j++) {
                var dest = turf.destination(p, hStep * j, hAngle, op);
                arr.push(dest.geometry.coordinates);
            var ds = turf.destination(p0, wStep * i, wAngle, op);
            for (var j = 0; j < hCount; j++) {
                var d1 = turf.destination(ds.geometry.coordinates, hStep * j, hAngle, op);
                var d2 = turf.destination(d1.geometry.coordinates, wStep, wAngle, op);
                var d3 = turf.destination(d2.geometry.coordinates, hStep, hAngle, op);
                var d4 = turf.destination(d1.geometry.coordinates, hStep, hAngle, op);

                // var arr = [d1.geometry.coordinates, d2.geometry.coordinates, d3.geometry.coordinates, d4.geometry.coordinates];
                var arr = [
                    [d1.geometry.coordinates[0], d1.geometry.coordinates[1], 18],
                    [d2.geometry.coordinates[0], d2.geometry.coordinates[1], 18],
                    [d3.geometry.coordinates[0], d3.geometry.coordinates[1], 18],
                    [d4.geometry.coordinates[0], d4.geometry.coordinates[1], 18],
                    [d1.geometry.coordinates[0], d1.geometry.coordinates[1], 18]
                ]
                this.setInsertGridData(arr, ((i + 1) * (j + 1)));
            }
        }
 
        console.log(arr);
        // 显示点
        // for (var i = 0; i < arr.length; i++) {
        //     var p = arr[i];
        //     console.log(arr[i])
        //     Viewer.entities.add({
        //         name: "点",
        //         show: true,
        //         position: Cesium.Cartesian3.fromDegrees(p[0], p[1], 0),
        //         point: {
        //             color: Cesium.Color.RED,
        //             pixelSize: 5,
        //             heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        //             // 无论如何缩放，标记点不被地形遮挡
        //             disableDepthTestDistance: Number.POSITIVE_INFINITY
        //         }
        //     });
        // }
        store.state.isBatchGridArr =false; 
    },
    setGridRowCol:function(res){
     
        store.state.isshowGrid= false;  
    async setInsertGridData(res, num) {
        var obj =
        {
            "type": "Feature",
            "properties":
                { "ID": num, "NAME": "Area" + num, "REMARK": "", "TYPE": 'DrawGrid' },
            "geometry":
            {
                "type": "Polygon",
                "coordinates": [
                    res
                ]
            }
        }
        const data = await Grid_Insert({ json: JSON.stringify(obj) })
        if (data.status == 200) {
            this.ids.push(data.data)
            if (this.ids.length == this.flag) {
                var obj = {
                    id: new Date().getTime(),
                    sourceType: 'DrawGrid',
                    name: "新建格网",
                    style: {
                        ids: this.ids,
                        sourceType: 'DrawGrid',
                    }
                }
                Bus.$emit("addOtherData", "对象", obj);
            }
        }

        this.drawPoint(res);

    },
    }
};
export default drawGrid