简介
智慧城市一体化管理平台,结合城市地图实时查看城市交通事故、报警信息、城市环境、空气数量等数据。模型光效可根据实际需求进行调整修改。
本模板为基础教学模板,未经过真实业务场景下的压力测试,在您正式投入使用前请自行补充测试。请注意,若有高并发需求请您务必按实际场景需求进行调整或优化。除平台整体宕机或技术故障外,iVX不承担任何由本模板衍生的各应用运营时的风险和损失。
1.3D城市可自由控制是否旋转
2.精准显示报警位置,点击显示报警详情,方便及时救援
3.精准显示城市摄像头位置,准确把控城市交通状态
该模板使用three与echarts制作,可用于数据可视化与城市模型的预览,用户可自行获取并替换显示的数据。
使用方法
3D世界放在一个绝对定位横幅中,用于固定3D世界在屏幕中间且能显示图表。
数据内容里存放图表数据,数据没有使用api获得,均在前端存放。
下面均为功能函数,可在对应部分查找对应函数。
实现步骤
本案例城市模型使用blenderGIS制作,建筑数据基于谷歌地图,用户也可使用OSM地图数据或者自己的数据。
模型加载也许会耗费许多时间,为避免用户错认为网站卡顿,需要显示目前加载的进度。
给摄像机设置变换状态事件可以让摄像头平滑地进行状态的变换,使用触发器进行每帧的触发使摄像头自动旋转,因为设置了摄像机的手势控制,所以在按下手指的时候需要关闭触发器的播放。
在ivx的3D世界中,为物体设置自定义ID后可以使用ids[自定义ID]的形式获取到物体对象,此处获取了摄像头的对象,其中$el为three原生物体对象,$root.$el为scene对象,$root.$app为renderer对象,可以根据这几个对象进行更多three相关操作。
模型的扫描线效果使用ShaderMaterial实现,在模型加载完成后调用函数替换模型的material。它是使用自定义shader的材质,能够运行使用GLSL语言编写的小程序,详情请点击https://threejs.org/docs/index.html?q=shader#api/zh/materials/ShaderMaterial查看,需要学习一些GLSL语言的基础。
更多开发说明请点击https://shimo.im/docs/913JVD1zB5FZ6r3E/read 查看。