基于Cesium的智慧城市演示系统，兼容超图SuperMap三维服务

---

前言

无论PPT多么的炫酷、多么的漂亮，客户总是想要一个可运行、可浏览的DEMO，总想眼见为实。作为一个售前不怕交流不怕沟通，就怕出一个DEMO。DEMO可大可小，一不小心就陷入了无休止的完善中、迭代中，从此项目不在谈进展，直接进入了实施阶段了。

链接: 源码链接

一、环境准备

1.vscode 安装插件Live Server或者使用Hbuilder

二、开发步骤

1.引入库

代码如下（示例）：

	<link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	<link href="utils.css" rel="stylesheet">
	<link href="examples/css/pretty.css" rel="stylesheet">
	<link href="examples/js/layui-v2.5.5/css/layui.css" rel="stylesheet">
	<script src="examples/js/config.js"></script>
	<script src="examples/js/heatmap.min.js"></script>
	<script src="examples/js/dat.gui.min.js"></script>
	<script src="examples/js/layui-v2.5.5/layui.all.js"></script>
	<script src="examples/js/jquery.min.js"></script>
	<script src="Build/Cesium/Cesium.js"></script>

2.初始化场景

代码如下（示例）：

function onloadApp() {

    try {

        //初始化三维球
        var d3map = new D3()

        d3map.init(); //d3map.initGUI()

        document.getElementsByClassName('cesium-widget-credits')[0].style.display = 'none'

    } catch (error) {

        console.log(error)
    }
    configs.d3map = d3map
};

3.初始化底图。

代码如下（示例）：

D3.prototype.init = function (opt = {}) {

    if (configs.mapDom && configs.mapUrl) {

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';

        this._viewer = new Cesium.Viewer(configs.mapDom, configs.mapOptions);

        this._util = new Cesium.Utils(this._viewer)


        this._viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            mapStyle: Cesium.BingMapsStyle.AERIAL,
            key: URL_CONFIG.BING_MAP_KEY
        }))

        this._scene = this._viewer.scene

        this._scene.skyBox = this._util.setTwoGroundSkyBox()

        this._util.setSnowEffect()

        this.config(opt) //默认开始配置

        this.loadScene() //加载场景

        // this.addThreeObject() //加载three obj
    } else {

        alert("请配置地图参数")
    }

}

4.加载建筑物、路网、白膜等信息

代码如下（示例）：

  /**
         * 建筑
         */
        var promise = this._scene.open(configs.sceneUrl)

        Cesium.when.all(promise, (layer) => {

            this._util.setView({
                position: Cesium.Cartesian3.fromDegrees(106.6269866033348, 29.53232673901685, 2000),
                orientation: {
                    heading: 350.37060,
                    pitch: -12.75012,
                    roll: 0.00306
                }
            })

            layer[0].style3D.emissionColor = new Cesium.Color(2, 5, 10, 1); //自发光颜色


            this._util.setHypsometric(layer[0])



            this._util.bindFlyCircle(true) //给鼠标绑定旋转操作

        })


        /**
         * 扫描物
         */
        new Promise((resolve, reject) => {

            this._util.setRadarScanEffect({
                position: Cesium.Cartesian3.fromDegrees(106.54439406642704, 29.53412750079538, 10.0),
                color: Cesium.Color.DARKCYAN,
                radius: 500
            })

            this.addWall()
        })



        /**
        * 路网
        */
        new Promise((resolve, reject) => {

            this.addRoadLine("examples/data/json/lineback_1.json")

            this.addRoadLine("examples/data/json/lineback2_1.json")

            this.addRoadLine("examples/data/json/lineback3_1.json")
        })

5.运行效果

---

资源链接

链接: https://download.csdn.net/download/weixin_42708380/87698222