手把手带你开发Cesium三维场景【3D智慧城市警情预警】

置顶

爱蹦跶的大A阿

已于 2024-01-29 09:53:43 修改

阅读量6.6k

点赞数 92

分类专栏： vue 文章标签： 3d 智慧城市人工智能

于 2023-12-28 14:47:12 首次发布

本文链接：https://blog.csdn.net/qq_41152573/article/details/135267343

版权

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢 VUE专栏：想学VUE的，冲这里

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

效果演示

警情模拟示例

✨ 一、前言

本文主要用于构建Cesium三维地图场景，主要实现了以下功能:

1、初始化三维地图控件

使用Cesium.Viewer和Cesium.Scene等对象初始化三维地图,设置地图纹理、视角位置、阴影参数等配置信息,进行三维场景的初始化。

2、封装场景操作类

封装D3类对场景进行管理,实现场景配置、数据加载、事件绑定等功能,以更好地控制三维场景。

3、CSS3渲染标注

使用CSS3渲染在三维场景中添加Html标注信息。

4、实现视角导航动画

实现不同场景状态下的视角平滑导航动画,使用flyTo方法实现过渡动画效果。

5、构建交互界面

使用dat.GUI构建交互界面,可以控制场景效果参数、添加各种内容。

6、警情场景模拟

实现警情监控、预报、分析、调度四个场景状态的模拟。

7、封装视觉效果方法

封装添加模型、粒子、标注、墙体等常用场景效果的方法。

二、关键技术要点

1. 初始化三维场景

/**
 * 初始化
 */
D3.prototype.init = function (opt = {}) {

    if (configs.mapDom && configs.mapUrl) {

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYTQ2ZjdjNS1jM2E0LTQ1M2EtOWM0My1mODMzNzY3YjYzY2YiLCJpZCI6MjkzMjcsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTE5NDIzNjB9.RzKlVTVDTQ9r7cqCo-PDydgUh8Frgw0Erul_BVxiS9c';
		// 添加镜像服务
		// mapbox.satellite 卫星图像
		// mapbox.streets 街道图像
        this._viewer = new Cesium.Viewer(configs.mapDom, configs.mapOptions);

        this._util = new Cesium.Utils(this._viewer)
		//BingMapsImageryProvider  Bing地图影像，可以指定mapStyle，详见BingMapsStyle类
		//  其中可以指定mapStyle，选择多种风格，目前Cesium中支持AERIAL、AERIAL_WITH_LABELS、ROAD、ORDNANCE_SURVEY、COLLINS_BART五种。
        this._viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            mapStyle: Cesium.BingMapsStyle.AERIAL,
            key: URL_CONFIG.BING_MAP_KEY
        }))

        this._scene = this._viewer.scene

        this._scene.skyBox = this._util.setOneGroundSkyBox()

        // this._util.setSnowEffect()

        this.config(opt) //默认开始配置

        this.loadScene() //加载场景

        // this.addThreeObject() //加载three obj
    } else {

        alert("请配置地图参数")
    }

}

使用Cesium中常用的Viewer、Scene等对象初始化三维视图,主要进行以下配置:

设置地图纹理为Bing地图
配置场景的光照、阴影参数
关闭默认的天空背景、大气效果
开启各种画质优化效果

相关API:

Cesium.Viewer:三维场景的主要容器

new Cesium.Viewer(container, options)

用于构建应用程序的基本小部件。它将所有标准 Cesium 组件组合到一个可重用的包中。小部件总是可以通过使用mixins来扩展，它可以添加对各种应用程序有用的功能。

Name	Type	Description
container	Element \| string	包含小部件的DOM元素或ID。
options	Viewer.ConstructorOptions	描述初始化选项的对象

✨ Throws:

DeveloperError:文档中不存在id为“container”的元素。
DeveloperError:选项。当不使用BaseLayerPicker小部件时，selectedImageryProviderViewModel不可用，请指定选项。baseLayer代替。
DeveloperError:选项。当不使用BaseLayerPicker小部件时，selectedTerrainProviderViewModel不可用，请指定选项。terrainProvider代替。

✨ 示例：

//使用几个自定义选项和mixins初始化查看器小部件。
try {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 从Columbus Viewer开始
    sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
    // 使用Cesium World地形
    terrain: Cesium.Terrain.fromWorldTerrain(),
    // 隐藏底层选择器
    baseLayerPicker: false,
    // 使用 OpenStreetMaps
    baseLayer: new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
      url: "https://tile.openstreetmap.org/"
    })),
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: "stars/TychoSkymapII.t3_08192x04096_80_px.jpg",
        negativeX: "stars/TychoSkymapII.t3_08192x04096_80_mx.jpg",
        positiveY: "stars/TychoSkymapII.t3_08192x04096_80_py.jpg",
        negativeY: "stars/TychoSkymapII.t3_08192x04096_80_my.jpg",
        positiveZ: "stars/TychoSkymapII.t3_08192x04096_80_pz.jpg",
        negativeZ: "stars/TychoSkymapII.t3_08192x04096_80_mz.jpg"
      }
    }),
    // 显示 Columbus View map 与 Web Mercator projection
    mapProjection: new Cesium.WebMercatorProjection()
  });
} catch (error) {
  console.log(error);
}

// 添加基本的拖放功能
viewer.extend(Cesium.viewerDragDropMixin);

// 如果在处理删除的文件时遇到错误，则显示弹出警报
viewer.dropError.addEventListener(function(dropHandler, name, error) {
  console.log(error);
  window.alert(error);
});

Scene:场景的主要渲染对象

new Cesium.Scene(options)

所有的3 d图形对象的容器和国家Cesium虚拟场景。一般来说都不是直接创建的;它是由CesiumWidget隐式创建。

options对象：

Name	Type	Default	Description
canvas	HTMLCanvasElement		用于创建场景的HTML cancas元素。
contextOptions	ContextOptions		环境和WebGL创建属性
creditContainer	Element		用于显示服务描述信息的HTML元素。
creditViewport	Element		要在其中显示信用弹出窗口的HTML元素。如果未指定，则视口将作为画布的兄弟添加。
mapProjection	MapProjection		在二维和Columbus 视图模式下使用的地图投影。
orderIndependentTranslucency	boolean	true	如果此项设置为true，并且使用设备支持，将使用与顺序无关的半透明。
scene3DOnly	boolean	false	如果此项设置为true，将优化三维模式的内存使用和性能，但禁止使用二维或Columbus视图功能。
shadows	boolean	false	确定阴影是否由太阳投射形成。