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.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. <link href="/libs/dc-sdk/dc.min.css" type="text/css" rel="stylesheet" />
  9. <link href="../index.css" type="text/css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <div id="viewer-container" class="viewer-container"></div>
  13. <script>
  14. function generatePosition(num, isAdd) {
  15. let list = []
  16. for (let i = 0; i < num; i++) {
  17. let lng = 121.49536592256028 + Math.random() * 0.04 * (isAdd ? 1 : -1)
  18. let lat = 31.241616722278213 + Math.random() * 0.04 * (isAdd ? 1 : -1)
  19. list.push({ lng, lat })
  20. }
  21. return list
  22. }
  23. DC.config.baseUrl = '../libs/dc-sdk/resources/'
  24. let viewer = new DC.Viewer('viewer-container')
  25. viewer.setOptions({
  26. globe: {
  27. baseColor: DC.Color.BLACK,
  28. },
  29. })
  30. let layer_build = new DC.TilesetLayer('layer_build').addTo(viewer)
  31. let build = new DC.Tileset(
  32. '//resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
  33. { skipLevels: true }
  34. )
  35. let customShader = new DC.CustomShader({
  36. fragmentShaderText: `
  37. void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
  38. vec4 position = czm_inverseModelView * vec4(fsInput.attributes.positionEC,1); // 位置
  39. float glowRange = 100.0; // 光环的移动范围(高度)
  40. vec4 temp = vec4(0.2, 0.5, 1.0, 1.0); // 颜色
  41. temp *= vec4(vec3(position.z / 10.0), 1.0); // 渐变
  42. // 动态光环
  43. float time = fract(czm_frameNumber / 360.0);
  44. time = abs(time - 0.5) * 2.0;
  45. float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
  46. material.diffuse = vec3(temp.rgb + temp.rgb * (1.0 - diff)) ;
  47. }
  48. `,
  49. })
  50. build.setCustomShader(customShader)
  51. layer_build.addOverlay(build)
  52. let layer = new DC.PrimitiveLayer('layer').addTo(viewer)
  53. let positions = generatePosition(50, true)
  54. positions = positions.concat(generatePosition(50))
  55. positions.forEach((item) => {
  56. let position = DC.Position.fromObject(item)
  57. let end = position.copy()
  58. end.alt = 5000 * Math.random()
  59. let line = new DC.FlowLinePrimitive([position, end], 0.5)
  60. line.setStyle({
  61. speed: 6 * Math.random(),
  62. color: DC.Color.fromCssColorString('rgb(141,172,172)'),
  63. percent: 0.1,
  64. gradient: 0.01,
  65. })
  66. layer.addOverlay(line)
  67. })
  68. viewer.flyToPosition('121.4941629,31.2091462,1859.56,0,-28.71')
  69. </script>
  70. </body>
  71. </html>