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

超图SuperMap三维服务"/>

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

文章目录

• 前言
• 一、环境准备
• 二、开发步骤
• • 1.引入库
  • 2.初始化场景
  • 3.初始化底图。
  • 4.加载建筑物、路网、白膜等信息
  • 5.运行效果
• 资源链接

前言

无论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: '',mapStyle: Cesium.BingMapsStyle.AERIAL,key: URL_CONFIG.BING_MAP_KEY}))this._scene = this._viewer.scenethis._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.运行效果

资源链接

链接: