403 lines
12 KiB
JavaScript
403 lines
12 KiB
JavaScript
export function allPositions(options, show) {
|
|
options.forEach((item, index) => {
|
|
let graphic = window.marsMap.getLayerById(
|
|
item.geometry.coordinates[0][0][0]
|
|
);
|
|
// console.log(item,'item')
|
|
if (!graphic) {
|
|
//扩散效果
|
|
graphic = new mars3d.layer.GeoJsonLayer({
|
|
id: item.geometry.coordinates[0][0][0],
|
|
name: "zhendi",
|
|
data: item,
|
|
symbol: {
|
|
type: "diffuseWall",
|
|
merge: true,
|
|
styleOptions: {
|
|
color: "#3388cc",
|
|
opacity: 1,
|
|
outline: true,
|
|
outlineColor: "#3388cc",
|
|
outlineOpacity: 1,
|
|
outlineWidth: 2.0,
|
|
diffHeight: 70, // 高度
|
|
speed: 5 // 速度
|
|
}
|
|
},
|
|
show,
|
|
popup: item.name,
|
|
flyTo: true
|
|
});
|
|
window.marsMap.addLayer(graphic);
|
|
} else {
|
|
graphic.show = show;
|
|
}
|
|
let graphics = window.marsMap.getLayerById(
|
|
item.geometry.coordinates[0][0][0] + 10
|
|
);
|
|
if (!graphics) {
|
|
//区域
|
|
graphics = new mars3d.layer.GeoJsonLayer({
|
|
id: item.geometry.coordinates[0][0][0] + 10,
|
|
name: "zhendi",
|
|
data: item,
|
|
symbol: {
|
|
styleOptions: {
|
|
fill: true,
|
|
color: "#3388cc",
|
|
opacity: 0.5,
|
|
outline: true,
|
|
outlineStyle: {
|
|
width: 2,
|
|
opacity: 0.1
|
|
// materialType: "CircleScan",
|
|
// materialOptions: {
|
|
// color: item.properties.color
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
show,
|
|
popup: item.name
|
|
});
|
|
window.marsMap.addLayer(graphics);
|
|
} else {
|
|
graphics.show = show;
|
|
graphics.flyTo();
|
|
}
|
|
// if (item.regionModels.length !== 0) {
|
|
// item.regionModels.forEach((val, index) => {
|
|
// }
|
|
});
|
|
}
|
|
export function allDevices(options, type, show) {
|
|
let graphicLayer = window.marsMap.getLayerById("devLog");
|
|
if (!graphicLayer) {
|
|
graphicLayer = new mars3d.layer.GraphicLayer({ id: "devLog" });
|
|
window.marsMap.addLayer(graphicLayer);
|
|
} else {
|
|
graphicLayer.clear();
|
|
}
|
|
if (type === "all") {
|
|
options.forEach((item, index) => {
|
|
console.log(item, "item");
|
|
if (item.devices.length !== 0) {
|
|
item.devices.forEach((deviceItem, index) => {
|
|
let graphic = graphicLayer.getGraphicById(deviceItem.id);
|
|
if (!graphic) {
|
|
graphic = new mars3d.graphic.BillboardEntity({
|
|
id: deviceItem.id,
|
|
name: "设备",
|
|
position: new mars3d.LngLatPoint(
|
|
deviceItem.lon,
|
|
deviceItem.lat,
|
|
0
|
|
),
|
|
style: {
|
|
image: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`),
|
|
// visibleDepth:false,
|
|
scale: 1,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
clampToGround: true,
|
|
scaleByDistance: true,
|
|
scaleByDistance_near: 100,
|
|
scaleByDistance_nearValue: 0.5
|
|
},
|
|
attr: deviceItem,
|
|
show
|
|
});
|
|
bindLayerPopup(graphicLayer, graphic);
|
|
graphicLayer.addGraphic(graphic);
|
|
} else {
|
|
graphic.show = show;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} else {
|
|
options.devices.forEach((item, index) => {
|
|
console.log(options, "item");
|
|
// const image = getImageSrc(item.deviceType.type);
|
|
let graphic = graphicLayer.getGraphicById(item.id);
|
|
if (!graphic) {
|
|
graphic = new mars3d.graphic.BillboardEntity({
|
|
id: item.id,
|
|
name: "设备",
|
|
position: new mars3d.LngLatPoint(item.lon, item.lat, 0),
|
|
style: {
|
|
image: require(`@/assets/img/device/deviceIcon/${item.icon}.png`),
|
|
// visibleDepth:false,
|
|
scale: 1,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
clampToGround: true,
|
|
scaleByDistance: true,
|
|
scaleByDistance_near: 100,
|
|
scaleByDistance_nearValue: 0.5
|
|
},
|
|
attr: item,
|
|
show
|
|
});
|
|
bindLayerPopup(graphicLayer, graphic);
|
|
graphicLayer.addGraphic(graphic);
|
|
} else {
|
|
graphic.show = show;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
import imgUav from "@/assets/img/uavimg.png";
|
|
//设备广告牌
|
|
function bindLayerPopup(graphicLayer, graphic) {
|
|
let attr = graphic.attr;
|
|
console.log(attr, graphic, "attr");
|
|
if (graphic.name === "无人机") {
|
|
graphic.bindPopup(
|
|
` <div class="mians" style="height: 410px;">
|
|
<div class="title">${attr.device_type}</div>
|
|
<div class="imgs"><img src="${imgUav}" /></div>
|
|
<div class="device-type" style="margin-top: 8%;">
|
|
<div class="txt">
|
|
<p class="p1">频段</p>
|
|
<p class="p2">${attr.freq}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">距离</p>
|
|
<p class="p2" id="lblDistance">${attr.distance}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">型号</p>
|
|
<p class="p2">${attr.device_type}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">高度</p>
|
|
<p class="p2" id="lblHeight">${attr.height}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">SN码</p>
|
|
<p class="p2">${attr.serial_number}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">速度</p>
|
|
<p class="p2" id="lblSpeed">${attr.height}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
closeButton: false,
|
|
hasZIndex: false,
|
|
zIndex: 2
|
|
}
|
|
);
|
|
graphic.on(mars3d.EventType.popupRender, function (event) {
|
|
const container = event.container; // popup对应的DOM
|
|
|
|
const params = graphic?.attr;
|
|
if (!params) {
|
|
return;
|
|
}
|
|
const lblHeight = container.querySelector("#lblHeight");
|
|
if (lblHeight) {
|
|
lblHeight.innerHTML = params.height + "米";
|
|
}
|
|
|
|
const lblDistance = container.querySelector("#lblDistance");
|
|
if (lblDistance) {
|
|
lblDistance.innerHTML = Math.round(params.distance) + "米";
|
|
}
|
|
|
|
const lblSpeed = container.querySelector("#lblSpeed");
|
|
if (lblSpeed) {
|
|
const speeds = [params.speed_E, params.speed_N, params.speed_U].filter(
|
|
(speed) => speed !== undefined
|
|
);
|
|
const maxSpeed = speeds.length > 0 ? Math.max(...speeds) : undefined;
|
|
lblSpeed.innerHTML = maxSpeed + "m/s";
|
|
}
|
|
});
|
|
} else if (graphic.name === "飞手") {
|
|
} else {
|
|
graphic.bindPopup(
|
|
` <div class="mians">
|
|
<div class="title">${attr.name}</div>
|
|
<div class="imgs"><img src="${
|
|
attr.img !== null
|
|
? process.env.VUE_APP_API_URL + attr.img
|
|
: require("@/assets/img/nopic.png")
|
|
}" /></div>
|
|
<div class="device-type">
|
|
<div class="txt">
|
|
<p class="p1">经度</p>
|
|
<p class="p2">${attr.lon}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">IP</p>
|
|
<p class="p2">${attr.ip}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">纬度</p>
|
|
<p class="p2">${attr.lat}</p>
|
|
</div>
|
|
<div class="txt">
|
|
<p class="p1">状态</p>
|
|
<p class="p2">${attr.state ? "在线" : "离线"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
{
|
|
closeButton: false,
|
|
hasZIndex: false,
|
|
zIndex: 2
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
export function mapUavFiex(options) {
|
|
let map = window.marsMap; // 记录map
|
|
let graphicLayer = map.getLayerById("uavFiex");
|
|
if (!graphicLayer) {
|
|
// eslint-disable-next-line no-undef
|
|
graphicLayer = new mars3d.layer.GraphicLayer({ id: "uavFiex" });
|
|
map.addLayer(graphicLayer);
|
|
}
|
|
|
|
if (options.length === 0) {
|
|
graphicLayer.remove();
|
|
} else {
|
|
options.forEach((item) => {
|
|
let graphic = graphicLayer.getGraphicById(item.BatchId);
|
|
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
|
|
|
//发现无人机
|
|
if (!graphic) {
|
|
// eslint-disable-next-line no-undef
|
|
graphic = new mars3d.graphic.Route({
|
|
id: item.BatchId,
|
|
name: "无人机",
|
|
maxCacheCount: -1,
|
|
polyline: {
|
|
width: 2,
|
|
opacity: 1,
|
|
randomColor: true,
|
|
show: true
|
|
},
|
|
billboard: {
|
|
image: require("@/assets/img/uav.svg"),
|
|
scale: 0.5,
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
|
},
|
|
|
|
attr: item
|
|
});
|
|
graphicLayer.addGraphic(graphic);
|
|
}
|
|
|
|
graphic.attr = item;
|
|
bindLayerPopup(graphicLayer, graphic);
|
|
|
|
let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app");
|
|
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
|
|
|
//发现无人机
|
|
if (!app_graphic) {
|
|
// eslint-disable-next-line no-undef
|
|
app_graphic = new mars3d.graphic.Route({
|
|
id: item.BatchId + "_app",
|
|
name: "飞手",
|
|
maxCacheCount: -1,
|
|
label: {
|
|
text: "飞手位置",
|
|
font_size: 14,
|
|
font_family: "微软雅黑"
|
|
},
|
|
polyline: {
|
|
width: 2,
|
|
opacity: 1,
|
|
randomColor: true,
|
|
show: true
|
|
},
|
|
point: {
|
|
color: "#00ffff",
|
|
pixelSize: 8,
|
|
outlineColor: "#ffffff",
|
|
outlineWidth: 2
|
|
},
|
|
|
|
attr: item
|
|
});
|
|
graphicLayer.addGraphic(app_graphic);
|
|
}
|
|
// 起始点位
|
|
// if (item.lon !== 0 && item.lat !== 0) {
|
|
// if (!startPoint) {
|
|
// // eslint-disable-next-line no-undef
|
|
// startPoint = new mars3d.graphic.BillboardEntity({
|
|
// id: item.BatchId + "start",
|
|
// // eslint-disable-next-line no-undef
|
|
// position: new mars3d.LngLatPoint(item.lon, item.lat, item.alt),
|
|
// style: {
|
|
// image: require("@/assets/img/uav.svg"),
|
|
// scale: 1,
|
|
// // eslint-disable-next-line no-undef
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
// // eslint-disable-next-line no-undef
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
// label: {
|
|
// text: "起始点",
|
|
// font: "14px Arial",
|
|
// color: "#ffffff",
|
|
// outline: true,
|
|
// outlineColor: "#000000",
|
|
// outlineWidth: 2,
|
|
// // eslint-disable-next-line no-undef
|
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
// // eslint-disable-next-line no-undef
|
|
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
|
// }
|
|
// },
|
|
// show: false,
|
|
// attr: item
|
|
// });
|
|
// graphicLayer.addGraphic(startPoint);
|
|
// }
|
|
// }
|
|
let graphicDevice = window.marsMap.getLayerById("devLog");
|
|
if (graphicDevice) {
|
|
let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
|
|
console.log(deviceGraphic, "deviceGraphic");
|
|
deviceGraphic.setOptions({
|
|
style: {
|
|
scale: 1.5
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//绑定气泡弹窗
|
|
graphicLayer.eachGraphic((car) => {
|
|
// 取出对应无人机的轨迹列表
|
|
options.map((item) => {
|
|
if (item.BatchId === car.id) {
|
|
// eslint-disable-next-line no-undef
|
|
const point = new mars3d.LngLatPoint(
|
|
item.drone_lon,
|
|
item.drone_lat,
|
|
item.height
|
|
);
|
|
car.addDynamicPosition(point, 0);
|
|
} else if (item.BatchId + "_app" === car.id) {
|
|
console.log(item.app_lon, item.app_lat, "item");
|
|
// eslint-disable-next-line no-undef
|
|
const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
|
|
car.addDynamicPosition(point, 0);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|