加载GLB模型
关键引入文件：
第一步：引入框架地图关键文件
https://mhc.ixiera.com/mhc/main_min.js
https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
https://mhc.ixiera.com/mhc/Cesium3DTile.js
第二步：引入加载GLB模型API文件
js/renderGLBmodel.min.js
- 初始化
const glbModel = new GLBModel(viewer);
实例代码：
const glbModel = new GLBModel(viewer);
glbModel.renderGLB(url, lng, lat, alt, option);
- 参数说明
viewer：创建的view实例。
url：文件路径。
lng 基础点 - 经度。
lat 基础点 - 维度。
alt 基础点 - 海拔高度。
option自定义配置项（非必填）
options.scale:{Number} 模型缩放比例，默认值10；
options.fClick: {Boolean} 是否开启（左）点击事件(返回拾取信息) - 默认触发显示信息窗；options.fCallback 左点击自定义回调：不传则自动使用默认弹窗显示；
- show显示/hide隐藏
glbModel.show();
glbModel.hide();
- destroy销毁
glbModel.destroy();
- toggle切换显示状态
glbModel.toggle();
- upDataGLBPosition更新GLB模型位置
实例：
glbModel.upDataGLBPosition( lng, lat, alt);
- upDataGLBUrl更新GLB模型文件
实例：
glbModel.upDataGLBUrl(newUrl);
- fCallback自定义左点击事件回调
要求：初始化时options.fClick=true开启（左）点击事件才起作用；
实例：
// 开启左键点击事件 - 自定义函数：接收返回的信息，自己处理
glbModel.option.fCallback = (info) => {
console.log("自定义回调！", info);
alert(info.nodeName+" ==== "+info.nodePath);
// 这里可以写你自己的弹窗/逻辑
};
- 完整代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载GLB模型</title>
<script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
<script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
<script src="js/renderGLBmodel.min.js"></script>
<style type="text/css">
body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
.cesium-viewer,
.cesium-viewer-cesiumWidgetContainer,
.cesium-widget,
.cesium-widget canvas{width: 100%;height: 100%;}
.btns-row{position: absolute; top: 15px;left: 15px;}
.btns-row button{padding: 5px 15px;border-radius: 2px;margin-right: 15px;font-size: 12px;}
</style>
</head>
<body>
<div id="container" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
<div class="btns-row">
<button onclick="test()">加载模型</button>
<button onclick="toPosition()">更新位置</button>
<button onclick="toGLBUrl()">更新GLB模型</button>
<button onclick="toAuto()">自定义弹窗</button>
<button onclick="toHide()">隐藏</button>
<button onclick="toShow()">显示</button>
<button onclick="toToggle()">显隐切换</button>
<button onclick="toDestroy()">销毁</button>
</div><script type="text/javascript">
const view3D = MchCesium.init('container', true);
const viewer = MchCesium.viewer;
// 初始化
const glbModel = new GLBModel(viewer);
function test(){
const lng = 116.39748;
const lat = 39.90882;
const alt = 250;
const url = "source/moxin_draco.glb";
var option = {}
glbModel.renderGLB(url, lng, lat, alt, option);
}
// 隐藏 - GLB模型
function toHide(){
if(glbModel) glbModel.hide()
}
// 显示 - GLB模型
function toShow(){
if(glbModel) glbModel.show()
}
// 显隐切换 - GLB模型
function toToggle(){
if(glbModel) glbModel.toggle()
}
// 销毁 - GLB模型
function toDestroy(){
if(glbModel) glbModel.destroy()
}
// 更新 - GLB模型 - 位置
function toPosition(){
if(glbModel) glbModel.upDataGLBPosition( glbModel.lng+0.02, glbModel.lat+0.005, glbModel.alt)
}
// 更新 - GLB模型 - 文件
function toGLBUrl(){
if(glbModel) glbModel.upDataGLBUrl('source/CesiumDrone.glb');
}
// 自定义 - 弹窗
function toAuto(){
if(glbModel){
// 开启左键点击事件 - 自定义函数：接收返回的信息，自己处理
glbModel.option.fCallback = (info) => {
console.log("自定义回调！", info);
alert(info.nodeName+" ==== "+info.nodePath);
// 这里可以写你自己的弹窗/逻辑
};
}
}
</script>
</body>
</html>
- 效果展示
Demo地址：
https://mhc.ixiera.com/mhc/mchmap/bimModelGLB/index.html
返回顶部
热线电话
微信
扫一扫