Mars3D统一机制
·
后端坐标
const graphic = new mars3d.graphic.BillboardEntity({
position: {
type: "ajax",
url: "http://studio-api.mars3d.cn/api/gap/open/random/point",
dataColumn: "data", // 接口返回数据中,对应的属性数据所在的读取字段名称,支持多级(用.分割);如果数据直接返回时可以不配置。
latColumn: "lat",
lngColumn: "lng",
altColumn: "alt",
time: 4 // 无配置时仅取值一次,有值时间隔time秒后不断取
},
style: {
image: "https://data.mars3d.cn/img/marker/point-red.png",
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
attr: { remark: "点状数据position" }
})
graphicLayer.addGraphic(graphic)

添加动态数据
<script setup>
const initWs = () => {
const ws = new WebSocket("");
ws.onopen = () => {
sendMsg(JSON.stringify({
deviceId: 'ship_001'
}));
sendMsg(JSON.stringify({
deviceId: 'ship_002'
}));
sendMsg(JSON.stringify({
deviceId: 'missile_001'
}));
sendMsg(JSON.stringify({
deviceId: 'missile_002'
}))
};
ws.onmessage = (event) => {
try {
const res = JSON.parse(event.data);
processWsData(res);
} catch(err) {
console.log("ws解析错误", err)
}
};
ws.onclose = () => {
setTimout(()=>initWs, 3000)
}
}
const sendMsg = (value) => {
if(ws.value && ws.value.readyState === WebSocket.OPEN) {
ws.value.send(value)
} else {
console.log("发送失败", err)
}
}
const processWsData = (res) => {
if(!res || !res.type || !res.data) return;
const entityId = res.data.deviceId;
const position = [
res.data.longitude,
res.data.latitude,
res.data.altitude
];
switch(res.type) {
case "SHIP":
addShipToMap(res.data, entityId, position);
break;
case "MISSILE":
addMissileToMap(res.data, entityId, position);
break;
default:
console.log(data.type)
}
}
const addShipToMap = (res, entityId, position) => {
const graphic = mapModelRef.value.graphicLayer.getGraphiceById(entityId);
if(!graphic) {
mapModelRef.value.addShipEntity(res, entityId, position);
} else {
graphic.addDynamicPosition(position, 0)
}
}
</script>
创建标签对象
const addShipEntity = (res, entityId, position) => {
graphic.value = new mars3d.graphic.DivGif({
id: entityId,
position: position,
attr: res
});
graphicLayer.value.addGraphic(graphic.value)
}
更多推荐

所有评论(0)