529 lines
17 KiB
JavaScript
529 lines
17 KiB
JavaScript
import route from "@/router/index";
|
||
import iconimg from "@/assets/img/dianweidingweiqizi.png";
|
||
|
||
import { geom, layer, source } from "ol";
|
||
import VectorLayer from "ol/layer/Vector";
|
||
import VectorSource from "ol/source/Vector";
|
||
import Feature from "ol/Feature";
|
||
import Point from "ol/geom/Point";
|
||
import LineString from "ol/geom/LineString";
|
||
import Style from "ol/style/Style";
|
||
import Icon from "ol/style/Icon";
|
||
import Stroke from "ol/style/Stroke";
|
||
import Fill from "ol/style/Fill";
|
||
import Text from "ol/style/Text";
|
||
import CircleStyle from "ol/style/Circle";
|
||
import { fromLonLat, toLonLat } from "ol/proj";
|
||
|
||
export function allPositions(options, show, type, value) {
|
||
options.forEach((item, index) => {
|
||
let graphic = window.marsMap.getLayerById(item.id);
|
||
// console.log(item,'item')
|
||
if (!graphic) {
|
||
//扩散效果
|
||
graphic = new mars3d.layer.GeoJsonLayer({
|
||
id: item.id,
|
||
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;
|
||
graphic.setOptions({
|
||
data: item
|
||
});
|
||
}
|
||
let graphics = window.marsMap.getLayerById(item.id + 10);
|
||
if (!graphics) {
|
||
//区域
|
||
graphics = new mars3d.layer.GeoJsonLayer({
|
||
id: item.id + 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.setOptions({
|
||
data: item
|
||
});
|
||
if (type === "all") {
|
||
} 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;
|
||
graphic.setOptions({
|
||
style: {
|
||
image: deviceItem.isOnline
|
||
? require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`)
|
||
: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`)
|
||
}
|
||
});
|
||
if (deviceItem.icon === "9") {
|
||
graphic.setOptions({
|
||
position: new mars3d.LngLatPoint(
|
||
deviceItem.lon,
|
||
deviceItem.lat,
|
||
0
|
||
)
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} 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;
|
||
graphic.setOptions({
|
||
style: {
|
||
image: item.isOnline
|
||
? require(`@/assets/img/device/deviceIcon/${item.icon}.png`)
|
||
: require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`)
|
||
}
|
||
});
|
||
if (deviceItem.icon === "9") {
|
||
graphic.setOptions({
|
||
position: new mars3d.LngLatPoint(deviceItem.lon, deviceItem.lat, 0)
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
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, map) {
|
||
// 获取或创建矢量图层（对应 Mars3D 的 GraphicLayer）
|
||
let graphicLayer = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find((layer) => layer.get("id") === "uavFiex");
|
||
if (!graphicLayer) {
|
||
graphicLayer = new VectorLayer({
|
||
source: new VectorSource(),
|
||
zIndex: 10
|
||
});
|
||
graphicLayer.set("id", "uavFiex");
|
||
map.addLayer(graphicLayer);
|
||
}
|
||
|
||
let graphicLayerGJ = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find((layer) => layer.get("id") === "guiji");
|
||
if (!graphicLayerGJ) {
|
||
graphicLayerGJ = new VectorLayer({
|
||
source: new VectorSource(),
|
||
zIndex: 10
|
||
});
|
||
graphicLayerGJ.set("id", "guiji");
|
||
map.addLayer(graphicLayerGJ);
|
||
}
|
||
|
||
let graphicLayerFSGJX = map
|
||
.getLayers()
|
||
.getArray()
|
||
.find((layer) => layer.get("id") === "fsguiji");
|
||
if (!graphicLayerFSGJX) {
|
||
graphicLayerFSGJX = new VectorLayer({
|
||
source: new VectorSource(),
|
||
zIndex: 10
|
||
});
|
||
graphicLayerFSGJX.set("id", "fsguiji");
|
||
map.addLayer(graphicLayerFSGJX);
|
||
}
|
||
|
||
if (options.length === 0) {
|
||
graphicLayer.getSource().clear();
|
||
} else {
|
||
// 处理每个无人机和飞手
|
||
options.forEach((item) => {
|
||
// 处理无人机
|
||
if (item.drone_lon !== 0 || item.drone_lat !== 0) {
|
||
let graphic = graphicLayer.getSource().getFeatureById(item.BatchId);
|
||
if (!graphic) {
|
||
// 创建无人机 Feature
|
||
graphic = new Feature({
|
||
geometry: new Point(fromLonLat([item.drone_lon, item.drone_lat])),
|
||
name: "无人机"
|
||
});
|
||
graphic.setId(item.BatchId);
|
||
let imgUav = require("@/assets/img/icon_uav.png");
|
||
// 无人机样式（用图标替代 GLTF 模型）
|
||
graphic.setStyle(
|
||
new Style({
|
||
image: new Icon({
|
||
src: imgUav, // 使用导入的图标
|
||
scale: 1, // 合理缩放
|
||
color: window.mapConfig?.uaColor || "#ff0000"
|
||
})
|
||
})
|
||
);
|
||
// 创建轨迹 Feature
|
||
let track = new Feature({
|
||
geometry: new LineString([
|
||
fromLonLat([item.drone_lon, item.drone_lat])
|
||
]),
|
||
name: "无人机轨迹"
|
||
});
|
||
track.setId(item.BatchId + "_track");
|
||
|
||
graphicLayer.getSource().addFeature(graphic);
|
||
graphicLayerGJ.getSource().addFeature(track);
|
||
// graphicLayerGJ.setStyle(null);
|
||
}
|
||
|
||
// 更新无人机属性和位置
|
||
graphic.set("attr", item);
|
||
if (graphic.id_ === item.BatchId) {
|
||
const point = fromLonLat([item.drone_lon, item.drone_lat]);
|
||
graphic.getGeometry().setCoordinates(point);
|
||
|
||
// 更新轨迹
|
||
const track = graphicLayerGJ
|
||
.getSource()
|
||
.getFeatureById(item.BatchId + "_track");
|
||
track.getGeometry().appendCoordinate(point);
|
||
// graphicLayerGJ.setStyle(null);
|
||
}
|
||
|
||
// 绑定弹窗
|
||
// bindPopup(graphicLayer, graphic, map);
|
||
}
|
||
|
||
// 处理飞手
|
||
if (item.app_lon !== 0 || item.app_lat !== 0) {
|
||
let appGraphic = graphicLayer
|
||
.getSource()
|
||
.getFeatureById(item.BatchId + "_app");
|
||
if (!appGraphic) {
|
||
// 创建飞手 Feature
|
||
appGraphic = new Feature({
|
||
geometry: new Point(fromLonLat([item.app_lon, item.app_lat])),
|
||
name: "飞手",
|
||
attr: item
|
||
});
|
||
appGraphic.setId(item.BatchId + "_app");
|
||
|
||
let imgUavfs = require("@/assets/img/icon_user.png");
|
||
// 飞手样式
|
||
appGraphic.setStyle(
|
||
new Style({
|
||
image: new Icon({
|
||
src: imgUavfs, // 飞手图标
|
||
scale: 1, // 合理缩放
|
||
color: window.mapConfig?.uaColor || "#ff0000"
|
||
}),
|
||
text: new Text({
|
||
text: "飞手位置",
|
||
font: "14px 微软雅黑",
|
||
offsetY: -15,
|
||
fill: new Fill({ color: "#000000" }),
|
||
stroke: new Stroke({ color: "#ffffff", width: 2 })
|
||
})
|
||
})
|
||
);
|
||
|
||
// 创建飞手轨迹 Feature
|
||
const appTrack = new Feature({
|
||
geometry: new LineString([
|
||
fromLonLat([item.app_lon, item.app_lat])
|
||
]),
|
||
name: "飞手轨迹"
|
||
});
|
||
appTrack.setId(item.BatchId + "_app_track");
|
||
|
||
graphicLayer.getSource().addFeature(appGraphic);
|
||
graphicLayerFSGJX.getSource().addFeature(appTrack);
|
||
}
|
||
|
||
// 更新飞手位置
|
||
const pointFS = fromLonLat([item.app_lon, item.app_lat]);
|
||
appGraphic.getGeometry().setCoordinates(pointFS);
|
||
|
||
// 更新飞手轨迹
|
||
const point = fromLonLat([item.drone_lon, item.drone_lat]);
|
||
const appTrack = graphicLayerFSGJX
|
||
.getSource()
|
||
.getFeatureById(item.BatchId + "_app_track");
|
||
// const appTrackGeom = appTrack.getGeometry();
|
||
// appTrackGeom.appendCoordinate(point);
|
||
appTrack.getGeometry().setCoordinates([
|
||
fromLonLat([item.app_lon, item.app_lat]), // 飞手位置
|
||
fromLonLat([item.drone_lon, item.drone_lat]) // 无人机位置
|
||
]);
|
||
graphicLayerFSGJX.setStyle(null);
|
||
// 绑定弹窗
|
||
// bindPopup(graphicLayer, appGraphic, map);
|
||
}
|
||
});
|
||
}
|
||
}
|