修改大屏BIM管理客户端渲染
parent
a2bc510635
commit
fca1934db0
|
|
@ -1,3 +1,227 @@
|
|||
|
||||
function initEngine(apiID, elId, bimCfg, cb) {
|
||||
if (bimCfg.clientApi) {
|
||||
initAPIEngine(apiID, elId, bimCfg, cb)
|
||||
} else {
|
||||
initSAPIEngine(apiID, elId, bimCfg, cb)
|
||||
}
|
||||
}
|
||||
|
||||
function initAPIEngine(apiID, elId, bimCfg, cb) {
|
||||
let opt = {
|
||||
container: elId, //[必须]容器id
|
||||
showfps: false, //[可选]显示fps
|
||||
openearth: true, //[可选]开启gis场景
|
||||
// imageryprovider: "tianditu_image", //[可选]gis底图
|
||||
openterrain: false, //[可选]开启gis地形
|
||||
maxspaceerror: 5000, //[可选]模型可视距离; 建议设置：常规BIM时3000或更大、BIM启用LOD时100~1000、倾斜摄影,点云数据时0.1~0.5
|
||||
loading: false, //[可选]gis模式加载动画
|
||||
bgcolor: "#87CEFA", //[可选]bim模式场景背景色
|
||||
selectedcolor: "#FFFF00", //[可选]选中构件颜色
|
||||
throughwall: true, //[可选]相机是否穿墙
|
||||
sitepath: "../Cesium/",//[可选]设置天空盒路径，指向Cesium文件夹
|
||||
editmode: true, //[可选]是否开启编辑模式
|
||||
searchbox: true, //[可选]gis模型是否显示搜索框
|
||||
mapbox: true, //[可选]gis模型是否显示地图选择
|
||||
isRequestWebgl2: true, //[可选]是否使用webgl2进行渲染
|
||||
colorBlendMode: 1, //0:HIGHLIGHT 1:REPLACE 2:MIX ，构件选中后的着色模式
|
||||
secretkey: window.config.secretKey,
|
||||
language: "zh-CN", // 语言国际化 中文简体(zh-CN)、中文繁体(zh-TW)、英文(en), 默认中文简体
|
||||
targetFrameRate: 20, //目标渲染帧率 默认20
|
||||
};
|
||||
let api = new API(opt);
|
||||
|
||||
window[apiID] = api
|
||||
console.log("初始化成功");
|
||||
doChangeGis(bimCfg, api)
|
||||
|
||||
cb && cb();
|
||||
|
||||
}
|
||||
|
||||
function doChangeGis(bimCfg, api) {
|
||||
if (bimCfg.showGis) {
|
||||
if (bimCfg.clientApi) {
|
||||
api.Public.setGisState(true);
|
||||
api.viewer.terrainProvider = Cesium.createWorldTerrain({
|
||||
requestVertexNormals: true, //开启地形光照
|
||||
requestWaterMask: true, // 开启水面波纹
|
||||
})
|
||||
api.viewer.camera.flyTo({
|
||||
destination: Cesium.Cartesian3.fromDegrees(108.93934, 34.25777, 4000)
|
||||
});
|
||||
} else {
|
||||
api.Public.setGisState(true);
|
||||
api.Public.setTerrainState(true, window.config.terrainStateUrl, true)
|
||||
api.Public.setGisState(true);
|
||||
}
|
||||
} else {
|
||||
let color = bimCfg.background || "rgba(135 ,206 ,250,1)"
|
||||
api.Public.setGisState(false, color);
|
||||
api.Public.setSkyBoxState(0)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initSAPIEngine(apiID, elId, bimCfg, cb) {
|
||||
let api = new SAPI(
|
||||
{
|
||||
serverIP: window.config.serverIP, //服务ip地址
|
||||
port: window.config.port, //HTTP端口
|
||||
useHttps: window.config.useHttps, //使用Https
|
||||
container: elId, //[必须]容器id
|
||||
secretKey: window.config.secretKey,
|
||||
openEarth: window.config.openEarth, //[可选]开启Gis场景
|
||||
bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
|
||||
tintColor: window.config.tintColor, //[可选]osgb单体化颜色
|
||||
sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
|
||||
cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
|
||||
},
|
||||
() => {
|
||||
console.log("初始化成功");
|
||||
let mapOptions = {
|
||||
imgs: {
|
||||
// 六面图片
|
||||
top: "/cdn/bim/sapi/img/top.png",
|
||||
bottom: "/cdn/bim/sapi/img/under.png",
|
||||
east: "/cdn/bim/sapi/img/east.png",
|
||||
south: "/cdn/bim/sapi/img/south.png",
|
||||
west: "/cdn/bim/sapi/img/west.png",
|
||||
north: "/cdn/bim/sapi/img/north.png",
|
||||
},
|
||||
offset: {
|
||||
// 屏幕坐标偏移
|
||||
corner: GLENavigationCube.RightTop,
|
||||
x: 25,
|
||||
y: 20,
|
||||
},
|
||||
cube: {
|
||||
hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
|
||||
size: 32, // 导航立方尺寸
|
||||
hotPointSize: 7, // 导航立方棱角热点区域尺寸
|
||||
cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
|
||||
cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
|
||||
cubeFillColor: "#374769cc", // cube 各个面填充颜色
|
||||
},
|
||||
zoomRatios: 1, // 缩放倍率
|
||||
show: true, // 是否显示
|
||||
showAxes: true, // 是否显示XYZ轴线
|
||||
};
|
||||
window[apiID] = api
|
||||
api.Plugin.initNavCube(mapOptions);
|
||||
doChangeGis(bimCfg, api)
|
||||
cb && cb();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function addModelList(api, bimCfg, modelList, cb) {
|
||||
let allHideParts = [];
|
||||
let cnt = 0;
|
||||
if (modelList && modelList.length > 0) {
|
||||
modelList.forEach(it => {
|
||||
addModel(api, bimCfg, it.modelId, (hideParts) => {
|
||||
allHideParts.push(...hideParts);
|
||||
cnt++;
|
||||
if (cnt == modelList.length) {
|
||||
cb && cb(allHideParts);
|
||||
}
|
||||
}, modelList);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function addModel(api, bimCfg, modelId, cb, models) {
|
||||
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
||||
let direction = null;
|
||||
let modelInfo = null;
|
||||
if (models) {
|
||||
modelInfo = models.find(m => m.modelId == modelId);
|
||||
}
|
||||
if (bimCfg.clientApi) {
|
||||
url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
|
||||
if (modelInfo) {
|
||||
direction = modelInfo.bimCfg.direction;
|
||||
}
|
||||
}
|
||||
console.log("加载模型：" + url);
|
||||
api.Model.add(
|
||||
url,
|
||||
modelId,
|
||||
() => {
|
||||
console.log("加载模型成功2");
|
||||
},
|
||||
() => {
|
||||
console.log("加载模型成功");
|
||||
let hideParts = [];
|
||||
if (modelInfo) {
|
||||
let cfg = modelInfo.bimCfg;
|
||||
|
||||
let x = cfg?.x || 0;
|
||||
let y = cfg?.y || 0;
|
||||
let z = cfg?.z || 0;
|
||||
let rotateZ = cfg?.rotateZ || 0;
|
||||
let rotateX = cfg?.rotateX || 0;
|
||||
let rotateY = cfg?.rotateY || 0;
|
||||
if (x * 1 + y * 1 + z * 1 != 0) {
|
||||
api.Model.moveToPosition([x*1, y*1, z*1], 0, modelId)
|
||||
}
|
||||
if (rotateZ * 1 != 0) {
|
||||
if (this.me.bimCfg.clientApi) {
|
||||
|
||||
} else {
|
||||
api.Model.rotate(rotateX, rotateY, rotateZ, modelId)
|
||||
}
|
||||
}
|
||||
if (cfg && cfg.hideParts) {
|
||||
cfg.hideParts.forEach(it => {
|
||||
hideParts.push(it);
|
||||
})
|
||||
}
|
||||
}
|
||||
cb && cb(hideParts);
|
||||
|
||||
}, direction);
|
||||
}
|
||||
|
||||
function setDefaultViewPoint(api, bimCfg, pt) {
|
||||
if (pt) {
|
||||
if (bimCfg.clientApi) {
|
||||
if (bimCfg.clientApi) {
|
||||
if (pt["position"] && pt["heading"] && pt["pitch"]) {
|
||||
api.Camera.SetCamera(pt.position, pt.heading, pt.pitch)
|
||||
}
|
||||
} else {
|
||||
if (pt["world"]) {
|
||||
api.Camera.setViewPort(pt);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
api.Model.location(api.m_model.keys().toArray()[0])
|
||||
}
|
||||
}
|
||||
|
||||
function hideParts(api, hideParts) {
|
||||
if (hideParts && hideParts.length > 0) {
|
||||
let hideCnt = 0;
|
||||
let hideFn = () => {
|
||||
hideCnt++;
|
||||
if (hideCnt > 30) {
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
let featureIds = (hideParts || []).map(it => it.featureId);
|
||||
if (featureIds.length > 0) {
|
||||
api.Feature.setVisible(featureIds.join("#"), false);
|
||||
}
|
||||
hideFn();
|
||||
}, 100)
|
||||
};
|
||||
hideFn();
|
||||
}
|
||||
}
|
||||
|
||||
function initBimCfg(that) {
|
||||
if (!that.bimCfg) {
|
||||
that.bimCfg = {}
|
||||
|
|
@ -9,6 +233,7 @@ function initBimCfg(that) {
|
|||
that.bimCfg.background = config.background || ''
|
||||
that.bimCfg.showGis = config.showGis || false
|
||||
that.bimCfg.clientApi = config.clientApi || false
|
||||
that.isClient=that.bimCfg.clientApi;
|
||||
}
|
||||
|
||||
function initLoadModel(that, api) {
|
||||
|
|
@ -84,12 +309,12 @@ function resetScene(that, api) {
|
|||
that.selectedRoam = null;
|
||||
api.Camera.stopImmersiveRoam();
|
||||
api.Model.location(api.m_model.keys().toArray()[0]);
|
||||
if (!that.isClient()) {
|
||||
if (!that.bimCfg.clientApi) {
|
||||
api.Plugin.deleteMiniMap();
|
||||
}
|
||||
if (that.viewPoint) {
|
||||
if (that.viewPoint.world) {
|
||||
if (!that.isClient()) {
|
||||
if (!that.bimCfg.clientApi) {
|
||||
api.Camera.setViewPort(that.viewPoint);
|
||||
}
|
||||
}
|
||||
|
|
@ -101,5 +326,11 @@ export default {
|
|||
initLoadModel,
|
||||
initModelPosition,
|
||||
initHideParts,
|
||||
resetScene
|
||||
resetScene,
|
||||
initEngine,
|
||||
addModel,
|
||||
setDefaultViewPoint,
|
||||
hideParts,
|
||||
addModelList
|
||||
|
||||
}
|
||||
|
|
@ -390,6 +390,7 @@ export default {
|
|||
menuShowCount: 0,
|
||||
modelLoadSuccess: false, //模型加载成功
|
||||
mode: "model", //显示模式 model-整体模型 plan-形象进度
|
||||
isClient: false,
|
||||
};
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
|
@ -426,9 +427,6 @@ export default {
|
|||
this.updateButtonShow();
|
||||
},
|
||||
methods: {
|
||||
isClient() {
|
||||
return this.bimCfg.clientApi;
|
||||
},
|
||||
updateButtonShow() {
|
||||
let objs = this.$root.showMenus || [];
|
||||
this.menuShow.video = objs.find((it) => it.component == "video") ? true : false;
|
||||
|
|
@ -738,6 +736,41 @@ export default {
|
|||
});
|
||||
this.addLabels.push(item.elId);
|
||||
},
|
||||
AddClientLable(item) {
|
||||
let img = "videoMonitor";
|
||||
if (this.activeMenu == 1) {
|
||||
img = "videoMonitor";
|
||||
} else if (this.activeMenu == 2) {
|
||||
img = "pitMonitor";
|
||||
} else if (this.activeMenu == 3) {
|
||||
img = "towerMonitor";
|
||||
} else if (this.activeMenu == 4) {
|
||||
img = "power";
|
||||
}
|
||||
let html = `
|
||||
<div class='tag-box-client' style='width:230px;height:228px'>
|
||||
<img class='tag-img' src='/cdn/bim/sapi/images/2.png' alt=''>
|
||||
<img src="/cdn/bim/sapi/images/red.svg" class='tag-svg'>
|
||||
<div class='tag-box'>
|
||||
|
||||
<span class='tag-txt' style=''>
|
||||
<img src='/cdn/bim/sapi/images/${img}.png' style="width:20px;height:20px;">
|
||||
${item.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>`;
|
||||
window.bimMgrApi.Label.addCustomHtml({
|
||||
axisType: 1,
|
||||
attachmentPoint: 2,
|
||||
displayRange: [0, 1000],
|
||||
maxDistance: 1000,
|
||||
html: html,
|
||||
id: item.elId,
|
||||
position: item.position
|
||||
});
|
||||
|
||||
this.addLabels.push(item.elId);
|
||||
},
|
||||
deviceClick(item, opt) {
|
||||
if (item.deviceType == 1) {
|
||||
let obj = this.videoData.find((d) => d.id == item.deviceId);
|
||||
|
|
@ -749,7 +782,12 @@ export default {
|
|||
addDeviceLabel() {
|
||||
this.showDevices.forEach((d) => {
|
||||
if (d.position && d.position.length > 0) {
|
||||
this.AddLable(d);
|
||||
if (this.isClient) {
|
||||
this.AddClientLable(d)
|
||||
} else {
|
||||
this.AddLable(d);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -774,11 +812,7 @@ export default {
|
|||
this.elId++;
|
||||
this.activeMenu = 0;
|
||||
setTimeout(() => {
|
||||
if (this.isClient()) {
|
||||
apiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel)
|
||||
} else {
|
||||
sapiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel)
|
||||
}
|
||||
bimTools.initEngine("bimMgrApi", "bimManageContainer", this.bimCfg, this.initLoadModel);
|
||||
}, 10);
|
||||
},
|
||||
initLoadModel() {
|
||||
|
|
@ -814,53 +848,65 @@ export default {
|
|||
if (this.models.length == 0) {
|
||||
this.$message.error("暂无模型，请先关联模型");
|
||||
} else {
|
||||
this.models.forEach((item) => {
|
||||
this.addModel(item.lightweightName);
|
||||
bimTools.addModelList(window.bimMgrApi, this.bimCfg, this.models, (hideParts) => {
|
||||
console.log(":--->", hideParts); debugger
|
||||
this.loadDevicePosition();
|
||||
setTimeout(() => {
|
||||
bimTools.setDefaultViewPoint(window.bimMgrApi, this.bimCfg, this.viewPoint)
|
||||
bimTools.hideParts(window.bimMgrApi, hideParts);
|
||||
this.modelLoadSuccess = true;
|
||||
this.resetScene();
|
||||
}, 1000);
|
||||
});
|
||||
bimTools.initLoadModel(this, bimMgrApi)
|
||||
|
||||
// this.models.forEach((item) => {
|
||||
// this.addModel(item.lightweightName);
|
||||
// });
|
||||
//bimTools.initLoadModel(this, bimMgrApi)
|
||||
}
|
||||
});
|
||||
},
|
||||
addModel(modelId, cb) {
|
||||
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
||||
let direction = null;
|
||||
let modelInfo = this.models.find(m => m.modelId == modelId);
|
||||
if (this.isClient()) {
|
||||
url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
|
||||
if (modelInfo) {
|
||||
direction = modelInfo.bimCfg.direction;
|
||||
}
|
||||
}
|
||||
let api = bimMgrApi;
|
||||
console.log(modelId, url);
|
||||
api.Model.add(
|
||||
url,
|
||||
modelId,
|
||||
() => { },
|
||||
() => {
|
||||
cb && cb();
|
||||
console.log("加载模型成功");
|
||||
this.loadDevicePosition();
|
||||
|
||||
// addModel(modelId, cb) {
|
||||
// let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
|
||||
// let direction = null;
|
||||
// let modelInfo = this.models.find(m => m.modelId == modelId);
|
||||
// if (this.isClient) {
|
||||
// url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
|
||||
// if (modelInfo) {
|
||||
// direction = modelInfo.bimCfg.direction;
|
||||
// }
|
||||
// }
|
||||
// let api = bimMgrApi;
|
||||
// console.log(modelId, url);
|
||||
// api.Model.add(
|
||||
// url,
|
||||
// modelId,
|
||||
// () => { },
|
||||
// () => {
|
||||
// cb && cb();
|
||||
// console.log("加载模型成功");
|
||||
// this.loadDevicePosition();
|
||||
|
||||
setTimeout(() => {
|
||||
// setTimeout(() => {
|
||||
|
||||
if (this.isClient) {
|
||||
} else {
|
||||
if (this.viewPoint) {
|
||||
api.Camera.setViewPort(this.viewPoint);
|
||||
} else {
|
||||
api.Camera.getViewPort((p) => {
|
||||
this.viewPoint = p;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.modelLoadSuccess = true;
|
||||
api.Model.location(modelId)
|
||||
}, 1000);
|
||||
}, direction
|
||||
);
|
||||
},
|
||||
// if (this.isClient) {
|
||||
// } else {
|
||||
// if (this.viewPoint) {
|
||||
// api.Camera.setViewPort(this.viewPoint);
|
||||
// } else {
|
||||
// api.Camera.getViewPort((p) => {
|
||||
// this.viewPoint = p;
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// this.modelLoadSuccess = true;
|
||||
// api.Model.location(modelId)
|
||||
// }, 1000);
|
||||
// }, direction
|
||||
// );
|
||||
// },
|
||||
changeMode(mode) {
|
||||
if (!this.modelLoadSuccess) {
|
||||
this.$message.error("模型加载中，请稍后");
|
||||
|
|
@ -934,7 +980,7 @@ export default {
|
|||
}
|
||||
},
|
||||
resetScene() {
|
||||
bimTools.resetScene(this,bimMgrApi)
|
||||
bimTools.resetScene(this, bimMgrApi)
|
||||
},
|
||||
loadDeviceData() {
|
||||
if (this.loadDevDatatimeOut) {
|
||||
|
|
@ -1102,6 +1148,33 @@ export default {
|
|||
|
||||
#bimManageContainer {
|
||||
height: 100%;
|
||||
.tag-box {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-svg {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
bottom: -17px;
|
||||
left: 50%;
|
||||
margin-left: -19px;
|
||||
|
||||
}
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tag-txt {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue