From 74990b437b7b6e6072999d65c37658e51de577b3 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 13 May 2024 09:23:37 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/views/list/road.vue | 1063 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 725 insertions(+), 338 deletions(-)
diff --git a/src/views/list/road.vue b/src/views/list/road.vue
index be60ef2..e9f75b0 100644
--- a/src/views/list/road.vue
+++ b/src/views/list/road.vue
@@ -2,17 +2,10 @@
<div style="display: flex; overflow: hidden">
<div class="left">
<div class="left-one">
- <a-range-picker
- v-model="timevalue"
- show-time
- @ok="change1()"
- valueFormat="yyyy-MM-DD HH:MM:SS"
- style="width: 175px"
- />
<a-select
ref="select"
v-model="carvalue"
- style="width: 180px; margin-left: 10px"
+ style="width: 180px"
placeholder="������������������"
>
<a-select-option
@@ -22,14 +15,42 @@
>{{ item.name }}</a-select-option
>
</a-select>
+ <a-range-picker
+ :show-time="{ format: 'HH:mm' }"
+ @ok="change1"
+ format="YYYY-MM-DD HH:mm"
+ style="width: 175px; margin-left: 10px"
+ />
+
<a-button type="primary" style="margin-left: 10px" @click="selectCar"
>������</a-button
>
<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
+ style="width: 300px; margin-left: 0px"
+ v-model="selectLuName"
+ placeholder="���������������������"
+ />
+ <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">
<a-table
:dataSource="dataSource"
@@ -133,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">
@@ -152,404 +189,715 @@
</template>
<script lang="tsx">
-import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";
+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 { jsonp } from "vue-jsonp";
import any = jasmine.any;
-
-
+import { da } from "date-fns/locale";
+import { Moment } from "moment";
+import coordtransform from "coordtransform";
@Component({
- components: {
-
- }
+ components: {},
})
export default class road extends Vue {
- private timevalue:any=[]
- private change1(){
- console.log(this.timevalue);
+ private timevalue: any = [];
+
+ private change1(dates: Moment[]) {
+ this.timevalue = [];
+ this.timevalue = [
+ dates[0].format("YYYY-MM-DD HH:mm"),
+ dates[1].format("YYYY-MM-DD HH:mm"),
+ ];
}
- private mounted() {
+ private mounted() {
+ let a = coordtransform.bd09togcj02(120.16669577, 33.35188998);
+ console.log("bd09togcj02:", coordtransform.gcj02towgs84(a[0], a[1]));
this.roadmap();
}
- private map:any
- private roadmap(){
- this.map = new BMapGL.Map('roadmap')
- // ������������������������������������
- var point = new BMapGL.Point(116.404, 39.915);
- this.map.centerAndZoom('���������', 15);
- this.map.enableScrollWheelZoom(true) // ������������������������������������������������������s
+ private dateFormat(fmt: string, date: any) {
+ let o = {
+ "M+": date.getMonth() + 1, //������
+ "d+": date.getDate(), //���
+ "h+": date.getHours(), //������
+ "m+": date.getMinutes(), //���
+ "s+": date.getSeconds(), //���
+ "q+": Math.floor((date.getMonth() + 3) / 3), //������
+ S: date.getMilliseconds(), //������
+ };
+ if (/(y+)/.test(fmt))
+ fmt = fmt.replace(
+ RegExp.$1,
+ (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+ );
+ for (let k in o)
+ if (new RegExp("(" + k + ")").test(fmt))
+ fmt = fmt.replace(
+ RegExp.$1,
+ RegExp.$1.length == 1
+ ? o[k]
+ : ("00" + o[k]).substr(("" + o[k]).length)
+ );
+ return fmt;
+ }
+ private map: any;
+ private drawingManager: any;
+ private roadmap() {
+ this.map = new BMapGL.Map("roadmap", {
+ enableMapClick: false, //������������������
+ });
+ // ������������������������������������
+ 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;
- private handleCreateModalCancel1():any{
- this.visibleCreateModal1=false;
+ private handleCreateModalCancel1(): any {
+ this.visibleCreateModal1 = false;
}
private selectedRows: any[] = [];
private tableLoading: boolean = false;
private columns: any[] = [
{
+ title: "������",
+ dataIndex: "key",
+ key: "key",
+ align: "center",
+ customRender: (text, record, index) => `${index + 1}`,
+ width: 60,
+ },
+ {
title: "������������",
- dataIndex: "startPoint"
+ dataIndex: "startPoint",
+ align: "center",
},
{
title: "������",
- customRender: this.opRender
- }
+ customRender: this.opRender,
+ align: "center",
+ },
];
- private openIn(){
- this.visibleCreateModal1=true;
+ private openIn() {
+ this.visibleCreateModal1 = true;
}
- private startLu:any=''
- private endLu:any=''
- private insertCarLu(){
- if(this.carvalue==='������������������'){
- this.$message.warning('���������������������������!')
- return
+ private startLu: any = "";
+ private endLu: any = "";
+ private insertCarLu() {
+ if (this.carvalue === "������������������") {
+ this.$message.warning("���������������������������!");
+ return;
}
- post('coordinate/interCruiserRoad',{
- startPoint:this.startLu,
- mac:this.carvalue
-
- }).then((res)=>{
+ post("coordinate/interCruiserRoad", {
+ startPoint: this.startLu,
+ mac: this.carvalue,
+ }).then((res) => {
console.log(res);
- this.$message.success(res.data.message)
- this.visibleCreateModal1=false;
- this.startLu=''
- this.endLu=''
- this.selectLu()
- })
+ this.$message.success(res.data.message);
+ this.visibleCreateModal1 = false;
+ this.startLu = "";
+ this.endLu = "";
+ this.selectLu();
+ });
}
+
private opRender(text: string, record: any, index: number) {
return (
- <div style="width:180px">
- <a onClick={() => this.handleEditModalVisible(record)}>
- {" "}
- ������{" "}
- </a>
- <a-divider type="vertical"/>
- <a onClick={() => this.handleEditbatch(record)}>
- {" "}
- ������������{" "}
- </a>
- <a-divider type="vertical"/>
- <a-popconfirm
- title="������������������"
- ok-text="������"
- cancel-text="������"
- onConfirm={() => this.deleteDevice(record)}
- >
- <a href="#">������</a>
- </a-popconfirm>
- </div>
- )
+ <div style="width:180px">
+ <a onClick={() => this.handleEditModalVisible(record)}> ������ </a>
+ <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="������"
+ cancel-text="������"
+ onConfirm={() => this.deleteDevice(record)}
+ >
+ <a href="#">������</a>
+ </a-popconfirm>
+ </div>
+ );
}
- private deleteDevice(record){
- get('coordinate/deleteCruiserRoad',{
- id:record.coordinateId
- }).then((res)=>{
+ private deleteDevice(record: any) {
+ get("coordinate/deleteCruiserRoad", {
+ id: record.coordinateId,
+ }).then((res) => {
console.log(res);
- this.$message.success(res.data.message)
- this.selectLu()
- })
+ this.$message.success(res.data.message);
+ this.selectLu();
+ });
}
- private pointshow:boolean=false
- private batchid:any=0
- private batchshow:boolean=false
- private handleEditbatch(record){
- this.check=false
- this.startstate='batch'
- this.batchshow=true
- this.selectCar();
- this.batchid=record.coordinateId
+ private pointshow: boolean = false;
+ private batchid: any = 0;
+ private batchshow: boolean = false;
+ private handleEditbatch(record: any) {
+ this.check = false;
+ this.startstate = "batch";
+ this.batchshow = true;
+ // this.selectCar();
+ this.batchid = record.coordinateId;
}
- private handlebatch(){
- this.selectCar()
- this.batchshow=false
+ private handlebatch() {
+ // this.selectCar()
+ this.batchshow = false;
this.handlenull();
}
- private handlenull(){
- this.starttime=''
- this.endtime=''
+ private handlenull() {
+ this.starttime = "";
+ this.endtime = "";
}
- private insertbatch(){
- post('coordinateDetail/batch',{
- coordinateId:this.batchid,
- time1:this.starttime,
- time2:this.endtime,
- mac:this.carvalue,
- }).then((res=>{
+ private insertbatch() {
+ console.log("this.starttime", this.starttime);
+ console.log("this.starttime", this.endtime);
+ post("coordinateDetail/batch", {
+ type: "0",
+ time1: this.starttime,
+ time2: this.endtime,
+ coordinateId: this.batchid,
+ mac: this.carvalue,
+ }).then((res) => {
console.log(res);
- this.$message.success(res.data.message)
- this.starttime=''
- this.endtime=''
- this.selectCar()
- }))
+ this.$message.success(res.data.message);
+ this.starttime = "";
+ this.endtime = "";
+ // this.selectCar()
+ });
}
- private upa=''
- private recordid:any=0
- private handleEditModalVisible(record){
- this.check=false
- this.handlebatch()
- this.startstate='none'
- this.upa='upa'
- this.recordid=record.coordinateId
- if(this.carvalue==='������������������'){
- this.$message.warning('������������������')
- return
+ // ������������������
+ showAllPolygon() {
+ let macType = null;
+ if (this.carvalue !== "������������������") {
+ macType = this.carvalue;
}
- if(this.timevalue.length===0){
- this.$message.warning('���������������')
- return
+ get("coordinate/selectCruiserRoad", {
+ name: "",
+ mac: macType,
+ }).then((res) => {
+ res.data.data.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);
}
- post('coordinateDetail/select',{
- coordinateId:record.coordinateId,
+ }
+ // ������������
+ 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: any) {
+ console.log("dataList", this.dataList);
+ this.check = false;
+ this.handlebatch();
+ this.startstate = "none";
+ this.dataList = [];
+ this.upa = "upa";
+ this.recordid = record.coordinateId;
+ if (this.carvalue === "������������������") {
+ this.$message.warning("������������������");
+ return;
+ }
+ if (this.timevalue.length === 0) {
+ this.$message.warning("���������������");
+ return;
+ }
+ post("coordinateDetail/select", {
+ coordinateId: record.coordinateId,
// time1:'2023-08-05 00:00:00',
// time2:'2023-08-06 00:00:00',
- time1:this.timevalue[0],
- time2:this.timevalue[1],
- mac:this.carvalue,
- }).then((res)=>{
- this.carDate=[]
- this.pointshow=true
- this.setMarker(res)
- })
+ time1: this.timevalue[0],
+ time2: this.timevalue[1],
+ mac: this.carvalue,
+ }).then((res) => {
+ this.carDate = [];
+ this.pointshow = true;
+ this.setMarker(res);
+ });
}
- private openupa(){
- post('coordinateDetail/insert',{
- coordinateId:this.recordid,
- data:this.dataList
- }).then((res)=>{
- console.log(res);
- this.$message.success(res.data.message)
- this.upa=''
- this.dataList=[]
- this.carDate=[]
- this.selectCar()
- })
+ private openupa() {
+ post("coordinateDetail/insert", {
+ coordinateId: this.recordid,
+ data: this.dataList,
+ }).then((res) => {
+ this.$message.success(res.data.message);
+ this.upa = "";
+ this.dataList = [];
+ this.carDate = [];
+ // this.selectCar()
+ });
}
- private inupa(){
- this.upa=''
- this.selectCar()
+ private inupa() {
+ this.upa = "";
+ // this.selectCar()
}
- private carvalue:any='������������������'
- private carIndex:any=[]
- private car(){
- get('cruiserInfo/selectCruisers',{
- }).then((res)=>{
- this.carIndex=res.data.data;
+ private carvalue: any = "������������������";
+ private carIndex: any = [];
+ private car() {
+ get("cruiserInfo/selectCruisers", {}).then((res) => {
+ this.carIndex = res.data.data;
console.log(this.carIndex);
- })
+ });
}
- private check:boolean=false
- private showfix:boolean=false
- private messageshow:any=''
- private selectCheck(){
- if(this.carvalue==='������������������'){
- this.$message.warning('������������������')
- return
+ private check: boolean = false;
+ private showfix: boolean = false;
+ private messageshow: any = "";
+ private selectCheck() {
+ if (this.carvalue === "������������������") {
+ this.$message.warning("������������������");
+ return;
}
- if(this.timevalue.length===0){
- this.$message.warning('���������������')
- return
+ if (this.timevalue.length === 0) {
+ this.$message.warning("���������������");
+ return;
}
- get('cruiserInfo/getCruiserCompare',{
- mac:this.carvalue,
+ get("cruiserInfo/getCruiserCompare", {
+ mac: this.carvalue,
// time1:'2023-08-05 00:00:00',
// time2:'2023-08-06 00:00:00'
- time1:this.timevalue[0],
- time2:this.timevalue[1]
- }).then((res)=>{
- console.log(res.data.data,'res');
- this.messageshow=res.data.data.message
- this.showfix=true
+ time1: this.timevalue[0],
+ time2: this.timevalue[1],
+ }).then((res) => {
+ console.log(res.data.data, "res");
+ this.messageshow = res.data.data.message;
+ this.showfix = true;
// this.check=true
- this.carDate=[]
- this.pointshow=false
- this.setMarker(res)
- })
+ this.carDate = [];
+ this.pointshow = false;
+ this.setMarker(res);
+ });
}
- private closemess(){
- this.showfix=false
+ private closemess() {
+ this.showfix = false;
}
- private carDate:any=[]
- private selectCar(){
+ private carDate: any = [];
+ private selectCar() {
console.log(this.timevalue);
- if(this.carvalue==='������������������'){
- this.$message.warning('������������������')
- return
+ if (this.carvalue === "������������������") {
+ this.$message.warning("������������������");
+ return;
}
- if(this.timevalue.length===0){
- this.$message.warning('���������������')
- return
+ if (this.timevalue.length === 0) {
+ this.$message.warning("���������������");
+ return;
}
- get('cruiserInfo/getCruiserInFo',{
- mac:this.carvalue,
+ console.log("this.timevalue", this.timevalue);
+ get("cruiserInfo/getCruiserInFo", {
+ mac: this.carvalue,
// time1:'2023-08-05 00:00:00',
// time2:'2023-08-06 00:00:00'
- time1:this.timevalue[0],
- time2:this.timevalue[1]
- }).then((res)=>{
- console.log(res.data.data,'res');
+ time1: this.timevalue[0],
+ time2: this.timevalue[1],
+ }).then((res) => {
+ console.log(res.data.data, "res");
// console.log(this.carDate,'this.carDate');
- this.carDate=[]
- this.pointshow=false
- this.setMarker(res)
- })
+ this.carDate = [];
+ this.pointshow = false;
+ this.map.removeOverlay();
+ this.setMarker(res);
+ });
}
- private markerdata:any=[]
- private marker:any=[]
- private dataList:any=[]
- private indataList:any=[]
- private LudataList:any=[]
- private carDataList:any=[]
- private starttime:any=''
- private endtime:any=''
- private startstate:any='none'
- private setMarker(res) {
- console.log(res);
- const that=this
- that.carDate=[]
- that.carDataList=[]
- for(var i=0;i<res.data.data.rsData.length;i++){
- that.carDate.push(res.data.data.rsData[i])
+ 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 = [];
+ private marker: any = [];
+ private dataList: any = [];
+ private indataList: any = [];
+ private LudataList: any = [];
+ private carDataList: any = [];
+ private starttime: any = "";
+ private endtime: any = "";
+ private InfoWindow = null;
+ private startstate: any = "none";
+ 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);
}
- for(var i=0;i<res.data.data.data.length;i++){
- that.carDataList.push(res.data.data.data[i])
- }
- console.log(that.carDate,'that.carDate');
- console.log(that.carDataList,'that.carDataList');
- that.map.clearOverlays()
- let bPoints = []
- let aPoints = []
- if (res.status ===200) {
- for (let i = 0; i < that.carDate.length; i++) {
- //������������point
- var myIcon = new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50), {
- });
- const statePoint = new BMapGL.Point(that.carDate[i].flylon,that.carDate[i].flylat);
- bPoints.push(statePoint)
- that.marker[i] = new BMapGL.Marker(statePoint,{icon:myIcon});
- that.marker[i].customData = {data: that.carDate[i].data,state: that.carDate[i].state};
- //������������������marker
- that.map.addOverlay(that.marker[i]);
- // if(that.check===false){
- that.marker[i].addEventListener("click",function(){
- console.log(that.carDate[i].data,'that.carDate[i].data');
- switch(that.carDate[i].state){
- case '1':
- that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)
- ));
- that.carDate[i].state='2'
- break;
- case '2':
- that.marker[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)
- ));
- that.carDate[i].state='1'
- }
- that.dataList.push({code:that.carDate[i].data,state:that.carDate[i].state});
- if(that.startstate==='batch'){
- if(that.starttime!==''&&that.endtime!==''){
- that.$message.warning('������������')
- return
- }
- if(that.starttime===''){
- that.starttime=that.carDate[i].time
- }else{
- that.endtime=that.carDate[i].time
- }
- }
-
-
- for (let i = 0; i < that.dataList.length; i++) {
- for (let j = i + 1; j < that.dataList.length; j++) {
- if (that.dataList[i].code == that.dataList[j].code) {
- that.dataList.splice(j, 1);
- if(that.dataList[i].state==='1'){
- that.dataList[i].state='2'
- }else{
- that.dataList[i].state='1'
- }
- }
- }
- }
- }); //������������
- // }
- }
+ });
+ // 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 };
+ });
- for (let i = 0; i < that.carDataList.length; i++) {
- // console.log(that.carDataList[i],'that.carDataList[i]');
- //������������point
- var myIcon = new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50));
- const statePoint = new BMapGL.Point(that.carDataList[i].longitude,that.carDataList[i].latitude);
- // console.log(statePoint,'statePoint');
- aPoints.push(statePoint)
- //���marker���������data��������� ������������������
- that.markerdata[i] = new BMapGL.Marker(statePoint,{icon:myIcon});
- that.markerdata[i].customData = {data: that.carDataList[i].code,state: that.carDataList[i].state,id:that.carDataList[i].id};
- //������������������marker
- that.map.addOverlay(that.markerdata[i]);
- // if(that.check===false){
- that.markerdata[i].addEventListener("click",function(){
- switch(that.carDataList[i].state){
- case '1':
- that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"), new BMapGL.Size(50, 50)
- ));
- that.carDataList[i].state='2';
- break;
- case '2':
- console.log(123);
- that.markerdata[i].setIcon(new BMapGL.Icon(require("@/assets/723cd95f31481a502d495b2d814d658.png"), new BMapGL.Size(50, 50)
- ));
- that.carDataList[i].state='1';
- break;
- }
- that.dataList.push({code:that.carDataList[i].code,state:that.carDataList[i].state,id:that.carDataList[i].id});
- // console.log(that.dataList);
- for (let i = 0; i < that.dataList.length; i++) {
- for (let j = i + 1; j < that.dataList.length; j++) {
- if (that.dataList[i].code == that.dataList[j].code) {
- that.dataList.splice(j, 1);
- if(that.dataList[i].state==='1'){
- that.dataList[i].state='2'
- }else{
- that.dataList[i].state='1'
- }
- }
- }
- }
- }); //������������
- // }
- }
+ 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 = [];
+ let pointSlint = [];
- //���������������������������������������
- if(that.pointshow===false){
- that.setZoom(bPoints)
- }else{
- that.setZoom(aPoints)
+ 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));
+ }
+ 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();
+ let bPoints = [];
+ let aPoints = [];
+ if (res.status === 200) {
+ for (let i = 0; i < that.carDate.length; i++) {
+ //������������point
+ let myIcon = new BMapGL.Icon(
+ require("@/assets/723cd95f31481a502d495b2d814d658.png"),
+ new BMapGL.Size(50, 50),
+ {}
+ );
+ let startIcon = new BMapGL.Icon(
+ require("@/assets/start.png"),
+ new BMapGL.Size(50, 50),
+ {}
+ );
+ let endIcon = new BMapGL.Icon(
+ require("@/assets/end.png"),
+ new BMapGL.Size(50, 50),
+ {}
+ );
+ const statePoint = new BMapGL.Point(
+ that.carDate[i].flylon,
+ that.carDate[i].flylat
+ );
+ bPoints.push(statePoint);
+ if (i === 0) {
+ 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].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].customData = {
+ data: that.carDate[i].data,
+ state: that.carDate[i].state,
+ };
+ that.marker[i].iconPng = "myIcon";
}
+ let infoWindow = "";
+ //that.marker[i].name = that.carDate[i].time;
+ that.marker[i].on("mouseover", function(e) {
+ infoWindow = new BMapGL.InfoWindow(
+ "������������:" + that.carDate[i].time
+ );
+ that.map.openInfoWindow(infoWindow, statePoint);
+ });
+
+ that.marker[i].on("mouseout", function(e) {
+ that.map.closeInfoWindow(infoWindow, statePoint);
+ });
+ // that.marker.setTitle(that.carDate[i].time);
+
+ //������������������marker
+ that.map.addOverlay(that.marker[i]);
+ // if(that.check===false){
+ that.marker[i].addEventListener("click", function() {
+ switch (that.carDate[i].state) {
+ case "1":
+ console.log("that.marker", that.marker[i]);
+ that.marker[i].setIcon(
+ new BMapGL.Icon(
+ require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),
+ new BMapGL.Size(50, 50)
+ )
+ );
+ that.carDate[i].state = "2";
+ break;
+ case "2":
+ that.marker[i].setIcon(
+ new BMapGL.Icon(
+ require("@/assets/723cd95f31481a502d495b2d814d658.png"),
+ new BMapGL.Size(50, 50)
+ )
+ );
+ that.carDate[i].state = "1";
+ }
+ that.dataList.push({
+ code: that.carDate[i].data,
+ state: that.carDate[i].state,
+ });
+ if (that.startstate === "batch") {
+ if (that.starttime !== "" && that.endtime !== "") {
+ that.$message.warning("������������");
+ return;
+ }
+ if (that.starttime === "") {
+ that.starttime = that.carDate[i].time;
+ } else {
+ that.endtime = that.carDate[i].time;
+ }
+ }
+
+ for (let i = 0; i < that.dataList.length; i++) {
+ for (let j = i + 1; j < that.dataList.length; j++) {
+ if (that.dataList[i].code == that.dataList[j].code) {
+ that.dataList.splice(j, 1);
+ if (that.dataList[i].state === "1") {
+ that.dataList[i].state = "2";
+ } else {
+ that.dataList[i].state = "1";
+ }
+ }
+ }
+ }
+ }); //������������
+ // }
+ }
+
+ for (let i = 0; i < that.carDataList.length; i++) {
+ // console.log(that.carDataList[i],'that.carDataList[i]');
+ //������������point
+ let myIcon = new BMapGL.Icon(
+ require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),
+ new BMapGL.Size(50, 50)
+ );
+ const statePoint = new BMapGL.Point(
+ that.carDataList[i].longitude,
+ that.carDataList[i].latitude
+ );
+ // console.log(statePoint,'statePoint');
+ aPoints.push(statePoint);
+ //���marker���������data��������� ������������������
+ that.markerdata[i] = new BMapGL.Marker(statePoint, {
+ icon: myIcon,
+ });
+ that.markerdata[i].customData = {
+ data: that.carDataList[i].code,
+ state: that.carDataList[i].state,
+ id: that.carDataList[i].id,
+ };
+ //������������������marker
+ that.map.addOverlay(that.markerdata[i]);
+ // if(that.check===false){
+ that.markerdata[i].addEventListener("click", function() {
+ switch (that.carDataList[i].state) {
+ case "1":
+ that.markerdata[i].setIcon(
+ new BMapGL.Icon(
+ require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),
+ new BMapGL.Size(50, 50)
+ )
+ );
+ that.carDataList[i].state = "2";
+ break;
+ case "2":
+ console.log(123);
+ that.markerdata[i].setIcon(
+ new BMapGL.Icon(
+ require("@/assets/723cd95f31481a502d495b2d814d658.png"),
+ new BMapGL.Size(50, 50)
+ )
+ );
+ that.carDataList[i].state = "1";
+ break;
+ }
+ that.dataList.push({
+ code: that.carDataList[i].code,
+ state: that.carDataList[i].state,
+ id: that.carDataList[i].id,
+ });
+ // console.log(that.dataList);
+ for (let i = 0; i < that.dataList.length; i++) {
+ for (let j = i + 1; j < that.dataList.length; j++) {
+ if (that.dataList[i].code == that.dataList[j].code) {
+ that.dataList.splice(j, 1);
+ if (that.dataList[i].state === "1") {
+ that.dataList[i].state = "2";
+ } else {
+ that.dataList[i].state = "1";
+ }
+ }
+ }
+ }
+ }); //������������
+ // }
+ }
+
+ //���������������������������������������
+ if (that.pointshow === false) {
+ that.setZoom(bPoints);
+ } else {
+ that.setZoom(aPoints);
}
}
- private setZoom(bPoints) {
- var view = this.map.getViewport(eval(bPoints));
- var mapZoom = view.zoom;
- var centerPoint = view.center;
- this.map.centerAndZoom(centerPoint, mapZoom);
- }
-
- private selectLu(){
- get('coordinate/selectCruiserRoad',{
- }).then((res)=>{
- this.dataSource=res.data.data
- })
- }
- private created () {
- this.car()
- this.selectLu()
}
+ 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() {
+ let macType = null;
+ if (this.carvalue !== "������������������") {
+ macType = this.carvalue;
+ }
+ get("coordinate/selectCruiserRoad", {
+ name: this.selectLuName,
+ mac: macType,
+ }).then((res) => {
+ this.dataSource = res.data.data;
+ });
+ }
+ private created() {
+ this.car();
+ this.selectLu();
+ }
}
</script>
@@ -578,8 +926,11 @@
height: 60px;
border-bottom: 1px dashed gray;
}
+.left-five {
+ margin-top: 20px;
+}
.left-two {
- margin-top: 30px;
+ margin-top: 10px;
}
.BMap_Marker.BMap_noprint {
width: 23px;
@@ -593,4 +944,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