您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

billboard_m.html 2.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. <div class="btn-box">
  14. <ul>
  15. <li><button onclick="addPoint(100)">一百</button></li>
  16. <li><button onclick="addPoint(1000)">一千</button></li>
  17. <li><button onclick="addPoint(10000)">一万</button></li>
  18. <li><button onclick="addPoint(50000)">五万</button></li>
  19. <li><button onclick="addPoint(100000)">十万</button></li>
  20. <li><button onclick="removeAll()">清除</button></li>
  21. </ul>
  22. </div>
  23. <script>
  24. const generatePosition = (num) => {
  25. let list = []
  26. for (let i = 0; i < num; i++) {
  27. let lng = 120.38105869 + Math.random() * 0.5
  28. let lat = 31.10115627 + Math.random() * 0.5
  29. list.push(new DC.Position(lng, lat))
  30. }
  31. return list
  32. }
  33. DC.config.baseUrl = '../libs/dc-sdk/resources/'
  34. let viewer = new DC.Viewer('viewer-container')
  35. let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
  36. DC.ImageryType.AMAP,
  37. {
  38. style: 'img',
  39. crs: 'WGS84',
  40. }
  41. )
  42. viewer.addBaseLayer(baseLayer)
  43. layer = new DC.PrimitiveLayer('layer')
  44. viewer.addLayer(layer)
  45. let positions = generatePosition(100)
  46. positions.forEach((item) => {
  47. let billboard = new DC.BillboardPrimitive(
  48. item,
  49. '../assets/icon/camera.png'
  50. )
  51. billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
  52. layer.addOverlay(billboard)
  53. })
  54. viewer.flyToPosition(
  55. '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
  56. )
  57. function addPoint(num) {
  58. removeAll()
  59. let start = new Date().getTime()
  60. let positions = generatePosition(num)
  61. console.log(
  62. 'create point time: ' + (new Date().getTime() - start) / 1000
  63. )
  64. start = new Date().getTime()
  65. positions.forEach((item) => {
  66. let billboard = new DC.BillboardPrimitive(
  67. item,
  68. '../assets/icon/camera.png'
  69. )
  70. billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
  71. layer.addOverlay(billboard)
  72. })
  73. console.log('add point time: ' + (new Date().getTime() - start) / 1000)
  74. }
  75. function removeAll() {
  76. layer.clear()
  77. }
  78. </script>
  79. </body>
  80. </html>