基于Cesium,探索实景三维webgis的实现过程

如题,基于Cesium,探索三维webgis的实现思路,个人总结,如有错误,欢迎指正

目录

目标概述:

成果预览:

数据和软件准备:

 实现过程:

1、搭建三维场景页面

2、Cesium对三维要素的基本操作

3、加载三维建筑数据

        3.1 准备3D tiles数据

         3.1.1 方法一:其他三维数据转换

         3.1.2 方法二:二维转三维(白模)

        3.1.3 方法三:倾斜摄影数据

         3.2 加载数据方法

4、模型的单体化显示


目标概述:

搭建一个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
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值