Cesium系统教程

duansamve

已于 2024-12-02 21:45:13 修改

阅读量1.3k

点赞数 10

分类专栏：其它JS框架文章标签： cesium

于 2024-12-01 22:37:12 首次发布

原文链接：https://blog.csdn.net/w137160164/article/details/130788090

版权

前言

Cesium官网：官网链接

Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

本教程基于Cesium 1.119

最新版本下载：Downloads – Cesium

历史版本下载：https://sourceforge.net/projects/cesium.mirror/

一、Cesium的初始化

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
//AccessTokens需要到官网获取，详细看问题注意点
Cesium.Ion.defaultAccessToken = '你的AccessTokens'
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Cesium";
const init = ()=>{
	const viewer = new Cesium.Viewer("cesiumContainer", {
	  homeButton: true, //首页位置，点击之后将视图跳转到默认视角
	  sceneModePicker: true, //是否显示投影方式控件
	  baseLayerPicker: true, //是否显示图层选择控件
	  navigationHelpButton: true, //是否显示帮助信息控件
	  geocoder: false, //是否显示地名查找控件
	  animation: false, //是否显示动画控件
	  timeline: false, //是否显示时间线控件
	  fullscreenButton: false, //视察全屏按钮
	  vrButton: false,//是否启用虚拟现实 (VR) 模式
	  shadows: true, //影子
	  infoBox: false, //是否显示点击要素之后显示的信息
	});
}

onMounted(()=>{
  init()
})
</script>

关闭左下角版权信息

viewer._cesiumWidget._creditContainer.style.display = "none";

二、加载影像

Cesium中数据加载包括ArcGIS在线地图、Bing地图、天地图、高德地图、OpenStreetMap、MapBox影像图等，ESRL、超图、中地数码等大型 GIS 厂商提供的自定义格式的 GIS数据，以及 GeoJSON、TIFF、SHP、KML、点云、三维模型等各种格式的 GIS 数据。

Cesium 提供了 BingMapsImageryProvider 类来加载 Bing地图，并且默认加载了微软公司的 Bing 地图。也就是说,在创建 Vewer 时，如果不指定ImageryProvider 类,就默认加载 Bing地图。

在加载 Bing地图时，需要申请 Bing地图密钥或者申请Cesium的token，否则可能会出现加载完成后没有地图出现的情况。

        const viewer = new Cesium.Viewer("cesiumContainer", {
            imageryLayers: new Cesium.ArcGisMapServerImageryProvider({
                //加载ArcGIS 在线地图
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            }),
        });

三、加载地形

使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium-1.119/Build/Cesium/Cesium.js"></script>
    <link
      rel="stylesheet"
      href="./Cesium-1.119/Build/Cesium/Widgets/widgets.css"
    />
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="cesiumContainer"></div>

    <script type="module">
      Cesium.Ion.defaultAccessToken =
        "使用注册的账号获取AccessToken";

      const viewer = new Cesium.Viewer("cesiumContainer", {
        // 使用Cesium World Terrain图层可以三维展示地形地势、水形数据让模型效果更立体
        terrainProvider: await Cesium.createWorldTerrainAsync({
          requestWaterMask: true,
          requestVertexNormals: true,
        }),
      });
    </script>
  </body>
</html>

注意：如果是html页面中，script类型请使用 module。

四、加载3D Tiles数据

Cesium目前支持两种模型方案，一个是使用3D tiles，另一个是加载glTF模型，3D tiles是适用于展示大区域面积的建筑模型，而glTF模型是加载单个独立模型。

3D Tiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集, 3DTiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

加载cesium提供的通用3D建筑

首先要到cesium的个人中心，资源仓库中添加Cesium OSM Buildings到自己的资源中，这种资源的建筑没有高度。

        const tileset = viewer.scene.primitives.add(
            await Cesium.Cesium3DTileset.fromIonAssetId(96188),
        );
        
        //移动视角到陆家嘴
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000),
            orientation: {
                heading: 0,
                pitch: -90,
                roll: 0
            }
        })

未加载模型前：

加载模型后：

添加有高度的建筑

纽约3D建筑

到cesium的个人中心，资源仓库中添加New York City 3D Buildings到自己的资源中

const tileset = viewer.scene.primitives.add(
    await Cesium.Cesium3DTileset.fromIonAssetId(75343),
 );

//移动视角到纽约，像上方一样，设置视角，也可以直接这么做
viewer.zoomTo(tileset)

结果如下：

根据高度设置建筑颜色

高度的顺序，因为我们用的是大于号一定要从大到小，反之则是从小到大

        tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ['${Height} >= 300', 'rgba(45,0,75,0.6)'],
                    ['${Height} >= 200', 'rgba(102,71,151, 1)'],
                    ['${Height} >= 100', 'rgba(170,62,204, 1)'],
                    ['${Height} >= 50', 'rgba(224,226,238, 1)'],
                    ['${Height} >= 25', 'rgba(252,230,200, 1)'],
                    ['${Height} >= 10', 'rgba(248,176,87, 1)'],
                    ['${Height} >= 5', 'rgba(198,106,11, 1)'],
                    ['true', 'rgba(127,59,8, 1)'],
                ]
            },
            show: '${Height} >= 0&

最低0.47元/天解锁文章