建筑视图
关键引入文件：
- 第一步：引入框架地图关键文件
- 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
- 第二步：引入创建建筑视图文件
- https://mhc.ixiera.com/mhc/mchmap/buildingView/js/BuildingLayer.js
1. 初始化
const buildingManager = new BuildingLayerManager(viewer);
2. 参数说明
| 参数 | 数据类型 | 是否必填 | 说明 |
| viewer | Object | 必填 | Cesium Viewer 实例 |
3. API 方法
| 方法名 | 参数 | 返回值 | 说明 |
| showAll() | 无 | -- | 全部显示 |
| hideAll() | 无 | -- | 全部隐藏 |
| destroyAll() | 无 | -- | 全部销毁 |
| hide() | 无 | -- | 单独操作一个隐藏 |
| show() | 无 | -- | 单独操作一个显示 |
| destroy() | 无 | -- | 单独操作一个销毁 |
4. 加载建筑视图
const buildingManager = new BuildingLayerManager(viewer);
buildingManager.loadBuildings(data, enablePick);
参数说明：
viewer：Cesium Viewer 实例（必填）
data：建筑物数据（必填）
enablePick: {Boolean}是否开启点击拾取弹窗（默认true开启）
实例：
var data = [
{
id: "IMPBUILD_0713_01",
name: "凤凰岭搜救训练基地废墟建筑2",
baseElevation: 88,
aboveGroundFloors: 3,
aboveGroundHeight: 12,
undergroundFloors: 5,
undergroundHeight: 20,
coordinates: [
116.09143639328842,
40.110203050333446,
116.09167272754563,
40.11023907878694,
116.09169227471405,
40.110121458686194,
116.09146552530581,
40.110085079424806,
116.09146553663685,
40.110085078168545
],
details: {
"编码": "c-510100",
"说明": "建筑物品",
}
},
];
// 初始化 - 建筑图层管理器
const buildingManager = new BuildingLayerManager(viewer);
buildingManager.loadBuildings(data, true);
5. 隐藏建筑视图
buildingManager.hideAll();
// 隐藏指定一个建筑
const one = buildingManager.getLayerById(buildId);
if (one) one.hide();
参数说明:buildId创建建筑唯一标识；
6. 显示建筑视图
buildingManager.showAll();
// 显示指定一个建筑
const one = buildingManager.getLayerById(buildId);
if (one) one.show();
参数说明:buildId创建建筑唯一标识；
7. 销毁建筑视图
buildingManager.destroyAll();
// 销毁指定一个建筑
const one = buildingManager.getLayerById(buildId);
if (one) one.destroy();
参数说明:buildId创建建筑唯一标识；
8. 完整代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>建筑层轮廓</title>
<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="source/BuildingLayer.js"></script>
<style type="text/css">
#containerId {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}#btns {
position: fixed;
top: 10px;
left: 10px;
}#btns button {
min-width: 150px;
font-size: 12px;
padding: 5px 10px;
margin-bottom: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<div id="containerId"></div>
<div id="btns">
<button type="button" onclick="show()">显示</button>
<button type="button" onclick="hide()">隐藏</button>
<button type="button" onclick="destroy()">销毁</button>
<br />
<button type="button" onclick="showOne()">某一栋显示</button>
<button type="button" onclick="hideOne()">某一栋隐藏</button>
<button type="button" onclick="destroyOne()">某一栋销毁</button>
</div>
<script type="text/javascript">
// 初始化地图
MchCesium.init(containerId);
const viewer = MchCesium.viewer;// 初始化 - 建筑图层管理器
const buildingManager = new BuildingLayerManager(viewer);
var data = [
{
id: "IMPBUILD_0713_01",
name: "凤凰岭搜救训练基地废墟建筑2",
baseElevation: 88,
aboveGroundFloors: 3,
aboveGroundHeight: 12,
undergroundFloors: 5,
undergroundHeight: 20,
coordinates: [
116.09143639328842,
40.110203050333446,
116.09167272754563,
40.11023907878694,
116.09169227471405,
40.110121458686194,
116.09146552530581,
40.110085079424806,
116.09146553663685,
40.110085078168545
],
details: {
"编码": "c-510100",
"说明": "建筑物品",
}
}, {
id: "IMPBUILD_0709_02",
name: "凤凰岭搜救训练基地废墟建筑1",
baseElevation: 88,
aboveGroundFloors: 2,
aboveGroundHeight: 8,
undergroundFloors: 4,
undergroundHeight: 16,
coordinates: [
116.09127572192416,
40.10997067869463,
116.09143651878708,
40.11001853087031,
116.0915788159166,
40.11002725734221,
116.09172574067077,
40.11002688570205,
116.0918293540055,
40.11003881276954,
116.09184525615815,
40.10997789489414,
116.0918610352831,
40.109862647197446,
116.09167467802747,
40.10982438115012,
116.09154048924512,
40.109828103128244,
116.09148152268247,
40.10981941339155,
116.0913326362586,
40.1098022664954,
116.09133264349789,
40.10980227279614
],
details: {
"编码": "b-510100",
"说明": "建筑物品",
}
}, {
id: "IMPBUILD_0709_01",
name: "凤凰岭搜救训练基地长主建筑",
baseElevation: 88,
aboveGroundFloors: 4,
aboveGroundHeight: 16,
undergroundFloors: 2,
undergroundHeight: 8,
coordinates: [
116.08990780847036,
40.110862078479514,
116.09070549316247,
40.110957459533516,
116.09098301173319,
40.111326773251015,
116.0915274940228,
40.11151056952815,
116.09206728751874,
40.11190899054948,
116.09274554322535,
40.11203127380578,
116.09282949356908,
40.11173662577172,
116.09233265874347,
40.11161648783951,
116.0920855125255,
40.11155675579982,
116.09194312795786,
40.111366250087265,
116.09196185170497,
40.111213355878164,
116.09198998227677,
40.11106809248356,
116.09190498183256,
40.110959183204066,
116.09178254944018,
40.11099521314962,
116.09167918898017,
40.11084320719938,
116.09145423199139,
40.1107420828048,
116.09122990324853,
40.11068444487222,
116.09109041098104,
40.110583920904936,
116.09095058476615,
40.11059112798261,
116.09073696741116,
40.11054822406473,
116.09041281664676,
40.11049836375282,
116.08999247540858,
40.11042075572906,
116.08999241174298,
40.11042074782448
],
details: {
"编码": "a-510100",
"说明": "建筑物品",
}
},
];
// 加载原始数据，第二个参数：是否开启点击弹窗
buildingManager.loadBuildings(data, true);
// 定位视角到所有建筑
if (viewer.entities.values.length > 0) {
viewer.zoomTo(viewer.entities);
}// 全部显示
function show() {
buildingManager.showAll();
}
// 全部隐藏
function hide() {
buildingManager.hideAll();
}
// 全部销毁
function destroy() {
buildingManager.destroyAll();
}
// 单独操作某一栋
function hideOne() {
const one = buildingManager.getLayerById("IMPBUILD_0709_01");
if (one) one.hide();
}function showOne() {
const one = buildingManager.getLayerById("IMPBUILD_0709_01");
if (one) one.show();
}function destroyOne() {
const one = buildingManager.getLayerById("IMPBUILD_0709_01");
if (one) one.destroy();
}
// buildingManager.setAllPickEnable(false); // 全局关闭点击
</script>
</body>
</html>
6. 效果展示
Demo地址：https://mhc.ixiera.com/mhc/mchmap/buildingView/index.html
返回顶部
热线电话
微信
扫一扫