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.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. <title>dc-example</title>
  7. <script src="/libs/dc-sdk/dc.min.js"></script>
  8. <script src="../dat.gui.min.js"></script>
  9. <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
  10. <link href="../index.css" type="text/css" rel="stylesheet" />
  11. </head>
  12. <body>
  13. <div id="viewer-container" class="viewer-container"></div>
  14. <script>
  15. DC.config.baseUrl = '../libs/dc-sdk/resources/'
  16. let viewer = new DC.Viewer('viewer-container')
  17. let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
  18. DC.ImageryType.AMAP,
  19. {
  20. style: 'img',
  21. crs: 'WGS84',
  22. }
  23. )
  24. viewer.addBaseLayer(baseLayer)
  25. let effect = new DC.Effect(viewer)
  26. effect.lensFlare.enable = true
  27. let controls = {
  28. enable: true,
  29. intensity: 2,
  30. distortion: 10,
  31. dirtAmount: 0.4,
  32. haloWidth: 0.4,
  33. }
  34. let gui = new dat.GUI()
  35. gui.add(controls, 'enable').onChange((value) => {
  36. effect.lensFlare.enable = value
  37. })
  38. gui
  39. .add(controls, 'intensity', 0, 10)
  40. .step(0.1)
  41. .onChange((value) => {
  42. effect.lensFlare.intensity = value
  43. })
  44. gui
  45. .add(controls, 'distortion', 0, 100)
  46. .step(1)
  47. .onChange((value) => {
  48. effect.lensFlare.delta = value
  49. })
  50. gui
  51. .add(controls, 'dirtAmount', 0, 10)
  52. .step(0.01)
  53. .onChange((value) => {
  54. effect.lensFlare.dirtAmount = value
  55. })
  56. gui
  57. .add(controls, 'haloWidth', 0, 10)
  58. .step(0.01)
  59. .onChange((value) => {
  60. effect.lensFlare.haloWidth = value
  61. })
  62. </script>
  63. </body>
  64. </html>