458 lines
14 KiB
JavaScript
458 lines
14 KiB
JavaScript
import route from "@/router/index";
|
||
import iconimg from "@/assets/img/dianweidingweiqizi.png";
|
||
export function allPositions(options, show, type, value) {
|
||
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: "#0066cc", // 较深的蓝色（顶部）
|
||
baseColor: "#002244", // 更深的蓝色（底部），增强对比
|
||
opacity: 0.7, // 顶部略透明，突出渐变
|
||
diffHeight: 120, // 高度适中，扩散明显
|
||
speed: 5, // 中等速度
|
||
outline: true,
|
||
outlineColor: "#0066cc", // 轮廓使用较深蓝色
|
||
outlineOpacity: 1,
|
||
outlineWidth: 3.0 // 加粗轮廓，边界清晰
|
||
}
|
||
},
|
||
show,
|
||
popup: item.name
|
||
});
|
||
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);
|
||
let position = window.mapConfig;
|
||
window.marsMap.setCameraView({
|
||
lat: position.allPositionLon,
|
||
lng: position.allPositionLat,
|
||
alt: position.allPositionAlt + 800,
|
||
pitch: position.allPositionPitch
|
||
});
|
||
} else {
|
||
graphics.show = show;
|
||
if (type === "all") {
|
||
let position = window.mapConfig;
|
||
window.marsMap.setCameraView({
|
||
lat: position.allPositionLon,
|
||
lng: position.allPositionLat,
|
||
alt: position.allPositionAlt + 800,
|
||
pitch: position.allPositionPitch
|
||
});
|
||
} else {
|
||
graphics.flyTo();
|
||
console.log(value, item, "valueitem");
|
||
|
||
let graphicLayer = window.marsMap.getLayerById("center");
|
||
if (!graphicLayer) {
|
||
graphicLayer = new mars3d.layer.GraphicLayer({ id: "center" });
|
||
window.marsMap.addLayer(graphicLayer);
|
||
} else {
|
||
graphicLayer.clear();
|
||
}
|
||
let graphic = graphicLayer.getGraphicById(value.id);
|
||
if (!graphic) {
|
||
graphic = new mars3d.graphic.BillboardEntity({
|
||
id: value.id,
|
||
name: "中心点",
|
||
position: [value.lon, value.lat, 0],
|
||
style: {
|
||
image: iconimg,
|
||
scale: 1,
|
||
width: 30,
|
||
height: 50,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||
}
|
||
});
|
||
graphicLayer.addGraphic(graphic); // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
||
}
|
||
}
|
||
}
|
||
// 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();
|
||
}
|
||
|
||
window.marsMap.on("morphStart", function (event) {
|
||
console.log("开始变换模式", event);
|
||
});
|
||
if (type === "all") {
|
||
options.forEach((item, index) => {
|
||
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: deviceItem.isOnline
|
||
? require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`)
|
||
: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`),
|
||
// visibleDepth:false,
|
||
scale: 1.5,
|
||
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) => {
|
||
// 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: item.isOnline
|
||
? require(`@/assets/img/device/deviceIcon/${item.icon}.png`)
|
||
: require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`),
|
||
// visibleDepth:false,
|
||
scale: 1.5,
|
||
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;
|
||
if (graphic.name === "无人机") {
|
||
graphic.bindPopup(
|
||
` <div class="mians" style="height: 435px;">
|
||
<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="lblCenter">${attr.centerdistance}</p>
|
||
</div>
|
||
<div class="txt1">
|
||
<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 lblCenter = container.querySelector("#lblCenter");
|
||
if (lblCenter) {
|
||
lblCenter.innerHTML = Math.round(params.centerdistance) + "米";
|
||
}
|
||
|
||
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 =
|
||
"E：" +
|
||
params.speed_E +
|
||
" N：" +
|
||
params.speed_N +
|
||
" U：" +
|
||
params.speed_E;
|
||
}
|
||
});
|
||
} else if (graphic.name === "飞手") {
|
||
} else {
|
||
let wPath = window.document.location.href;
|
||
let pathName = route.path;
|
||
let pos = wPath.indexOf(pathName);
|
||
let localhostPath = wPath.substring(0, pos);
|
||
let uploadUrl =
|
||
process.env.VUE_APP_API_URL === "/"
|
||
? localhostPath
|
||
: process.env.VUE_APP_API_URL;
|
||
graphic.bindPopup(
|
||
` <div class="mians">
|
||
<div class="title">${attr.name}</div>
|
||
<div class="imgs"><img src="${
|
||
attr.img !== null
|
||
? uploadUrl + 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.isOnline ? "在线" : "离线"}</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) => {
|
||
if (item.drone_lon !== 0 || item.drone_lat !== 0) {
|
||
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
|
||
// },
|
||
model: {
|
||
scale: 8,
|
||
url: "/uav/scene.gltf",
|
||
// 航向
|
||
heading: 0,
|
||
// 俯仰
|
||
pitch: 0,
|
||
// 滚转
|
||
roll: 0.0,
|
||
show: true
|
||
},
|
||
attr: item
|
||
});
|
||
graphicLayer.addGraphic(graphic);
|
||
}
|
||
|
||
graphic.attr = item;
|
||
bindLayerPopup(graphicLayer, graphic);
|
||
}
|
||
|
||
if (item.app_lon !== 0 || item.app_lat !== 0) {
|
||
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);
|
||
}
|
||
}
|
||
// 更新发现无人机设备的大小
|
||
let graphicDevice = window.marsMap.getLayerById("devLog");
|
||
if (graphicDevice) {
|
||
let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
|
||
if (deviceGraphic !== undefined) {
|
||
deviceGraphic.setOptions({
|
||
style: {
|
||
scale: 2
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
//绑定气泡弹窗
|
||
graphicLayer.eachGraphic((car) => {
|
||
// 取出对应无人机的轨迹列表
|
||
options.map((item) => {
|
||
if (item.BatchId === car.id) {
|
||
if (item.drone_lon !== 0 || item.drone_lat !== 0) {
|
||
// eslint-disable-next-line no-undef
|
||
const point = new mars3d.LngLatPoint(
|
||
item.drone_lon,
|
||
item.drone_lat,
|
||
item.height || 10
|
||
);
|
||
car.addDynamicPosition(point, 0);
|
||
}
|
||
} else if (item.BatchId + "_app" === car.id) {
|
||
if (item.app_lon !== 0 || item.app_lat !== 0) {
|
||
// eslint-disable-next-line no-undef
|
||
const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
|
||
car.addDynamicPosition(point, 0);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
}
|