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);
|
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);
|
if (!Cesium.defined(cartesian)) {
|
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
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
this.handler.setInputAction(function (e) {
|
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);
|
}
|
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({
|
id: this.id,
|
polygon: {
|
hierarchy: new Cesium.CallbackProperty(function () {
|
if (points[0] && points[1] && 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
|
]);
|
|
this.rectanglePoint = p1;
|
var bearing1 = turf.rhumbBearing(p0, p1);
|
var bearing2 = turf.rhumbBearing(p0, p2);
|
var angle1 = bearing2 - bearing1;
|
|
// 对角长度
|
var length = turf.distance(p0, p2, { units: "meters" });
|
|
var len1 = Math.cos((angle1 / 180) * Math.PI) * length;
|
var dest1 = turf.destination(p0, len1, bearing1, { units: "meters" });
|
|
var angle2 = 90 - angle1;
|
var len2 = Math.cos((angle2 / 180) * Math.PI) * length;
|
var dest2 = turf.destination(p0, len2, 90 + bearing1, {
|
units: "meters",
|
});
|
|
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])
|
];
|
return new Cesium.PolygonHierarchy(coordinates);
|
}
|
}, false),
|
material: Cesium.Color.CYAN.withAlpha(0.5),
|
outline: true,
|
outlineColor: Cesium.Color.BLACK,
|
},
|
});
|
|
return shape;
|
},
|
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]);
|
|
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 = 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);
|
this.removeRect();
|
for (var i = 0; i < wCount; i++) {
|
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)));
|
}
|
}
|
store.state.isBatchGridArr =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);
|
}
|
}
|
|
|
}
|
};
|
export default drawGrid
|
