加载3DTiles
1.构造方法：
const manager = new MchCesium.TilesetManager(viewer);
2.参数说明：
viewer：Cesium创建的view实例。
3.load(id, url, options) 加载3DTiles
manager.load(id, url,options);
参数说明：
id{string}实例唯一标识
url{string}tileset.json路径
options{object} 配置项（其中ssError：用于设置驱动细节细化级别的最大屏幕空间误差）
应用实例：
// 方式1： 加载3DTiles（不设置基准点）
manager.load("model1", url1, { ssError: 1 }).then(() => {
// 定位到模型
manager.flyTo("model1");
});
// 方式2：加载3DTiles（设置基准点）
manager.load("model2", url2).then(() => {
// 设置自定义基准点（经度116.39093087，纬度39.91218836，基准高度50）
manager.setReferenceCoordinates("model2", [116.39093087, 39.91218836, 50]);
// 定位到基准点位置
manager.flyTo("model2");
});
4.setVisible(id, visible) 设置显示/隐藏
隐藏：manager.setVisible(id, false);
显示：manager.setVisible(id, true);
参数说明：
id{string}实例唯一标识
visible{Boolean}显示状态:true显示，false隐藏
5.destroy(id) 销毁
manager.destroy(id);
参数说明：
id{string}实例唯一标识
6.flyTo(id, viewParams = {})定位到tileset
manager.flyTo(id, viewParams);
参数说明：
id{string}实例唯一标识
viewParams {object} 选填，视角参数(longitude, latitude, height)；
7.changeHeight(id, height)调整高度
manager.changeHeight(id, height);
参数说明：
id{string}实例唯一标识
height{Number} 高度
8.setReferenceCoordinates(id, position)设置自定义基准点
manager.setReferenceCoordinates(id, position);
参数说明：
Id {string} - 实例唯一标识
position {Array|null} - 基准点坐标[经度，纬度，高度]；传null则清除基准点（恢复原始位置）
9.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="cesium开发加载3DTiles" />
<meta name="keywords" content="microbee-http,软件开发框架,cesium,3DTiles" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://mhc.ixiera.com/mhc/main.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="../mhc/Cesium3DTile.js"></script>
<title>加载3DTiles-cesium</title>
<style type="text/css">
.btnsBox {
position: fixed;
top: 20px;
left: 20px;
width: 70%;
height: 30px;
}
.btnsBox button {
width: 200px;
margin-bottom: 15px;
background-color: #fff;
border-radius: 2px;
color: #333;
line-height: 30px;
margin-right: 15px;
font-size: 12px;
padding: 0 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="btnsBox">
<button onclick="renderModel2()">加载模型2(设置基准点)</button>
<button onclick="setHeightModel2()">模型2调整高度</button>
<button onclick="fousModel2()">聚焦模型2</button>
<button onclick="destroyModel2()">销毁模型2</button>
<br>
<button onclick="renderModel1()">加载模型1(不设置基准点)</button>
<button onclick="setHeightModel1()">模型1调整高度</button>
<button onclick="fousModel1()">聚焦模型1</button>
<button onclick="destroyModel1()">销毁模型1</button>
<br>
<button onclick="setoriginal()">模型2清除基准点恢复原始位置</button>
<button onclick="hide()">隐藏所有模型</button>
<button onclick="show()">显示所有模型</button>
</div>
<script>
const view3D = MchCesium.init('cesiumContainer', true);
var url1 = 'https://mhc.ixiera.com/mhc/3dtiles-master/tileset.json';
var url2 = 'https://mhc.ixiera.com/plugins/final_3dtiles/tileset.json';
// 初始化管理器
const manager = new MchCesium.TilesetManager(MchCesium.viewer);
function renderModel1(){
// 加载3DTiles（不设置基准点）
manager.load("model1", url1, { ssError: 1 }).then(() => {
// 定位到模型
manager.flyTo("model1");
});
}
function renderModel2(){
// 加载3DTiles（设置基准点）
manager.load("model2", url2).then(() => {
// 设置自定义基准点（经度116.39093087，纬度39.91218836，基准高度0）
manager.setReferenceCoordinates("model2", [116.39093087, 39.91218836, 50]);
// 定位到基准点位置
manager.flyTo("model2");
});
}
function fousModel1(){
// 定位到模型
manager.flyTo("model1");
}
function fousModel2(){
// 定位到模型
manager.flyTo("model2");
}
function hide(){
manager.setVisible('model1', false);
manager.setVisible('model2', false);
}
function show(){
manager.setVisible('model1', true);
manager.setVisible('model2', true);
}
function setHeightModel1(){
// 直接调整高度（基于模型原始位置）
manager.changeHeight("model1", 80); // 原始位置高度调整为80米
}
function setHeightModel2(){
// 调整高度（基于该基准点，高度改为70米）
manager.changeHeight("model2", 100);
}
function setoriginal(){
// 可选：清除基准点，恢复原始位置
manager.setReferenceCoordinates("model2", null);
manager.flyTo("model2");
}
function destroyModel1(){
manager.destroy('model1');
}
function destroyModel2(){
manager.destroy('model2');
}
// 初始化 - 默认聚焦点 - 相机定位
MchCesium.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(116.39093087, 39.91218836, 500),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-80), // 降低俯视角度，看清模型自身朝向
roll: 0
},
duration: 2,
complete: () => {
// 聚焦点 - 便于比较设置基准点位置
const entity = MchCesium.viewer.entities.add({
name: "点",
show: true,
position: Cesium.Cartesian3.fromDegrees(116.39093087, 39.91218836, 0),
point: {
color: Cesium.Color.YELLOW, // 颜色
pixelSize: 10, // 大小
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 无论如何缩放，标记点不被地形遮挡
zIndex:999999,
}
});
}
});
</script>
</body>
</html>
10.效果展示：
Demo地址：
返回顶部
热线电话
微信
扫一扫