From 8f85627f215bd0ee61db7a35ca9a83eaca1e892c Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期三, 10 一月 2024 15:42:34 +0800 Subject: [PATCH] 代码更新 --- src/assets/js/Layer/drawGrid.js | 209 ++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 145 insertions(+), 64 deletions(-) diff --git a/src/assets/js/Layer/drawGrid.js b/src/assets/js/Layer/drawGrid.js index 079b789..40fb77e 100644 --- a/src/assets/js/Layer/drawGrid.js +++ b/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; 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,67 @@ 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 - // } - // }); - // } }, - 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 -- Gitblit v1.9.3