基于3D-WebGL技术的城市空间信息模型管理系统

三维规划辅助审批系统自上线运行以来，辅助规划局建设项目审批1000余项，实现了规划审批从二维到三维的转变，广泛应用于规划编制业务、规划审批业务、证后抽查业务。但是，随着技术的不断发展，目前的三维规划辅助审批系统亟需优化完善，从系统架构、承载数据资源种类和数量、功能优化、效率提升等各方面亟需全面改造，尤其是成都五城区420平方公里实景三维数据的承载和展示效果，对三维平台改造提出了迫切需求。

　　为了更好的服务于城市规划编制、审批、证后抽查监督等工作，同时为城市管理和服务提供数据和技术支撑，中心拟开展城市空间信息模型管理系统(一期)”项目建设。利用超图三维平台，于2019年完成了城市空间信息模型管理系统的设计与开发工作。系统着眼于“看、查、用、管”四个方面，通过系统做到对成都市中心五城区三维实景数据进行统筹管理，实现城市空间信息模型管理系统与成都市公共平台之间房屋面、POI点、地铁现状及规划线路等各类专题数据信息的共建共享、动态更新，进而满足成都市规划信息技术中心对成都实景三维的日常展示与规划管理需求，为城市科学规划与决策提供支撑，对于提升城市规划管理软实力、增强可持续发展后劲起到了积极的推动作用。

支撑层：支撑层运行支撑环境包括规划内部保密网运行的云服务器和互联网运行的华三云服务器。

　　数据层：数据层包括基础地理信息库、规划专题数据库、业务管理数据库三大类数据库，其中基础地理信息库主要管理包括实景三维模型数据、0.5米影像数据、多分辨率混合的DEM数据;规划专题数据是从成都市公共平台服务接口对接过来的各类规划矢量专题数据，包括控规、城市地铁、全市竣工房屋面等数据;业务管理数据库主要管理系统运行维护数据和各类系统配置信息。

　　服务层：通过SuperMap iServer服务平台管理和组织各类三维缓存数据，将数据发布成服务，并且提供三维展示服务、三维查询服务、三维空间分析服务、数据服务等4类接口，用于实现客户端三维展示以及规划应用管理。

　　应用层：基于服务器端各类三维服务接口，实现了三维场景展示、规划专题三维展示、三维场景POI查询定位、日照分析、天际线分析、建设强度分析、建筑专题展示、方案管理等多种城市规划三维应用功能。

　　三维场景展示浏览：提供针对成都市实景三维数据及规划专题数据的浏览、查询定位等功能。

三维场景查询定位：提供在三维场景中基于POI点的查询检索功能，包括对全域地名查询、周边查询以及快速定位等功能，同时还包括对建筑物、控规信息三维查询。

　 三维分析：提供天际线分析、可视域分析、日照分析、通视分析、建设强度分析、建筑物专题分析等三维城市规划分析功能。

　 三维规划方案管理：提供B/S客户端在线直接上传三维规划方案，与当前三维场景叠加展示，实现多屏对比的方式查看三维规划方案;同时与规划审批系统对接，在三维场景中展示审批项目信息以及审批进度信息。

部分源码，开源如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>倾斜模型</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/slider.js"></script>
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
    <style>
        #toolbar input {
            vertical-align: middle;
            padding-top: 2px;
            padding-bottom: 2px;
            margin: 10px 0px;
            width:150px;;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar" class="param-container tool-bar">
    <table>
        <tbody><tr>
            <td>亮度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: brightness, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>对比度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: contrast, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>色调</td>
            <td>
                <input type="range" min="-1" max="1" step="0.02" data-bind="value: hue, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>饱和度</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: saturation, valueUpdate: 'input'">
            </td>
        </tr>
        <tr>
            <td>伽马</td>
            <td>
                <input type="range" min="0" max="2" step="0.02" data-bind="value: gamma, valueUpdate: 'input'">
            </td>
        </tr>
        </tbody></table>
</div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<script type="text/javascript">
    function onload(Cesium) {
        //初始化viewer部件
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url : 'https://dev.virtualearth.net',
            mapStyle : Cesium.BingMapsStyle.AERIAL,
            key : URL_CONFIG.BING_MAP_KEY
        }));
        var scene = viewer.scene;
        var widget = viewer.cesiumWidget;
        var sceneLayer;
        $('#loadingbar').remove();
        
        try{
           var promise = scene.open(URL_CONFIG.SCENE_SUOFEIYA);
            Cesium.when(promise,function(layers){
                var layer = scene.layers.find('Config');
                sceneLayer = layer;
                //设置相机位置，定位至模型
                scene.camera.setView({
                    //将经度、纬度、高度的坐标转换为笛卡尔坐标
                    destination : new Cesium.Cartesian3(-2653915.6463913363,3571045.726807149,4570293.566342328),
                    orientation : {
                        heading : 2.1953426301495345,
                        pitch : -0.33632707158103625,
                        roll : 6.283185307179586
                    }
                });
            },function(){
                var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                widget.showErrorPanel(title, undefined, e);
            });
        }
        catch(e){
            if (widget._showRenderLoopErrors) {
                var title = '渲染时发生错误，已停止渲染。';
                widget.showErrorPanel(title, undefined, e);
            }
        }
        $("#toolbar").show();
          // The viewModel tracks the state of our mini application.
        var viewModel = {
            brightness: 1,
            contrast: 1,
            hue: 0,
            saturation: 1,
            gamma: 1
        };
        // Convert the viewModel members into knockout observables.
        Cesium.knockout.track(viewModel);
        // Bind the viewModel to the DOM elements of the UI that call for it.
        var toolbar = document.getElementById('toolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);

        // Make the active imagery layer a subscriber of the viewModel.
        function subscribeLayerParameter(name) {
            Cesium.knockout.getObservable(viewModel, name).subscribe(
                function(newValue) {
                    var layer = sceneLayer;
                    layer[name] = parseFloat(newValue);
                    //sceneLayers[0].refresh();
                }
            );
        }
        subscribeLayerParameter('brightness');
        subscribeLayerParameter('contrast');
        subscribeLayerParameter('hue');
        subscribeLayerParameter('saturation');
        subscribeLayerParameter('gamma');
    }
    if (typeof Cesium !== 'undefined') {
        window.startupCalled = true;
        onload(Cesium);
    }
    </script>
</body>
</html>

来源：oschina

链接：https://my.oschina.net/u/3528190/blog/4437045

标签

poi

WebGL