|
|
|
|
@ -24,6 +24,7 @@
|
|
|
|
|
>
|
|
|
|
|
{{ item.carName }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="no-data" v-show="searchText">{{ searchText }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-collapse-transition>
|
|
|
|
|
</div>
|
|
|
|
|
@ -62,12 +63,13 @@ export default {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
searchList: [],
|
|
|
|
|
searchText: "",
|
|
|
|
|
searchQuery: {
|
|
|
|
|
carPlate: undefined, //车牌
|
|
|
|
|
plateColor: undefined, //车辆颜色
|
|
|
|
|
},
|
|
|
|
|
carQuery: {
|
|
|
|
|
teamId: "", //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
|
|
|
|
|
teamId: 2, //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
|
|
|
|
|
carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
|
|
|
|
|
},
|
|
|
|
|
list: [],
|
|
|
|
|
@ -99,10 +101,31 @@ export default {
|
|
|
|
|
showSkyBox: false,
|
|
|
|
|
showSun: false,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
control: {
|
|
|
|
|
contextmenu: { preventDefault: false, hasDefault: false },
|
|
|
|
|
},
|
|
|
|
|
basemaps: [
|
|
|
|
|
{
|
|
|
|
|
name: "影像地图",
|
|
|
|
|
type: "xyz",
|
|
|
|
|
url: "/map/{z}/{y}/{x}.png",
|
|
|
|
|
minimumLevel: 1,
|
|
|
|
|
maximumLevel: 16,
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// name: "mapbox影像图",
|
|
|
|
|
// icon: "img/basemaps/mapboxSatellite.png",
|
|
|
|
|
// type: "mapbox",
|
|
|
|
|
// username: "sharealex",
|
|
|
|
|
// styleId: "cly5i21fn00e901prgq643t4r",
|
|
|
|
|
// token:
|
|
|
|
|
// "pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw",
|
|
|
|
|
// tilesize: 256,
|
|
|
|
|
// scaleFactor: false,
|
|
|
|
|
// show: true,
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
show: false,
|
|
|
|
|
showVideo: true,
|
|
|
|
|
@ -121,6 +144,18 @@ export default {
|
|
|
|
|
document.addEventListener("click", this.handleClickOutside);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/**获取车辆接口 */
|
|
|
|
|
async carPoint() {
|
|
|
|
|
let res = await getCarPoint(this.carQuery);
|
|
|
|
|
// console.log(res.list);
|
|
|
|
|
// res.list = res.list.filter(
|
|
|
|
|
// (item) =>
|
|
|
|
|
// item.carPlate.includes("苏E") ||
|
|
|
|
|
// (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
|
|
|
|
|
// );
|
|
|
|
|
return res.list;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 加载姑苏区三维图层
|
|
|
|
|
*/
|
|
|
|
|
@ -161,34 +196,27 @@ export default {
|
|
|
|
|
this.createCar();
|
|
|
|
|
},
|
|
|
|
|
/**创建车辆 */
|
|
|
|
|
createCar() {
|
|
|
|
|
let list = [
|
|
|
|
|
{
|
|
|
|
|
name: "001号线_01_早送_守押001_苏E",
|
|
|
|
|
position: [120.608163, 31.184288, 13.5],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "002号线_01_维护_守押085_苏E",
|
|
|
|
|
position: [120.607528, 31.209201, 11.1],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "临时任务_考试院_守押072_苏E123",
|
|
|
|
|
position: [120.657466, 31.220895, 12.7],
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
async createCar(type) {
|
|
|
|
|
this.list = await this.carPoint();
|
|
|
|
|
this.mapLayer.car.clear();
|
|
|
|
|
this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
|
|
|
|
|
for (let index = 0; index < list.length; index++) {
|
|
|
|
|
let item = list[index];
|
|
|
|
|
for (let index = 0; index < this.list.length; index++) {
|
|
|
|
|
let item = this.list[index];
|
|
|
|
|
const graphic = new mars3d.graphic.ModelEntity({
|
|
|
|
|
id: `car${index + 1}`,
|
|
|
|
|
position: item.position,
|
|
|
|
|
id: `car${item.carId}`,
|
|
|
|
|
// position: new mars3d.LngLatPoint(
|
|
|
|
|
// parseFloat(item.lng),
|
|
|
|
|
// parseFloat(item.lat),
|
|
|
|
|
// 30
|
|
|
|
|
// ),
|
|
|
|
|
style: {
|
|
|
|
|
url: this.carUrl,
|
|
|
|
|
scale: 0.5,
|
|
|
|
|
minimumPixelSize: 30,
|
|
|
|
|
silhouette: true,
|
|
|
|
|
silhouetteColor: "#008cff",
|
|
|
|
|
pitch: 0, //俯仰角
|
|
|
|
|
roll: 0, //翻滚角
|
|
|
|
|
highlight: {
|
|
|
|
|
type: "click",
|
|
|
|
|
silhouette: true,
|
|
|
|
|
@ -206,19 +234,16 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
attr: {
|
|
|
|
|
index: index + 1,
|
|
|
|
|
index: item.carId,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.mapLayer.car.addGraphic(graphic);
|
|
|
|
|
this.mapLayer.car.enabledEvent = true; // 恢复事件
|
|
|
|
|
|
|
|
|
|
graphic.bindPopup(
|
|
|
|
|
() => {
|
|
|
|
|
let html = `<div id="car${index + 1}" class="carPlate">
|
|
|
|
|
<img src="${require(`../assets/images/carType${
|
|
|
|
|
index + 1
|
|
|
|
|
}.png`)}" class="carType"/>
|
|
|
|
|
${item.name}
|
|
|
|
|
let html = `<div id="car${item.carId}" class="carPlate">
|
|
|
|
|
<img src="${require(`../assets/images/carType${1}.png`)}" class="carType"/>
|
|
|
|
|
${item.carPlate}
|
|
|
|
|
</div>`;
|
|
|
|
|
return html;
|
|
|
|
|
},
|
|
|
|
|
@ -242,7 +267,7 @@ export default {
|
|
|
|
|
this.handleCarActive({
|
|
|
|
|
id: e.target._id,
|
|
|
|
|
color: "#FFB200",
|
|
|
|
|
image: require(`../assets/images/carType${e.target.attr.index}-s.png`),
|
|
|
|
|
image: require(`../assets/images/carType1-s.png`),
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
graphic.on(mars3d.EventType.highlightClose, (e) => {
|
|
|
|
|
@ -254,71 +279,114 @@ export default {
|
|
|
|
|
this.handleCarActive({
|
|
|
|
|
id: e.target._id,
|
|
|
|
|
color: "#008cff",
|
|
|
|
|
image: require(`../assets/images/carType${e.target.attr.index}.png`),
|
|
|
|
|
image: require(`../assets/images/carType1.png`),
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if (type) {
|
|
|
|
|
console.log(type);
|
|
|
|
|
// 开启高亮
|
|
|
|
|
graphic.openHighlight();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
graphic.on(mars3d.EventType.click, (e) => {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/carInfo",
|
|
|
|
|
// query: { carId: e.target.id },
|
|
|
|
|
query: { carId: e.target.attr.index },
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// // 设置动态位置
|
|
|
|
|
// this.changePosition(0);
|
|
|
|
|
|
|
|
|
|
// // 定时更新动态位置（setInterval为演示）
|
|
|
|
|
// const interval = 30;
|
|
|
|
|
// this.changePosition(interval);
|
|
|
|
|
// this.time = setInterval(() => {
|
|
|
|
|
// this.changePosition(interval);
|
|
|
|
|
// }, interval * 1000);
|
|
|
|
|
}
|
|
|
|
|
// 定时更新动态位置（setInterval为演示）
|
|
|
|
|
this.changePosition(0);
|
|
|
|
|
const interval = 15;
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
this.time = setInterval(() => {
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
changePosition(time) {
|
|
|
|
|
async changePosition(interval) {
|
|
|
|
|
let list = await this.carPoint();
|
|
|
|
|
this.mapLayer.car.eachGraphic((graphic) => {
|
|
|
|
|
graphic.addDynamicPosition(this.randomPoint(), time); // 按time秒运动至指定位置
|
|
|
|
|
let carItam = list.filter((car) => `car${car.carId}` == graphic.id);
|
|
|
|
|
if (carItam.length > 0) {
|
|
|
|
|
let position = Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
parseFloat(carItam[0].lng),
|
|
|
|
|
parseFloat(carItam[0].lat),
|
|
|
|
|
30
|
|
|
|
|
);
|
|
|
|
|
graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
randomPoint() {
|
|
|
|
|
const jd = this.random(120.2 * 1000, 120.9 * 1000) / 1000;
|
|
|
|
|
const wd = this.random(30.9 * 1000, 31.6 * 1000) / 1000;
|
|
|
|
|
return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
|
|
|
|
|
},
|
|
|
|
|
random(min, max) {
|
|
|
|
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
|
|
|
},
|
|
|
|
|
// randomPoint() {
|
|
|
|
|
// const jd = this.random(120.2 * 1000, 120.9 * 1000) / 1000;
|
|
|
|
|
// const wd = this.random(30.9 * 1000, 31.6 * 1000) / 1000;
|
|
|
|
|
// return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
|
|
|
|
|
// },
|
|
|
|
|
// random(min, max) {
|
|
|
|
|
// return Math.floor(Math.random() * (max - min + 1) + min);
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 处理车辆被选中
|
|
|
|
|
*/
|
|
|
|
|
handleCarActive(data) {
|
|
|
|
|
let carItem = document.getElementById(data.id);
|
|
|
|
|
// console.log(data, carItem);
|
|
|
|
|
let carIcon = carItem.getElementsByClassName("carType")[0];
|
|
|
|
|
carIcon.src = data.image;
|
|
|
|
|
carItem.style.borderColor = data.color;
|
|
|
|
|
},
|
|
|
|
|
/**搜索 */
|
|
|
|
|
handleSearch() {
|
|
|
|
|
this.searchList = [
|
|
|
|
|
{
|
|
|
|
|
carName: "002号线_01_维护_守押085_苏E",
|
|
|
|
|
position: [120.607528, 31.209201, 11.1],
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
/**根据车牌号查询车辆实时定位 */
|
|
|
|
|
async handleSearch() {
|
|
|
|
|
if (!this.searchQuery.carPlate) return;
|
|
|
|
|
// 清除轮询定时器
|
|
|
|
|
if (this.timer) clearInterval(this.timer);
|
|
|
|
|
const result = await getCarByCarplate(this.searchQuery);
|
|
|
|
|
if (result.list) {
|
|
|
|
|
this.searchList = result.list;
|
|
|
|
|
} else {
|
|
|
|
|
this.searchText = result.rspDesc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.show = !this.show;
|
|
|
|
|
this.show = true;
|
|
|
|
|
},
|
|
|
|
|
/**单击搜索结果 */
|
|
|
|
|
handelLookCar(item) {
|
|
|
|
|
let carItem = this.mapLayer.car.getGraphicById(`car2`);
|
|
|
|
|
carItem.openHighlight();
|
|
|
|
|
this.map.flyToPoint(item.position, {
|
|
|
|
|
radius: 3788,
|
|
|
|
|
this.carQuery.teamId = undefined;
|
|
|
|
|
this.carQuery.carIds = item.carId;
|
|
|
|
|
this.map.flyToPoint(
|
|
|
|
|
new mars3d.LngLatPoint(parseFloat(item.lng), parseFloat(item.lat))
|
|
|
|
|
);
|
|
|
|
|
this.createCar(true);
|
|
|
|
|
this.show = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 清除操作
|
|
|
|
|
*/
|
|
|
|
|
inputClear() {
|
|
|
|
|
if (!this.searchQuery.carPlate) return;
|
|
|
|
|
if (this.timer) clearInterval(this.timer);
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.searchText = "";
|
|
|
|
|
this.searchQuery = {
|
|
|
|
|
carPlate: undefined, //车牌
|
|
|
|
|
plateColor: undefined, //车辆颜色
|
|
|
|
|
};
|
|
|
|
|
this.carQuery = {
|
|
|
|
|
teamId: 2, //该参数表示获取指定车队下所有层级子车队的车辆定位，该参数优先级别高于carIds参数,
|
|
|
|
|
carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.mapLayer.car.eachGraphic((graphic) => {
|
|
|
|
|
graphic.closeHighlight();
|
|
|
|
|
});
|
|
|
|
|
this.show = !this.show;
|
|
|
|
|
|
|
|
|
|
this.createCar();
|
|
|
|
|
this.show = false;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleSelection(item) {
|
|
|
|
|
@ -407,11 +475,13 @@ export default {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
.search-list {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 280px;
|
|
|
|
|
background: #032b57;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: 1px solid #0084ff;
|
|
|
|
|
border-top: 0;
|
|
|
|
|
min-height: 150px;
|
|
|
|
|
& > div {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
@ -420,6 +490,19 @@ export default {
|
|
|
|
|
& > div:hover {
|
|
|
|
|
background: #0084ff;
|
|
|
|
|
}
|
|
|
|
|
.no-data {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.no-data:hover {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.video-list {
|
|
|
|
|
|
