超图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.运行效果
资源链接
链接:
更多推荐
基于Cesium的智慧城市演示系统,兼容超图SuperMap三维服务
发布评论