利用Cesium加载 M3D BIM 模型

M3D BIM加载

最新推荐文章于 2023-07-17 15:38:39 发布

原创最新推荐文章于 2023-07-17 15:38:39 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#gis #javascript #3d

GIS开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在三维场景中加载M3D的BIM模型数据，并对接IGServer发布的三维地图服务。通过创建布局、构造三维场景控件及加载M3D图层，实现了三维模型的展示。

本例展示如何在在三维场景中加载 M3D 的 BIM 模型数据，对接 IGServer 发布的三维地图服务。

实现步骤

1. 引用开发库：
本示例引用 local 本地【include-cesium-local.js】开发库，完成此步骤后才可调用三维 WebGL 的功能；

2. 创建布局：
创建id='GlobeView'的 div 作为三维视图的容器，并设置其样式；

3. 构造三维场景控件：
实例化Cesium.WebSceneControl对象，完成此步骤后可在三维场景中加载三维球控件；

//构造三维视图对象（视图容器div的id，三维视图设置参数）
 var webGlobe = new Cesium.WebSceneControl('GlobeView', {})

4. 加载数据:
加载数据：构造CesiumZondy.Layer.M3DLayerM3D 图层管理对象，调用append()方法，传入 M3D 缓存三维地图服务的 URL 地址即可加载浏览数据，同时可传入相关配置参数。

//构造M3D模型层管理对象（视图）var m3dLayer = new CesiumZondy.Layer.M3DLayer({
  viewer: webGlobe.viewer,})//加载M3D地图文档（服务地址，配置参数）var bimLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/school', {
  //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量
  maximumScreenSpaceError: 8,})

关键接口

1.【三维场景控件类】Cesium.WebSceneControl(elementId, options)

参数名	类型	说明
elementId	Element \| String	放置视图的 div 的 id
options	Object	（可选）附加属性

· options属性主要参数

参数名	类型	默认值	说明
viewerMode	String	‘3D’	（可选）初始视图模式默认为三维球视图 '2D’表示二维视图 ‘COLUMBUS_VIEW’ 表示三维平面视图
showInfo	Boolean	false	（可选）是否显示默认的属性信息框
animation	Boolean	true	（可选）默认动画控制不显示
baseLayerPicker	Boolean	true	（可选）是否创建图层控制显示小组件
fullscreenButton	Boolean	true	（可选）是否创建全屏控制按钮
vrButton	Boolean	false	（可选）是否创建 VR 按钮

2.【M3D 模型层管理类】：添加 M3D 地图文档服务

参数名	类型	说明
url	String	文档服务地址
options	Object	附加属性

· options属性主要参数

参数名	类型	默认值	说明
autoReset	Boolean	true	（可选）是否自动定位
synchronous	Boolean	true	（可选）是否异步请求
loaded	Boolean	function	（可选）回调函数
proxy	DefaultProxy	defaultProxy	（可选）代理
showBoundingVolume	Boolean	false	（可选）是否显示包围盒
maximumScreenSpaceError	Number	16	（可选）用于控制模型显示细节，值较大将会渲染更少的贴图，进而可以提高性能，而较低的值将提高视觉质量

代码块：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>M3D-BIM模型数据展示</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义M3D图层对象
        var bimLayerArr;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造M3D模型层管理对象（视图）
            var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                viewer: webGlobe.viewer
            });
            //加载M3D地图文档（服务地址，配置参数）
            var {
                protocol,
                ip,
                port
            } = window.webclient;
            bimLayerArr = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/school`, {
                //模型细节显示控制参数：较大值可提高渲染性能，较低值可提高视觉质量
                maximumScreenSpaceError: 8
            });

            //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
            sceneManager.flyToEx(112.9991, 33.0015, {
                height: 19,
                heading: 140,
                pitch: 0,
                roll: 0
            });
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'></div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>