From bffbddd4a3853a1994c13e42767ceb361cfe74b0 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 22 Apr 2024 13:17:03 +0800
Subject: [PATCH] fix: 路径规划
---
src/views/list/road.vue | 296 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 272 insertions(+), 24 deletions(-)
diff --git a/src/views/list/road.vue b/src/views/list/road.vue
index e5f7ff1..b302774 100644
--- a/src/views/list/road.vue
+++ b/src/views/list/road.vue
@@ -28,6 +28,9 @@
<a-button type="primary" style="margin-left: 10px" @click="selectCheck"
>������</a-button
>
+ <a-button type="primary" style="margin-left: 10px" @click="reosurce"
+ >������������������</a-button
+ >
</div>
<div class="left-five">
<a-input
@@ -37,6 +40,15 @@
/>
<a-button type="primary" style="margin-left: 10px" @click="selectLu"
>������</a-button
+ >
+ <a-button type="primary" style="margin-left: 10px" @click="clearPolygon"
+ >������������</a-button
+ >
+ <a-button
+ type="primary"
+ style="margin-left: 10px"
+ @click="showAllPolygon"
+ >������������������</a-button
>
</div>
<div class="left-two">
@@ -142,6 +154,22 @@
</a-modal>
<div class="right">
<div id="roadmap" class="roadmap"></div>
+ <ul class="drawing-panel">
+ <li
+ class="bmap-btn bmap-rectangle"
+ @click="draw('rectangle')"
+ :style="{
+ 'background-position-y': actNav === 'rectangle' ? '-52px' : '0px',
+ }"
+ ></li>
+ <li
+ class="bmap-btn bmap-polygon"
+ @click="draw('polygon')"
+ :style="{
+ 'background-position-y': actNav === 'polygon' ? '-52px' : '0px',
+ }"
+ ></li>
+ </ul>
</div>
<div class="fixeds" v-show="showfix === true">
<div style="font-size: 20px; margin-left: 50px; margin-top: 50px">
@@ -163,12 +191,14 @@
<script lang="tsx">
import { Component, Prop, Vue, Model, Watch } from "vue-property-decorator";
import { get, post } from "@/util/request";
+import * as turf from "@turf/turf";
import org from "@/util/org";
import axios from "axios";
import { jsonp } from "vue-jsonp";
import any = jasmine.any;
import { da } from "date-fns/locale";
import { Moment } from "moment";
+import coordtransform from "coordtransform";
@Component({
components: {},
})
@@ -183,6 +213,8 @@
];
}
private mounted() {
+ let a = coordtransform.bd09togcj02(120.16669577, 33.35188998);
+ console.log("bd09togcj02:", coordtransform.gcj02towgs84(a[0], a[1]));
this.roadmap();
}
private dateFormat(fmt: string, date: any) {
@@ -200,7 +232,7 @@
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
- for (var k in o)
+ for (let k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
@@ -211,12 +243,26 @@
return fmt;
}
private map: any;
+ private drawingManager: any;
private roadmap() {
- this.map = new BMapGL.Map("roadmap");
+ this.map = new BMapGL.Map("roadmap", {
+ enableMapClick: false, //������������������
+ });
// ������������������������������������
- var point = new BMapGL.Point(116.404, 39.915);
+ let point = new BMapGL.Point(116.404, 39.915);
this.map.centerAndZoom("���������", 15);
this.map.enableScrollWheelZoom(true); // ������������������������������������������������������s
+ this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
+ // isOpen: true, // ������������������������
+ enableCalculate: false, // ������������������������������
+ enableSorption: true, // ������������������������������
+ sorptiondistance: 20, // ������������������
+ circleOptions: this.styleOptions, // ������������
+ polylineOptions: this.styleOptions, // ������������
+ polygonOptions: this.styleOptions, // ������������������
+ rectangleOptions: this.styleOptions, // ���������������
+ labelOptions: this.labelOptions, // label������
+ });
}
private dataSource: any[] = [];
private visibleCreateModal1: boolean = false;
@@ -276,6 +322,12 @@
<a-divider type="vertical" />
<a onClick={() => this.handleEditbatch(record)}> ������������ </a>
<a-divider type="vertical" />
+ <a onClick={() => this.canvasbatch(record)}> ������������������ </a>
+ <a-divider type="vertical" />
+ <a onClick={() => this.handleEditCanves(record)}> ������������ </a>
+ <a-divider type="vertical" />
+ <a onClick={() => this.handleShowPolygon(record)}> ������������ </a>
+ <a-divider type="vertical" />
<a-popconfirm
title="������������������"
ok-text="������"
@@ -287,7 +339,7 @@
</div>
);
}
- private deleteDevice(record) {
+ private deleteDevice(record: any) {
get("coordinate/deleteCruiserRoad", {
id: record.coordinateId,
}).then((res) => {
@@ -299,7 +351,7 @@
private pointshow: boolean = false;
private batchid: any = 0;
private batchshow: boolean = false;
- private handleEditbatch(record) {
+ private handleEditbatch(record: any) {
this.check = false;
this.startstate = "batch";
this.batchshow = true;
@@ -316,10 +368,13 @@
this.endtime = "";
}
private insertbatch() {
+ console.log("this.starttime", this.starttime);
+ console.log("this.starttime", this.endtime);
post("coordinateDetail/batch", {
- coordinateId: this.batchid,
+ type: "0",
time1: this.starttime,
time2: this.endtime,
+ coordinateId: this.batchid,
mac: this.carvalue,
}).then((res) => {
console.log(res);
@@ -329,9 +384,74 @@
// this.selectCar()
});
}
+ // ������������������
+ showAllPolygon() {
+ console.log("this.dataSource", this.dataSource);
+ this.dataSource.forEach((item: any) => {
+ if (item.bdValues) {
+ let pointList = item.bdValues.map((item: any) => {
+ return new BMapGL.Point(item.lng, item.lat);
+ });
+ let polygon = new BMapGL.Polygon([...pointList]);
+ console.log("polygon", polygon);
+ this.map.addOverlay(polygon);
+ }
+ });
+ }
+ // ������������
+ handleShowPolygon(record: any) {
+ console.log(record);
+ if (record.bdValues) {
+ let pointList = record.bdValues.map((item: any) => {
+ return new BMapGL.Point(item.lng, item.lat);
+ });
+ let polygon = new BMapGL.Polygon([...pointList]);
+ console.log("polygon", polygon);
+ this.map.addOverlay(polygon);
+ }
+ }
+ // ������������
+ private handleEditCanves(record: any) {
+ console.log("this.turfPolygon", this.turfPolygon);
+ if (this.roadbaiduPolygon.length > 0) {
+ post("coordinate/updateCruiserRoad", {
+ coordinateId: record.coordinateId,
+ bdValue: this.roadbaiduPolygon,
+ value: this.road84Polygon,
+ }).then((res) => {
+ this.$message.success("������������");
+ this.selectLu();
+ });
+ } else {
+ this.$message.warning("���������������");
+ }
+ }
+ private canvasbatch(record: any) {
+ let ptsWithin = turf.pointsWithinPolygon(this.multiPt, this.turfPolygon);
+ let data: { flylon: number; flylat: number }[] = [];
+ turf.coordEach(ptsWithin, (currentCoord) => {
+ data.push({
+ flylon: currentCoord[0],
+ flylat: currentCoord[1],
+ });
+ });
+ console.log("data", data);
+ this.check = false;
+ this.startstate = "batch";
+ post("coordinateDetail/batch", {
+ type: "1",
+ coordinateId: record.coordinateId,
+ list: data,
+ mac: this.carvalue,
+ }).then((res) => {
+ console.log(res);
+ this.$message.success(res.data.message);
+ // this.selectCar()
+ });
+ }
private upa = "";
private recordid: any = 0;
- private handleEditModalVisible(record) {
+ private handleEditModalVisible(record: any) {
console.log("dataList", this.dataList);
this.check = false;
this.handlebatch();
@@ -438,7 +558,20 @@
// console.log(this.carDate,'this.carDate');
this.carDate = [];
this.pointshow = false;
+ this.map.removeOverlay();
this.setMarker(res);
+ });
+ }
+ reosurce() {
+ console.log("this.timevalue", this.timevalue);
+ post("coordinateDetail/queryAll", {
+ mac: this.carvalue,
+ time1: this.timevalue[0],
+ time2: this.timevalue[1],
+ }).then((res) => {
+ console.log(res.data.data, "res");
+ this.$message.success("������������");
+ // console.log(this.carDate,'this.carDate');
});
}
private markerdata: any = [];
@@ -451,14 +584,85 @@
private endtime: any = "";
private InfoWindow = null;
private startstate: any = "none";
- private setMarker(res) {
+ private styleOptions = {
+ strokeColor: "#5E87DB", // ������������
+ fillColor: "#5E87DB", // ������������������������������������������������������������
+ strokeWeight: 2, // ���������������������������������
+ strokeOpacity: 1, // ������������������������������0-1
+ fillOpacity: 0.2, // ������������������������������0-1
+ };
+ private labelOptions = {
+ borderRadius: "2px",
+ background: "#FFFBCC",
+ border: "1px solid #E1E1E1",
+ color: "#703A04",
+ fontSize: "12px",
+ letterSpacing: "0",
+ padding: "5px",
+ };
+ private actNav: String = "";
+ private clearPolygon() {
+ //������������overlays
+ let overlays = this.map.getOverlays();
+ this.drawingManager.clearOverlays();
+ //���������Marker������������Label������
+ overlays.forEach((overlay: any) => {
+ if (overlay.toString() === "Polygon") {
+ this.map.removeOverlay(overlay);
+ }
+ });
+ // this.map.clearOverlays();
+ }
+ private turfPolygon: any = null;
+ private roadbaiduPolygon: any = [];
+ private road84Polygon: any = [];
+ private draw(drawingType: String) {
+ console.log("new BMapGLLib", this.drawingManager);
+ this.actNav = drawingType;
+ if (
+ this.drawingManager._isOpen &&
+ this.drawingManager.getDrawingMode() === drawingType
+ ) {
+ this.drawingManager.close();
+ } else {
+ this.drawingManager.setDrawingMode(drawingType);
+ this.drawingManager.open();
+ }
+ // ������������������������������
+ this.drawingManager.addEventListener("overlaycomplete", (e: any) => {
+ // ������������������
+ this.actNav = "";
+ const polygon = e.overlay;
+ // ���������������������������
+ const polygonPoints = polygon.getPath();
+ this.roadbaiduPolygon = polygonPoints;
+ let transformationPoints = polygonPoints.map((coord: any) => {
+ const [x, y] = [coord.lng, coord.lat];
+ const [lng1, lat1] = coordtransform.bd09togcj02(x, y);
+ const [lng2, lat2] = coordtransform.gcj02towgs84(lng1, lat1);
+ return { lng: lng2, lat: lat2 };
+ });
+
+ this.road84Polygon = transformationPoints;
+ console.log("polygonPoints2", transformationPoints);
+ this.turfPolygon = turf.polygon([
+ transformationPoints.map((item: any) => [item.lng, item.lat]),
+ ]);
+ });
+ }
+ private multiPt: any = [];
+ private setMarker(res: any) {
const that = this;
that.carDate = [];
that.carDataList = [];
- for (var i = 0; i < res.data.data.rsData.length; i++) {
+ let pointSlint = [];
+
+ for (let i = 0; i < res.data.data.rsData.length; i++) {
that.carDate.push(res.data.data.rsData[i]);
+ pointSlint.push(res.data.data.rsData[i].data.split("_").map(Number));
}
- for (var i = 0; i < res.data.data.data.length; i++) {
+ this.multiPt = turf.points([...pointSlint]);
+ for (let i = 0; i < res.data.data.data.length; i++) {
that.carDataList.push(res.data.data.data[i]);
}
that.map.clearOverlays();
@@ -467,17 +671,17 @@
if (res.status === 200) {
for (let i = 0; i < that.carDate.length; i++) {
//������������point
- var myIcon = new BMapGL.Icon(
+ let myIcon = new BMapGL.Icon(
require("@/assets/723cd95f31481a502d495b2d814d658.png"),
new BMapGL.Size(50, 50),
{}
);
- var startIcon = new BMapGL.Icon(
+ let startIcon = new BMapGL.Icon(
require("@/assets/start.png"),
new BMapGL.Size(50, 50),
{}
);
- var endIcon = new BMapGL.Icon(
+ let endIcon = new BMapGL.Icon(
require("@/assets/end.png"),
new BMapGL.Size(50, 50),
{}
@@ -488,28 +692,34 @@
);
bPoints.push(statePoint);
if (i === 0) {
- that.marker[i] = new BMapGL.Marker(statePoint, { icon: startIcon });
+ that.marker[i] = new BMapGL.Marker(statePoint, {
+ icon: startIcon,
+ });
that.marker[i].customData = {
data: that.carDate[i].data,
state: that.carDate[i].state,
};
that.marker[i].iconPng = "startIcon";
} else if (i === that.carDate.length - 1) {
- that.marker[i] = new BMapGL.Marker(statePoint, { icon: endIcon });
+ that.marker[i] = new BMapGL.Marker(statePoint, {
+ icon: endIcon,
+ });
that.marker[i].customData = {
data: that.carDate[i].data,
state: that.carDate[i].state,
};
that.marker[i].iconPng = "endIcon";
} else {
- that.marker[i] = new BMapGL.Marker(statePoint, { icon: myIcon });
+ that.marker[i] = new BMapGL.Marker(statePoint, {
+ icon: myIcon,
+ });
that.marker[i].customData = {
data: that.carDate[i].data,
state: that.carDate[i].state,
};
that.marker[i].iconPng = "myIcon";
}
- var infoWindow = "";
+ let infoWindow = "";
//that.marker[i].name = that.carDate[i].time;
that.marker[i].on("mouseover", function(e) {
infoWindow = new BMapGL.InfoWindow(
@@ -582,7 +792,7 @@
for (let i = 0; i < that.carDataList.length; i++) {
// console.log(that.carDataList[i],'that.carDataList[i]');
//������������point
- var myIcon = new BMapGL.Icon(
+ let myIcon = new BMapGL.Icon(
require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),
new BMapGL.Size(50, 50)
);
@@ -593,7 +803,9 @@
// console.log(statePoint,'statePoint');
aPoints.push(statePoint);
//���marker���������data��������� ������������������
- that.markerdata[i] = new BMapGL.Marker(statePoint, { icon: myIcon });
+ that.markerdata[i] = new BMapGL.Marker(statePoint, {
+ icon: myIcon,
+ });
that.markerdata[i].customData = {
data: that.carDataList[i].code,
state: that.carDataList[i].state,
@@ -655,15 +867,15 @@
}
}
- private setZoom(bPoints) {
- var view = this.map.getViewport(eval(bPoints));
- var mapZoom = view.zoom;
- var centerPoint = view.center;
+ private setZoom(bPoints: any) {
+ let view = this.map.getViewport(eval(bPoints));
+ let mapZoom = view.zoom;
+ let centerPoint = view.center;
this.map.centerAndZoom(centerPoint, mapZoom);
}
private selectLuName: any = null;
private selectLu() {
- var macType = null;
+ let macType = null;
if (this.carvalue !== "������������������") {
macType = this.carvalue;
}
@@ -724,4 +936,40 @@
left: 55%;
z-index: 999;
}
+.drawing-panel {
+ z-index: 200;
+ position: absolute;
+ top: 10rem;
+ margin-left: 2rem;
+ padding-left: 0;
+ border-radius: .25rem;
+ height: 47px;
+ box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
+}
+.bmap-btn {
+ border-right: 1px solid #d2d2d2;
+ float: left;
+ width: 64px;
+ height: 100%;
+ background-image: url(
+//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
+ cursor: pointer;
+ list-style: none;
+ padding: 0;
+}
+.drawing-panel .bmap-marker {
+ background-position: -65px 0;
+}
+.drawing-panel .bmap-polyline {
+ background-position: -195px 0;
+}
+.drawing-panel .bmap-rectangle {
+ background-position: -325px 0;
+}
+.drawing-panel .bmap-polygon {
+ background-position: -260px 0;
+}
+.drawing-panel .bmap-circle {
+ background-position: -130px 0;
+}
</style>
--
Gitblit v1.8.0