From b74ea56001fba65e67d9b39a5757dab4e4036858 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 03 Apr 2024 09:07:24 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/views/list/road.vue | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 158 insertions(+), 11 deletions(-)
diff --git a/src/views/list/road.vue b/src/views/list/road.vue
index e5f7ff1..cec8579 100644
--- a/src/views/list/road.vue
+++ b/src/views/list/road.vue
@@ -38,6 +38,9 @@
<a-button type="primary" style="margin-left: 10px" @click="selectLu"
>������</a-button
>
+ <a-button type="primary" style="margin-left: 10px" @click="clearPolygon"
+ >������������</a-button
+ >
</div>
<div class="left-two">
<a-table
@@ -142,6 +145,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 +182,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 +204,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) {
@@ -211,12 +234,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);
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;
@@ -287,7 +324,7 @@
</div>
);
}
- private deleteDevice(record) {
+ private deleteDevice(record: any) {
get("coordinate/deleteCruiserRoad", {
id: record.coordinateId,
}).then((res) => {
@@ -299,12 +336,28 @@
private pointshow: boolean = false;
private batchid: any = 0;
private batchshow: boolean = false;
- private handleEditbatch(record) {
+ private handleEditbatch(record: any) {
+ let ptsWithin = turf.pointsWithinPolygon(this.multiPt, this.turfPolygon);
+ console.log("ptsWithin", ptsWithin);
+ 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";
- this.batchshow = true;
- // this.selectCar();
- this.batchid = record.coordinateId;
+ post("coordinateDetail/batch", {
+ coordinateId: record.coordinateId,
+ list: data,
+ mac: this.carvalue,
+ }).then((res) => {
+ console.log(res);
+ this.$message.success(res.data.message);
+ // this.selectCar()
+ });
}
private handlebatch() {
// this.selectCar()
@@ -316,10 +369,10 @@
this.endtime = "";
}
private insertbatch() {
+ console.log("this.starttime", this.starttime);
+ console.log("this.starttime", this.endtime);
post("coordinateDetail/batch", {
coordinateId: this.batchid,
- time1: this.starttime,
- time2: this.endtime,
mac: this.carvalue,
}).then((res) => {
console.log(res);
@@ -331,7 +384,7 @@
}
private upa = "";
private recordid: any = 0;
- private handleEditModalVisible(record) {
+ private handleEditModalVisible(record: any) {
console.log("dataList", this.dataList);
this.check = false;
this.handlebatch();
@@ -451,13 +504,71 @@
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() {
+ this.drawingManager.clearOverlays();
+ }
+ private turfPolygon: any = null;
+ 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();
+ console.log("polygonPoints1", 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 };
+ });
+ 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 = [];
+ let pointSlint = [];
+
for (var 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));
}
+ this.multiPt = turf.points([...pointSlint]);
for (var i = 0; i < res.data.data.data.length; i++) {
that.carDataList.push(res.data.data.data[i]);
}
@@ -655,7 +766,7 @@
}
}
- private setZoom(bPoints) {
+ private setZoom(bPoints: any) {
var view = this.map.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
@@ -724,4 +835,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