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

关注

VIP免费原创最新推荐文章于 2026-08-13 13:58:35 发布 4.1k 阅读 AI 写同款· GEO 优化 ›

WebGIS之Cesium三维软件开发本书内容由浅入深、循序渐进，涵盖了 Cesium 提供的各个功能接口的使用方法。全书共 8 章，首先对三维 WebGIS 进行概述，然后依次讲解 Cesium 快速入门、Cesium 数据加载、Cesium 事件处理、Cesium 图形绘制、Cesium 三维模型、Cesium 材质特效，最后详细讲解 Cesium 工具应用，包括常用工具和三维分析等高级应用的功能开发。阅读详情

如题，基于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.ArcGisMapServerImageryProvider({
            url:  'https://services.arcgisonline.com/arcgis/rest/services/Wor