<template>
|
<div style="display: flex; overflow: hidden">
|
<div class="left">
|
<div class="left-one">
|
<a-select
|
ref="select"
|
v-model="carvalue"
|
style="width: 180px"
|
placeholder="请选择走航车"
|
>
|
<a-select-option
|
v-for="item in carIndex"
|
:key="item.id"
|
:value="item.mac"
|
>{{ 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"
|
:selectedRows="selectedRows"
|
:columns="columns"
|
:pagination="false"
|
:scroll="{ y: 300 }"
|
style="width: 100%"
|
></a-table>
|
</div>
|
<div class="left-three" style="margin-top: 20px">
|
<a-button
|
v-show="upa === ''"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="openIn"
|
>添加</a-button
|
>
|
<a-button
|
v-show="upa === 'upa'"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="inupa"
|
>取消</a-button
|
>
|
<a-button
|
v-show="upa === 'upa'"
|
type="primary"
|
style="margin-left: 10px; float: right; margin-right: 10px"
|
@click="openupa"
|
>修改</a-button
|
>
|
</div>
|
<div
|
class="left-four"
|
style="margin-top: 65px"
|
v-show="batchshow === true"
|
>
|
<a-card title="批量添加" style="width: 500px">
|
<div>
|
<div>
|
<span style="font-size: 15.5px; color: black; margin-left: 50px"
|
>开始时间 :</span
|
>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入开始时间"
|
v-model="starttime"
|
/>
|
</div>
|
<div style="margin-top: 10px; margin-left: 50px">
|
<span style="font-size: 15.5px; color: black">结束时间 :</span>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入结束时间"
|
v-model="endtime"
|
/>
|
</div>
|
</div>
|
<div style="margin-left: 140px; margin-top: 30px">
|
<a-button @click="handlebatch">关闭</a-button>
|
<a-button @click="handlenull">清空</a-button>
|
<a-button type="primary" @click="insertbatch">提交</a-button>
|
</div>
|
</a-card>
|
</div>
|
</div>
|
<a-modal
|
title="路段名添加"
|
:visible="visibleCreateModal1"
|
@cancel="handleCreateModalCancel1"
|
destroyOnClose
|
okText="保存"
|
>
|
<template #footer>
|
<a-button key="back" @click="handleCreateModalCancel1">关闭</a-button>
|
<a-button key="submit" type="primary" @click="insertCarLu"
|
>提交</a-button
|
>
|
</template>
|
<div>
|
<div>
|
<span style="font-size: 17.5px; color: black; margin-left: 50px"
|
>路段名称 :</span
|
>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入路段名称"
|
v-model="startLu"
|
/>
|
</div>
|
<!-- <div style="margin-top: 10px; margin-left: 50px">
|
<span style="font-size: 17.5px; color: black">终点 :</span>
|
<a-input
|
style="width: 300px; margin-left: 15px"
|
placeholder="请输入终点"
|
v-model="endLu"
|
/>
|
</div> -->
|
</div>
|
</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">
|
{{ messageshow }}
|
</div>
|
|
<div style="font-size: 20px; margin-left: 50px">
|
<a-button
|
type="primary"
|
style="margin-top: 20px; float: right; margin-right: 20px"
|
@click="closemess"
|
>关闭</a-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<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: {},
|
})
|
export default class road extends Vue {
|
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() {
|
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) {
|
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 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",
|
align: "center",
|
},
|
{
|
title: "操作",
|
customRender: this.opRender,
|
align: "center",
|
},
|
];
|
private openIn() {
|
this.visibleCreateModal1 = true;
|
}
|
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) => {
|
console.log(res);
|
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 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: any) {
|
get("coordinate/deleteCruiserRoad", {
|
id: record.coordinateId,
|
}).then((res) => {
|
console.log(res);
|
this.$message.success(res.data.message);
|
this.selectLu();
|
});
|
}
|
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;
|
this.handlenull();
|
}
|
private handlenull() {
|
this.starttime = "";
|
this.endtime = "";
|
}
|
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()
|
});
|
}
|
// 显示所有矩形
|
showAllPolygon() {
|
let macType = null;
|
if (this.carvalue !== "请选择走航车") {
|
macType = this.carvalue;
|
}
|
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);
|
}
|
}
|
// 添加矩形
|
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);
|
});
|
}
|
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 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;
|
}
|
if (this.timevalue.length === 0) {
|
this.$message.warning("请选择时间");
|
return;
|
}
|
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;
|
// this.check=true
|
this.carDate = [];
|
this.pointshow = false;
|
this.setMarker(res);
|
});
|
}
|
private closemess() {
|
this.showfix = false;
|
}
|
private carDate: any = [];
|
private selectCar() {
|
console.log(this.timevalue);
|
if (this.carvalue === "请选择走航车") {
|
this.$message.warning("请选择走航车");
|
return;
|
}
|
if (this.timevalue.length === 0) {
|
this.$message.warning("请选择时间");
|
return;
|
}
|
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");
|
// 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 = [];
|
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);
|
}
|
});
|
// 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 = [];
|
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));
|
}
|
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: 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>
|
|
<style lang="less">
|
.roadmap {
|
width: 100%;
|
float: right;
|
height: 50rem;
|
}
|
.BMap_cpyCtrl {
|
display: none;
|
}
|
.anchorBL {
|
display: none;
|
}
|
.left {
|
width: 32%;
|
background-color: white;
|
padding: 10px;
|
}
|
.right {
|
width: 68%;
|
}
|
.left-one {
|
margin-top: 5px;
|
height: 60px;
|
border-bottom: 1px dashed gray;
|
}
|
.left-five {
|
margin-top: 20px;
|
}
|
.left-two {
|
margin-top: 10px;
|
}
|
.BMap_Marker.BMap_noprint {
|
width: 23px;
|
}
|
.fixeds {
|
width: 400px;
|
height: 150px;
|
background-color: white;
|
position: fixed;
|
top: 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>
|
