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

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

Browse Source
main
许宏杰 4 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>
<div class="map-container">
<div class="input-search" ref="targetElement">
<div class="input-search" id="targetElement">
<div class="search-box">
<input
type="text"
@ -150,6 +150,16 @@ export default {
document.addEventListener("click", this.handleClickOutside);
},
methods: {
// 搜索下拉框控制
handleClickOutside(event) {
if (
this.show &&
!document.getElementById("targetElement").contains(event.target)
) {
this.show = false;
}
},
/**获取车辆接口 */
async carPoint(isBoole) {
let res = await getCarPoint(this.carQuery);
@ -242,122 +252,128 @@ export default {
this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
for (let index = 0; index < this.list.length; index++) {
let item = this.list[index];
const graphic = new mars3d.graphic.ModelEntity({
id: `car${item.carId}`,
// position: new mars3d.LngLatPoint(
// parseFloat(item.lng),
// parseFloat(item.lat),
// 30
// ),
style: {
url: this.carUrl,
scale: 0.5,
minimumPixelSize: 32,
silhouette: true,
silhouetteColor: "#008cff",
pitch: 0, //俯仰角
roll: 0, //翻滚角
highlight: {
type: "click",
if (item.missionId) {
//只显示有任务的车辆
const graphic = new mars3d.graphic.ModelEntity({
id: `car${item.carId}`,
// position: new mars3d.LngLatPoint(
// parseFloat(item.lng),
// parseFloat(item.lat),
// 30
// ),
style: {
url: this.carUrl,
scale: 0.5,
minimumPixelSize: 32,
silhouette: true,
silhouetteColor: "#FFB200",
},
},
circle: {
radius: 200,
fill: false,
materialType: mars3d.MaterialType.CircleWave,
materialOptions: {
color: "#FFB200",
count: 2,
speed: 6,
silhouetteColor: "#008cff",
pitch: 0, //俯仰角
roll: 0, //翻滚角
highlight: {
type: "click",
silhouette: true,
silhouetteColor: "#FFB200",
},
},
},
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: {
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({
id: e.target._id,
color: "#FFB200",
image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
});
});
graphic.on(mars3d.EventType.highlightClose, (e) => {
e.target.setOptions({
circle: {
fill: false,
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.carPlate}
</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: {
fill: true,
},
});
this.handleCarActive({
id: e.target._id,
color: "#FFB200",
image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
});
});
this.handleCarActive({
id: e.target._id,
color: "#008cff",
image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
graphic.on(mars3d.EventType.highlightClose, (e) => {
e.target.setOptions({
circle: {
fill: false,
},
});
this.handleCarActive({
id: e.target._id,
color: "#008cff",
image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
});
});
});
this.$nextTick(() => {
if (type) {
console.log(type);
// 开启高亮
graphic.openHighlight();
}
});
this.$nextTick(() => {
if (type) {
console.log(type);
// 开启高亮
graphic.openHighlight();
}
});
graphic.on(mars3d.EventType.click, (e) => {
const attr = e.target.attr;
if (!attr.missionId) {
this.$modal.msgError("该车辆暂无任务！");
return;
}
this.$router.push({
path: "/carInfo",
query: {
carId: e.target.attr.index,
missionId: attr.missionId,
missionName: item.missionName,
},
graphic.on(mars3d.EventType.click, (e) => {
const attr = e.target.attr;
if (!attr.missionId) {
this.$modal.msgError("该车辆暂无任务！");
return;
}
this.$router.push({
path: "/carInfo",
query: {
carId: e.target.attr.index,
missionId: attr.missionId,
missionName: item.missionName,
},
});
});
});
}
}
// 定时更新动态位置（setInterval为演示）
this.changePosition(0);
const interval = 10;
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) {

Write Preview
Loading…
Cancel
Save