齊愛朋

（河南工業(yè)貿(mào)易職業(yè)學(xué)院信息工程學(xué)院 河南 鄭州 451191）

0 引言

智慧城市是指利用信息技術(shù)和數(shù)據(jù)分析，提升城市管理、服務(wù)和生活質(zhì)量的一種新型城市模式。 智慧城市的可視化展示可以增強公眾對智慧城市的認(rèn)知和參與，是一種有效的傳播和宣傳手段。 通過可視化技術(shù)，可以將抽象復(fù)雜的數(shù)據(jù)轉(zhuǎn)化為直觀形象的圖形，從不同角度、不同層次、不同尺度展示城市的狀態(tài)、變化和規(guī)律，從而幫助決策者、專家和公眾更好地理解和分析城市問題，提出和評估解決方案，促進城市治理和發(fā)展［1］。

在智慧城市可視化展示中，一種常見而受歡迎的方式是在三維地圖上模擬出城市夜景中的燈光、流動和反射等效果，即所謂的“流光溢彩”效果。 這種效果不僅可以突出顯示出城市中各類設(shè)施、建筑物和道路等要素，而且可以體現(xiàn)出城市中各類活動、事件和流量等信息。 此外，這種效果還可以營造出一種美觀而富有動感的視覺氛圍，給人一種高科技而又浪漫的感覺，從而提升智慧城市的形象和品牌。 本文以JavaScript 為開發(fā)語言，探索了如何實現(xiàn)智慧城市“流光溢彩”的高大上效果。

1 JavaScript 的特點和優(yōu)勢

JavaScript 是一種廣泛使用的腳本語言，具有以下幾個特點和優(yōu)勢：（1）跨平臺性。 JavaScript 可以運行在多種瀏覽器和操作系統(tǒng)上，無需安裝額外的軟件或插件；（2）易用性。 JavaScript 語法簡單易學(xué)，支持多種編程范式，如面向?qū)ο蟆⒑瘮?shù)式、事件驅(qū)動等；（3） 靈活性。JavaScript 支持動態(tài)類型、原型繼承、閉包等特性，可以實現(xiàn)多種復(fù)雜而強大的功能；（4）豐富性。 JavaScript 擁有龐大而活躍的開發(fā)者社區(qū)，提供了大量豐富而優(yōu)秀的開源庫和框架，可以滿足各種開發(fā)需求［2］。 基于JavaScript 開發(fā)三維地圖應(yīng)用時，一個常用且強大的框架是Cesium。

2 Cesium 的功能和特色

Cesium 是一個基于WebGL 的開源三維地球引擎，具有以下幾個功能和特色：

（1）高精度。 Cesium 支持WGS84 地球坐標(biāo)系，可以精確地表示地球表面上任意位置的三維對象；

（2）高性能。 Cesium 利用WebGL 的硬件加速特性，可以流暢地渲染海量的三維數(shù)據(jù)，包括矢量數(shù)據(jù)、柵格數(shù)據(jù)、模型數(shù)據(jù)等；

（3）高可擴展。 Cesium 提供了豐富的應(yīng)用程序接口（application programming interface，API）和工具，可以方便地加載和處理各種格式的三維數(shù)據(jù)，以及自定義和控制各種參數(shù)和效果；

（4）高互動。 Cesium 支持多種交互方式，如鼠標(biāo)點擊、拖拽、縮放等，以及多種相機模式，如自由模式、跟隨模式等，可以實現(xiàn)多角度和多層次的三維場景瀏覽［3］。

3 “流光溢彩”效果的實現(xiàn)

本文利用Cesium 提供的API 和工具，實現(xiàn)了以下幾個方面的功能，從而實現(xiàn)智慧城市“流光溢彩”效果。

3.1 加載并渲染三維地圖和建筑模型

要實現(xiàn)以上智慧城市的應(yīng)用場景，首先需要準(zhǔn)備一個城市的三維地圖和建筑模型。 如果想要實現(xiàn)較為逼真的效果，可以通過3DMAX 等工具以三維建模的方式進行，但這種方式需要專業(yè)的建模人員且工作量和代價會非常大。 通常的方式是通過使用無人機采集的傾斜攝影的獲取方式，既兼顧了效果效率，又能大幅度節(jié)約成本［4］。 其次，也可以使用快速創(chuàng)建白模的形式生成三維模型圖。 所謂白模，就是使用Cesium 創(chuàng)建建筑物的幾何線條輪廓或幾何體。 由于創(chuàng)建幾何體只涉及長寬高等有限的參數(shù)，因此通過簡短的代碼就可以實現(xiàn)大規(guī)模的白模生產(chǎn)來模擬一個城市的建筑群［5］。 最后通過Cesium 的scene.primitives.add將三維模型加載到場景中來，再通過各種燈光來實現(xiàn)后續(xù)的效果。

3.2 創(chuàng)建并控制燈光源

包括點光源、聚光燈和區(qū)域光源。

3.2.1 點光源

點光源是指從一個點向各個方向均勻發(fā)射光線的光源，可以用來模擬城市中的路燈、廣告牌等小型燈光。Cesium 提供了PointLight 類來創(chuàng)建和控制點光源，可以設(shè)置其位置、顏色、亮度和衰減等參數(shù)。 例如，以下代碼創(chuàng)建了一個位于（120， 31， 50）的紅色點光源，并添加到場景中：

3.2.2 聚光燈

聚光燈是指從一個點向一個方向發(fā)射錐形光束的光源，可以用來模擬城市中的建筑物、橋梁等大型燈光。Cesium 提供了SpotLight 類來創(chuàng)建和控制聚光燈，可以設(shè)置其位置、方向、顏色、亮度、衰減、角度等參數(shù)。 例如，以下代碼創(chuàng)建了一個位于（120， 32， 100）的白色聚光燈，并向下方發(fā)射45°的光束：

3.2.3 區(qū)域光源

區(qū)域光源是指從一個區(qū)域向各個方向均勻發(fā)射光線的光源，可以用來模擬城市中的天空、水面等大面積燈光。Cesium 提供了AreaLight 類來創(chuàng)建和控制區(qū)域光源，可以設(shè)置其形狀、位置、方向、顏色、亮度和衰減等參數(shù)。 例如，以下代碼創(chuàng)建了一個形狀為矩形的藍(lán)色區(qū)域光源，并位于（121.4， 31.1， 200）和（121.7， 31.4， 200）之間，并向下方發(fā)射光線：

3.3 模擬并渲染燈光的流動、閃爍和變化效果［3］

3.3.1 閃爍效果

閃爍效果是指燈光在時間上隨機變化其亮度或顏色的效果，可以用來模擬城市中的霓虹燈、彩燈等多彩燈光。Cesium 提供了CallbackProperty 類來創(chuàng)建和控制燈光的閃爍效果，可以設(shè)置其亮度或顏色的回調(diào)函數(shù)。 如創(chuàng)建一個隨機變化顏色的點光源：

3.3.2 流動效果

流動效果是指燈光在空間中隨時間變化而移動的效果，可以用來模擬城市中的車輛、人群等動態(tài)燈光。Cesium 提供了Property 類來創(chuàng)建和控制燈光的流動效果，可以設(shè)置其位置、速度、方向等參數(shù)。 例如，以下代碼創(chuàng)建了一個沿著一條折線路徑移動的黃色點光源：

3.3.3 變化效果

變化效果是指燈光在時間上按照一定規(guī)律變化其亮度或顏色的效果，可以用來模擬城市中的交通信號燈、廣告屏等規(guī)律燈光。 Cesium 提供了TimeIntervalCollectionProperty類來創(chuàng)建和控制燈光的變化效果，可以設(shè)置其亮度或顏色在不同時間段的值。 例如，以下代碼創(chuàng)建了一個按照紅綠燈規(guī)則變化顏色的點光源：

3.4 模擬并渲染燈光在地面、水面和建筑物上的反射和折射效果

3.4.1 反射效果

反射效果是指燈光在遇到光滑表面時，按照入射角等于反射角的規(guī)律，反彈出去的效果，可以用來模擬城市中的湖泊、河流等水面燈光。 Cesium 提供了Material 類來創(chuàng)建和控制反射效果，可以設(shè)置其顏色、亮度、粗糙度等參數(shù)。 例如，以下代碼創(chuàng)建了一個具有反射效果的水面材質(zhì)，并應(yīng)用到一個矩形實體上：

3.4.2 折射效果

折射效果是指燈光在遇到透明或半透明表面時，按照折射定律，改變方向并穿過的效果，可以用來模擬城市中的玻璃、水晶等透明或半透明物體燈光。 Cesium 提供了Material 類來創(chuàng)建和控制折射效果，可以設(shè)置其顏色、亮度、透明度、折射率等參數(shù)。 例如，以下代碼創(chuàng)建了一個具有折射效果的玻璃材質(zhì)，并應(yīng)用到一個立方體實體上：

3.5 優(yōu)化并調(diào)整燈光的顏色、亮度和范圍，以達(dá)到最佳的視覺效果

3.5.1 顏色

顏色是燈光的重要屬性之一，可以影響燈光的溫度、情感和氛圍。 Cesium 提供了Color 類來創(chuàng)建和控制燈光的顏色，可以設(shè)置其紅綠藍(lán)（red green blue，RGB）或色相、飽和度、亮度（hue saturation lightness，HSL）等參數(shù)。 例如，以下代碼創(chuàng)建了一個紅色的點光源：

3.5.2 亮度

亮度是燈光的重要屬性之一，可以影響燈光的強度、對比度和明暗。 Cesium 提供了intensity 屬性來創(chuàng)建和控制燈光的亮度，可以設(shè)置其數(shù)值大小。

3.5.3 范圍

范圍是燈光的重要屬性之一，可以影響燈光的覆蓋面積、邊緣模糊度和衰減程度。 Cesium 提供了decay 屬性來創(chuàng)建和控制燈光的范圍，可以設(shè)置其數(shù)值大小。

4 結(jié)果分析

本文探索了利用Cesium 提供的API 和工具，實現(xiàn)在三維地圖上模擬出城市夜景中的燈光、流動和反射等效果，實現(xiàn)智慧城市“流光溢彩”效果。 該思路和方法具有以下幾個特點和優(yōu)勢：

（1）美觀。 利用Cesium 提供的燈光源類和材質(zhì)類，創(chuàng)建了多種類型、顏色、亮度和范圍的燈光，以及多種反射和折射的效果，營造出了一種美觀而富有動感的視覺氛圍。

（2）真實。 利用Cesium 提供的三維地圖和建筑模型，以及Property 類、Callback Property 類和Time Interval Collection Property 類等，模擬了燈光在空間中隨時間變化而移動、閃爍和變化的效果，增強了燈光的真實性和生動性。

（3）靈活。 利用Cesium 提供的豐富的API 和工具，可以方便地加載和處理各種格式的三維數(shù)據(jù)，以及自定義和控制各種參數(shù)和效果，可以根據(jù)不同的需求和場景，實現(xiàn)不同的燈光效果。

本文的研究成果為智慧城市可視化展示提供了一種新穎而有效的方法，也為其他基于JavaScript 的三維地圖應(yīng)用提供了適當(dāng)?shù)膮⒖己徒梃b。