You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 14KB

2 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849
  1. ---
  2. sidebar: auto
  3. ---
  4. # 效果动画 🌎
  5. 在三维场景中添加动态要素,让场景能够动起来,更加贴近真实世界的运行
  6. ## DC.Weather
  7. > 天气效果
  8. ### example
  9. ```js
  10. let weather = new DC.Weather()
  11. viewer.use(weather)
  12. ```
  13. ### creation
  14. - **_constructor()_**
  15. 构造函数
  16. - 返回值 `weather`
  17. ### properties
  18. - [`{Rain} rain`](#rain):雨天 **_`readonly`_**
  19. - [`{Snow} snow`](#snow):雪天 **_`readonly`_**
  20. - [`{Fog} snow`](#fog):雾天 **_`readonly`_**
  21. - [`{Cloud} cloud`](#cloud):云 **_`readonly`_**
  22. ## Rain
  23. > 雨天效果
  24. ### example
  25. ```js
  26. viewer.weather.rain.enable = true
  27. viewer.weather.rain.speed = 2
  28. ```
  29. ### properties
  30. - `{Boolean} enable`:是否启用
  31. - `{Number} speed`:速度
  32. ## Snow
  33. > 雪天效果
  34. ### example
  35. ```js
  36. viewer.weather.snow.enable = true
  37. viewer.weather.snow.speed = 2
  38. ```
  39. ### properties
  40. - `{Boolean} enable`:是否启用
  41. - `{Number} speed`:速度
  42. ## Fog
  43. > 雾天效果
  44. ### example
  45. ```js
  46. viewer.weather.fog.enable = true
  47. viewer.weather.fog.fogColor = DC.Color.BLACK
  48. ```
  49. ### properties
  50. - `{Boolean} enable`:是否启用
  51. - `{Color} fogColor`:颜色,
  52. - `{Object} fogByDistance`:距离可见,默认: { near: 10, nearValue: 0, far: 2000, farValue: 1.0 }
  53. ## Cloud
  54. > 云效果
  55. ### example
  56. ```js
  57. viewer.weather.cloud.enable = true
  58. viewer.weather.cloud.rotateAmount = 0.02
  59. ```
  60. ### properties
  61. - `{Boolean} enable`:是否启用
  62. - `{Number} rotateAmount`:移动增量,可为负数
  63. ## DC.Effect
  64. > 效果类
  65. ### example
  66. ```js
  67. let effect = new DC.Effect()
  68. viewer.use(effect)
  69. ```
  70. ### creation
  71. - **_constructor()_**
  72. 构造函数
  73. - 返回值 `effect`
  74. ### properties
  75. - [`{BlackAndWhite} blackAndWhite`](#blackandwhite):黑白 **_`readonly`_**
  76. - [`{Bloom} bloom`](#bloom):泛光 **_`readonly`_**
  77. - [`{Brightness} brightness`](#brightness):明亮 **_`readonly`_**
  78. - [`{DepthOfField} depthOfField`](#depthoffield):景深 **_`readonly`_**
  79. - [`{LensFlare} lensFlare`](#lensflare):镜头耀斑 **_`readonly`_**
  80. - [`{Night} night`](#night):夜视 **_`readonly`_**
  81. - [`{Silhouette} silhouette`](#silhouette):描边 **_`readonly`_**
  82. ## BlackAndWhite
  83. > 黑白效果
  84. ### example
  85. ```js
  86. viewer.effect.blackAndWhite.enable = true
  87. ```
  88. ### properties
  89. - `{Boolean} enable`:是否启用
  90. - `{Number} gradations`:强度
  91. - `{Array} selected`:设置后期作用的覆盖物
  92. ## Bloom
  93. > 泛光效果
  94. ### example
  95. ```js
  96. viewer.effect.bloom.enable = true
  97. ```
  98. ### properties
  99. - `{Boolean} enable`:是否启用
  100. - `{Number} contrast`:对比度
  101. - `{Number} brightness`:亮度
  102. - `{Number} glowOnly`:只发光
  103. - `{Number} delta`:Delta
  104. - `{Number} sigma`:Sigma
  105. - `{Number} stepSize`:StepSize
  106. - `{Array} selected`:设置后期作用的覆盖物
  107. ## Brightness
  108. > 明亮效果
  109. ### example
  110. ```js
  111. viewer.effect.brightness.enable = true
  112. ```
  113. ### properties
  114. - `{Boolean} enable`:是否启用
  115. - `{Number} intensity`:强度
  116. - `{Array} selected`:设置后期作用的覆盖物
  117. ## DepthOfField
  118. > 景深效果
  119. ### example
  120. ```js
  121. viewer.effect.depthOfField.enable = true
  122. ```
  123. ### properties
  124. - `{Boolean} enable`:是否启用
  125. - `{Number}} focalDistance`:焦距
  126. - `{Number} delta`:Delta
  127. - `{Number} sigma`:Sigma
  128. - `{Number} stepSize`:StepSize
  129. - `{Array} selected`:设置后期作用的覆盖物
  130. ## LensFlare
  131. > 镜头耀斑效果
  132. ### example
  133. ```js
  134. viewer.effect.lensFlare.enable = true
  135. ```
  136. ### properties
  137. - `{Boolean} enable`:是否启用
  138. - `{Number}} intensity`:强度
  139. - `{Number} distortion`:扭曲度
  140. - `{Number} dirtAmount`:分散度
  141. - `{Number} haloWidth`:光圈宽度
  142. - `{Array} selected`:设置后期作用的覆盖物
  143. ## Night
  144. > 夜视效果
  145. ### example
  146. ```js
  147. viewer.effect.night.enable = true
  148. ```
  149. ### properties
  150. - `{Boolean} enable`:是否启用
  151. - `{Array} selected`:设置后期作用的覆盖物
  152. ## Silhouette
  153. > 描边效果
  154. ### example
  155. ```js
  156. viewer.effect.silhouette.enable = true
  157. ```
  158. ### properties
  159. - `{Boolean} enable`:是否启用
  160. - `{Color} color`:颜色
  161. - `{Number} length`:长度
  162. - `{Array} selected`:设置后期作用的覆盖物
  163. ## Animation
  164. > 场景动画基类
  165. :::warning
  166. 该类无法实例化
  167. :::
  168. ### methods
  169. - **_start()_**
  170. 开始动画
  171. - 返回值 `this`
  172. - **_stop()_**
  173. 停止动画
  174. - 返回值 `this`
  175. ## DC.AroundPoint
  176. > 点位环绕,继承于[Animation](#animation)
  177. ### example
  178. ```js
  179. let aroundPoint = new DC.AroundPoint(viewer, '120.121, 31.12')
  180. aroundPoint.start()
  181. ```
  182. ### creation
  183. - **_constructor(viewer,position,[options])_**
  184. 构造函数
  185. - 参数
  186. - `{Viewer} viewer`:3D 场景
  187. - `{Position|String|Array} position`:点位
  188. - `{Object} options`:options
  189. - 返回值 `aroundPoint`
  190. ```json
  191. //options(optional)
  192. {
  193. "heading": 0, //偏移角度
  194. "pitch": 0, //翻转角度
  195. "range": 0, //距离
  196. "duration": 0, //间隔,单位:秒,当此值大于0时,callback才会生效
  197. "callback": null, //完成回调函数
  198. "context": null //回调函数执行上下文
  199. }
  200. ```
  201. ## DC.AroundView
  202. > 相机环绕,继承于[Animation](#animation)
  203. ### example
  204. ```js
  205. let aroundView = new DC.AroundView(viewer)
  206. aroundView.start()
  207. ```
  208. ### creation
  209. - **_constructor(viewer,[options])_**
  210. 构造函数
  211. - 参数
  212. - `{Viewer} viewer`:3D 场景
  213. - `{Object} options`:options
  214. - 返回值 `aroundView`
  215. ```json
  216. //options(optional)
  217. {
  218. "heading": 0, //偏移角度
  219. "pitch": 0, //俯仰角度
  220. "roll": 0, //翻转角度
  221. "duration": 0, //间隔,单位:秒,当此值大于0时,callback才会生效
  222. "callback": null, //完成回调函数
  223. "context": null //回调函数执行上下文
  224. }
  225. ```
  226. ## DC.CircleScan
  227. > 扫描圈,继承于[Animation](#animation)
  228. ### example
  229. ```js
  230. let circleScan = new DC.CircleScan(viewer, '120, 20', 200)
  231. circleScan.start()
  232. ```
  233. ### creation
  234. - **_constructor(viewer,position,radius,options)_**
  235. 构造函数
  236. - 参数
  237. - `{Viewer} viewer`:场景
  238. - `{DC.Position} position`:位置
  239. - `{Number} radius`:半径
  240. - `{Object} options`:属性
  241. - 返回值 `circleScan`
  242. ```json
  243. // 属性参数(optional)
  244. {
  245. "color": DC.Color.BLUE, // 颜色
  246. "speed": 5 // 速度
  247. }
  248. ```
  249. ## DC.Flying
  250. > 定点巡航,继承于[Animation](#animation)
  251. ### example
  252. ```js
  253. let flying = new DC.Flying(viewer)
  254. flying.positions = ['121.234,21.212,0,-29', '121.435,21.212,0,-29']
  255. flying.start()
  256. ```
  257. ### creation
  258. - **_constructor(viewer,[options])_**
  259. 构造函数
  260. - 参数
  261. - `{Viewer} viewer`:场景
  262. - `{Object} options`:options
  263. - 返回值 `flying`
  264. ```json
  265. // 属性参数(optional)
  266. {
  267. "loop": false, //是否循环,
  268. "dwellTime": 3, //驻留时间
  269. "callback": null //回调函数
  270. }
  271. ```
  272. ### properties
  273. - `{Array} positions`:点位
  274. - `{Array} durations`:每个点位的飞行间隔时间,当数组长度为 1 时,每个间隔时间相同,如果不为 1 时,长度必须和点位长度相等
  275. ### methods
  276. - **_start()_**
  277. 开始动画
  278. - 返回值 `this`
  279. - **_pause()_**
  280. 暂停
  281. - 返回值 `this`
  282. - **_restore()_**
  283. 继续
  284. - 返回值 `this`
  285. ## DC.GlobeRotate
  286. > 地球自转,继承于[Animation](#animation)
  287. ### example
  288. ```js
  289. let globeRotate = new DC.GlobeRotate(viewer, {
  290. duration: 5,
  291. speed: 1000,
  292. callback: () => {},
  293. })
  294. globeRotate.start()
  295. ```
  296. ### creation
  297. - **_constructor(viewer,[options])_**
  298. 构造函数
  299. - 参数
  300. - `{DC.Viewer} viewer`:3D 场景
  301. - `{Object} options`:options
  302. - 返回值 `globeRotate`
  303. ```json
  304. //options(optional)
  305. {
  306. "speed": 12 * 1000, //速度
  307. "duration": 0, //持续时间,当此值大于0时,callback才会生效
  308. "callback": null, //执行完成的回调函数
  309. "context": null //回调函数执行上下文
  310. }
  311. ```
  312. ## DC.RadarScan
  313. > 雷达扫描,继承于[Animation](#animation)
  314. ### example
  315. ```js
  316. let radarScan = new DC.RadarScan(viewer, '120, 20', 200)
  317. radarScan.start()
  318. ```
  319. ### creation
  320. - **_constructor(viewer,position,radius,options)_**
  321. 构造函数
  322. - 参数
  323. - `{Viewer} viewer`:场景
  324. - `{DC.Position} position`:位置
  325. - `{Number} radius`:半径
  326. - `{Object} options`:属性
  327. - 返回值 `radarScan`
  328. ```json
  329. // 属性参数(optional)
  330. {
  331. "color": DC.Color.BLUE, // 颜色
  332. "speed": 5 // 速度
  333. }
  334. ```
  335. ## DC.RoamingController
  336. > 漫游控制
  337. ### example
  338. ```js
  339. let rc = new DC.RoamingController(viewer)
  340. ```
  341. ### creation
  342. - **_constructor(viewer)_**
  343. 构造函数
  344. - 参数
  345. - `{Viewer} viewer`:3D 场景
  346. - 返回值 `roamingController`
  347. ### methods
  348. - **_addPath(path)_**
  349. 添加路径
  350. - 参数
  351. - `{RoamingPath} path`:路径
  352. - 返回值 `this`
  353. - **_addPaths(paths)_**
  354. 添加路径数组
  355. - 参数
  356. - `{Array<RoamingPath>} paths`:路径数组
  357. - 返回值 `this`
  358. - **_removePath(path)_**
  359. 移除路径
  360. - 参数
  361. - `{RoamingPath} path`:路径
  362. - 返回值 `path`
  363. - **_getPath(id)_**
  364. 根据唯一标识获取路径
  365. - 参数
  366. - `{String} id`:唯一标识
  367. - 返回值 `path`
  368. - **_getPaths()_**
  369. 获取所有路径
  370. - 返回值 `array`
  371. - **_activate(path, viewOption)_**
  372. 激活漫游
  373. - 参数
  374. - `{RoamingPath} path`:路径
  375. - `{String} viewOption`:漫游参数
  376. - 返回值 `this`
  377. ```json
  378. // 漫游参数(可选)
  379. {
  380. "pitch": 0, // 俯仰角
  381. "range": 1000 // 距离
  382. }
  383. ```
  384. - **_deactivate()_**
  385. 结束漫游
  386. - 返回值 `this`
  387. - **_clear()_**
  388. 移除所有路径
  389. - 返回值 `this`
  390. ## DC.RoamingPath
  391. > 漫游路径
  392. ### example
  393. ```js
  394. let path = new DC.RoamingPath('120.121,32.1213;121.132,32.1213', 20)
  395. rc.addPath(path)
  396. ```
  397. ### creation
  398. - **_constructor(positions, duration, [pathMode])_**
  399. 构造函数
  400. - 参数
  401. - `{String|Array<Position|Number|String|Object>} positions`:坐标串
  402. - `{Number} duration`:间隔时间,单位:秒
  403. - `{String} pathMode`:路径模式:speed(匀速) / time(等时)
  404. - 返回值 `roamingPath`
  405. ### properties
  406. - `{String} pathId`:唯一标识 **_`readonly`_**
  407. - `{String} id`:业务唯一标识
  408. - `{String|Array<Position|Number|String>} positions`:坐标串
  409. - `{Number} duration`:间隔时间,单位:秒
  410. - `{String} pathMode`:路径模式:speed(匀速) / time(等时)
  411. - `{String} state`:状态 **_`readonly`_**
  412. ## DC.KeyboardRoaming
  413. > 键盘漫游
  414. ### example
  415. ```js
  416. let kr = new DC.KeyboardRoaming(viewer)
  417. kr.enable = true
  418. ```
  419. ### creation
  420. - **_constructor(viewer)_**
  421. 构造函数
  422. - 参数
  423. - `{Viewer} viewer`:3D 场景
  424. - 返回值 `keyboardRoaming`
  425. ### properties
  426. - `{Boolean} enable`:是否启用
  427. - `{Number} moveRate`:移动变化率:100
  428. - `{Number} rotateRate`:旋转变化率:0.01
  429. ## DC.TrackController
  430. > 历史轨迹控制
  431. ### example
  432. ```js
  433. let tc = new DC.TrackController(viewer)
  434. ```
  435. ### creation
  436. - **_constructor(viewer)_**
  437. 构造函数
  438. - 参数
  439. - `{Viewer} viewer`:3D 场景
  440. - 返回值 `trackController`
  441. ### methods
  442. - **_addTrack(track)_**
  443. 添加轨迹
  444. - 参数
  445. - `{Track} track`:轨迹
  446. - 返回值 `this`
  447. - **_addTracks(tracks)_**
  448. 添加轨迹数组
  449. - 参数
  450. - `{Array<Track>} tracks`:轨迹数组
  451. - 返回值 `this`
  452. - **_removeTrack(track)_**
  453. 移除轨迹
  454. - 参数
  455. - `{Track} track`:轨迹
  456. - 返回值 `path`
  457. - **_getTrack(id)_**
  458. 根据业务唯一标识获取轨迹
  459. - 参数
  460. - `{String} id`:业务唯一标识
  461. - 返回值 `track`
  462. - **_getTracks()_**
  463. 获取所有轨迹
  464. - 返回值 `array`
  465. - **_play()_**
  466. 播放
  467. - 返回值 `this`
  468. - **_pause()_**
  469. 暂停
  470. - 返回值 `this`
  471. - **_restore()_**
  472. 继续播放
  473. - 返回值 `this`
  474. - **_viewTrack(track, viewOption)_**
  475. 跟踪某一条路径
  476. - 参数
  477. - `{Track} track`:路径
  478. - `{String} viewOption`:配置信息
  479. - 返回值 `this`
  480. ```json
  481. // 属性参数(可选)
  482. {
  483. "mode": null, // 视角模式:DC.TrackViewMode
  484. "pitch": 0, // 俯仰角,第一视角有效
  485. "range": 1000 // 距离
  486. }
  487. ```
  488. - **_releaseTrack(track)_**
  489. 取消跟踪某一条轨迹
  490. - 参数
  491. - `{Track} track`:路径
  492. - 返回值 `this`
  493. - **_clear()_**
  494. 移除所有路径
  495. - 返回值 `this`
  496. ## DC.Track
  497. > 轨迹
  498. ### example
  499. ```js
  500. let tc = new DC.TrackController(viewer)
  501. let track = new DC.Track('120.121,32.1213;121.132,32.1213', 20)
  502. tc.addTrack(track)
  503. ```
  504. ### creation
  505. - **_constructor(positions, duration, [callback], [options])_**
  506. 构造函数
  507. - 参数
  508. - `{String|Array<Position|Number|String|Object>} positions`:坐标串
  509. - `{Number} duration`:间隔时间,单位:秒
  510. - `{Function} callback`:每一个点位到达回调函数,参数有:position(位置信息),isLast(是否为最后的点位)
  511. - `{Object} options`: 配置参数
  512. - 返回值 `track`
  513. ```json
  514. //配置参数(可选)
  515. {
  516. "clampToGround": false, // 是否贴地
  517. "clampToTileset": false, // 是否贴物
  518. "interpolationType": "Linear", // 插值类型:Linear、Hermite、Lagrange
  519. "interpolationDegree": 2, // 插值度数
  520. "endDelayTime": 0.5,// 结束时间延长时间,单位:秒,
  521. "headingOffset":0,//旋转偏移
  522. }
  523. ```
  524. ### properties
  525. - `{String} trackId`:唯一标识 **_`readonly`_**
  526. - `{String} id`:业务唯一标识
  527. - `{String|Array<Position|Number|String|Object>} positions`:坐标串
  528. - `{Number} duration`:间隔时间,单位:秒
  529. - `{Date} startTime`:开始时间,设置后会独立于控制器的开始时间
  530. - `{String} state`:状态 **_`readonly`_**
  531. ### methods
  532. - **_addPosition(position,duration)_**
  533. 添加点位
  534. - 参数
  535. - `{Position|Array|String|Object} position`:点位
  536. - `{Number} duration`:间隔,单位:秒
  537. - 返回值 `this`
  538. - **_setModel(modelUrl,style)_**
  539. 设置模型
  540. - 参数
  541. - `{String} modelPath`:模型路径
  542. - `{Object} style`:样式,详情参考:[DC.Model](../overlay/#dc-model)
  543. - 返回值 `this`
  544. - **_setBillboard(icon,style)_**
  545. 设置图标
  546. - 参数
  547. - `{String} icon`:图标路径
  548. - `{Object} style`:样式,参考:[DC.Billboard](../overlay/#dc-billboard)
  549. - 返回值 `this`
  550. - **_setLabel(text,style)_**
  551. 设置文本
  552. - 参数
  553. - `{String} text`:文本
  554. - `{Object} style`:样式,参考:[DC.Label](../overlay/#dc-label)
  555. - 返回值 `this`
  556. - **_setPath(visible,style)_**
  557. 设置路径
  558. - 参数
  559. - `{Boolean}} visible`:是否可见
  560. - `{Object} style`:样式,参考:[DC.Polyline](../overlay/#dc-polyline)
  561. - 返回值 `this`