suzhou-jichuang-lanhai
/
yunkunMap
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

不显示无任务车、任务民换成车牌号、

Browse Source
main
许宏杰 6 months ago
parent 839fc0058b
commit a5325e10eb
1 changed files with 117 additions and 101 deletions
Show Stats Download Patch File Download Diff File

218
src/views/car.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="map-container"> <div class="map-container">
<div class="input-search" ref="targetElement"> <div class="input-search" id="targetElement">
<div class="search-box"> <div class="search-box">
<input <input
type="text" type="text"
@ -150,6 +150,16 @@ export default {
document.addEventListener("click", this.handleClickOutside); document.addEventListener("click", this.handleClickOutside);
}, },
methods: { methods: {
// 搜索下拉框控制
handleClickOutside(event) {
if (
this.show &&
!document.getElementById("targetElement").contains(event.target)
) {
this.show = false;
}
},
/**获取车辆接口 */ /**获取车辆接口 */
async carPoint(isBoole) { async carPoint(isBoole) {
let res = await getCarPoint(this.carQuery); let res = await getCarPoint(this.carQuery);
@ -242,122 +252,128 @@ export default {
this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间 this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
for (let index = 0; index < this.list.length; index++) { for (let index = 0; index < this.list.length; index++) {
let item = this.list[index]; let item = this.list[index];
const graphic = new mars3d.graphic.ModelEntity({ if (item.missionId) {
id: `car${item.carId}`, //只显示有任务的车辆
// position: new mars3d.LngLatPoint( const graphic = new mars3d.graphic.ModelEntity({
// parseFloat(item.lng), id: `car${item.carId}`,
// parseFloat(item.lat), // position: new mars3d.LngLatPoint(
// 30 // parseFloat(item.lng),
// ), // parseFloat(item.lat),
style: { // 30
url: this.carUrl, // ),
scale: 0.5, style: {
minimumPixelSize: 32, url: this.carUrl,
silhouette: true, scale: 0.5,
silhouetteColor: "#008cff", minimumPixelSize: 32,
pitch: 0, //俯仰角
roll: 0, //翻滚角
highlight: {
type: "click",
silhouette: true, silhouette: true,
silhouetteColor: "#FFB200", silhouetteColor: "#008cff",
}, pitch: 0, //俯仰角
}, roll: 0, //翻滚角
circle: { highlight: {
radius: 200, type: "click",
fill: false, silhouette: true,
materialType: mars3d.MaterialType.CircleWave, silhouetteColor: "#FFB200",
materialOptions: { },
color: "#FFB200",
count: 2,
speed: 6,
}, },
},
attr: {
index: item.carId,
missionId: item.missionId,
missionName: item.missionName,
missionType: item.missionType,
},
});
this.mapLayer.car.addGraphic(graphic);
this.mapLayer.car.enabledEvent = true; // 恢复事件
graphic.bindPopup(
() => {
let html = `<div id="car${item.carId}" class="carPlate">
<img src="${require(`../assets/images/carType${item.missionType}.png`)}" class="carType"/>
${item.missionName}
</div>`;
return html;
},
{
closeButton: false, //去除关闭按钮
className: "car-page-popup",
pointerEvents: false, //DIV是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。
closeOnClick: false, //是否在单击Map地图时，自动关闭当前弹窗
autoClose: false, //在打开弹窗时，是否自动关闭之前的弹窗
toggle: false, //是否打开状态下再次单击时关闭Popup
}
);
graphic.openPopup();
graphic.on(mars3d.EventType.highlightOpen, (e) => {
e.target.setOptions({
//添加圆效果
circle: { circle: {
fill: true, radius: 200,
fill: false,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
color: "#FFB200",
count: 2,
speed: 6,
},
},
attr: {
index: item.carId,
missionId: item.missionId,
missionName: item.missionName,
missionType: item.missionType,
}, },
}); });
this.handleCarActive({ this.mapLayer.car.addGraphic(graphic);
id: e.target._id, this.mapLayer.car.enabledEvent = true; // 恢复事件
color: "#FFB200", graphic.bindPopup(
image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`), () => {
}); let html = `<div id="car${item.carId}" class="carPlate">
}); <img src="${require(`../assets/images/carType${item.missionType}.png`)}" class="carType"/>
graphic.on(mars3d.EventType.highlightClose, (e) => { ${item.carPlate}
e.target.setOptions({ </div>`;
circle: { return html;
fill: false,
}, },
{
closeButton: false, //去除关闭按钮
className: "car-page-popup",
pointerEvents: false, //DIV是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。
closeOnClick: false, //是否在单击Map地图时，自动关闭当前弹窗
autoClose: false, //在打开弹窗时，是否自动关闭之前的弹窗
toggle: false, //是否打开状态下再次单击时关闭Popup
}
);
graphic.openPopup();
graphic.on(mars3d.EventType.highlightOpen, (e) => {
e.target.setOptions({
//添加圆效果
circle: {
fill: true,
},
});
this.handleCarActive({
id: e.target._id,
color: "#FFB200",
image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
});
}); });
this.handleCarActive({ graphic.on(mars3d.EventType.highlightClose, (e) => {
id: e.target._id, e.target.setOptions({
color: "#008cff", circle: {
image: require(`../assets/images/carType${e.target.attr.missionType}.png`), fill: false,
},
});
this.handleCarActive({
id: e.target._id,
color: "#008cff",
image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
});
}); });
});
this.$nextTick(() => { this.$nextTick(() => {
if (type) { if (type) {
console.log(type); console.log(type);
// 开启高亮 // 开启高亮
graphic.openHighlight(); graphic.openHighlight();
} }
}); });
graphic.on(mars3d.EventType.click, (e) => { graphic.on(mars3d.EventType.click, (e) => {
const attr = e.target.attr; const attr = e.target.attr;
if (!attr.missionId) { if (!attr.missionId) {
this.$modal.msgError("该车辆暂无任务！"); this.$modal.msgError("该车辆暂无任务！");
return; return;
} }
this.$router.push({ this.$router.push({
path: "/carInfo", path: "/carInfo",
query: { query: {
carId: e.target.attr.index, carId: e.target.attr.index,
missionId: attr.missionId, missionId: attr.missionId,
missionName: item.missionName, missionName: item.missionName,
}, },
});
}); });
}); }
} }
// 定时更新动态位置（setInterval为演示） // 定时更新动态位置（setInterval为演示）
this.changePosition(0); this.changePosition(0);
const interval = 10; const interval = 10;
this.changePosition(interval); this.changePosition(interval);
this.time = setInterval(() => {
this.changePosition(interval); //生产环境开启轮询
}, interval * 1000); if (process.env.NODE_ENV === "production") {
this.time = setInterval(() => {
this.changePosition(interval);
}, interval * 1000);
}
}, },
async changePosition(interval) { async changePosition(interval) {

Write Preview
Loading…
Cancel
Save