如题,基于Cesium,探索三维webgis的实现思路,个人总结,如有错误,欢迎指正
目录
目标概述:
搭建一个web端的三维场景,无需第三方软件,在浏览器上查看仿真三维场景,包括地形,房屋建筑等,同时点击建筑能够展示建筑楼栋信息,细分到户的房屋信息。
成果预览:
分楼栋选取
分户选取
数据和软件准备:
软件:
1、geoserver:发布二维shp数据,提供wms接口,包括建筑底座轮廓数据,分户平面数据
2、 qgjs:shp数据处理,属性补充,坐标系转换
3、cesiumlab:cesium官方提供的数据转换软件,本次主要用于将二维shp数据转换为三维数据
数据:
倾斜摄影数据(3dtiles格式),建筑底座轮廓数据(shp格式),建筑平面分户数据(shp格式,包含层数和高度字段)
实现过程:
1、搭建三维场景页面
cesium,是目前web3d技术领域最流行的技术框架,市场占有率高,技术相对成熟,最重要的是开源免费。
首先,下载cesium框架,下载地址 csdn - 安全中心csdn - 安全中心csdn - 安全中心
在cesium官网注册账号,并申请一个自己的token
cesium官方文档中文 版地址---------Index - Cesium Documentation
cesium官方文档提供几千种种接口,类,方,看起来非常复杂,不过搭建基本的三维场景需要用到的也就那几个
参照官方文档,搭建一个三维地球的页面,也就是new一个Viewer,Viewer也是操作三维场景最常用的一个类,并根据需求设置初始化参数,选择是否屏蔽默认控件,等,这里,我没有用cesium的默认影像,把地球的影像设置为arcgjs提供的影像,arcgjs的影像更加清晰,现势性更好。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新建地球</title> <script src="Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css"> <style> html,body{ height: 100%; margin: 0px; padding: 0px; } </style> </head> <body> <div id="cesiumContainer"></div> <script> Cesium.Ion.defaultAccessToken='你的密钥'; //配置自定义影像突出,以arcgis图层为例 const esri = new Cesium.ArcGisMapServerImageryPr