Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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.VectorLayer('layer')
  44. viewer.addLayer(layer)
  45. let positions = generatePosition(100)
  46. positions.forEach((item) => {
  47. let billboard = new DC.Billboard(item, '../assets/icon/camera.png')
  48. layer.addOverlay(billboard)
  49. })
  50. viewer.flyToPosition(
  51. '120.8226729498609,31.268693185250438,114716.63624611919,0,-90'
  52. )
  53. function addPoint(num) {
  54. removeAll()
  55. let start = new Date().getTime()
  56. let positions = generatePosition(num)
  57. console.log(
  58. 'create point time: ' + (new Date().getTime() - start) / 1000
  59. )
  60. start = new Date().getTime()
  61. positions.forEach((item) => {
  62. let billboard = new DC.Billboard(item, '../assets/icon/camera.png')
  63. billboard.on(DC.MouseEventType.CLICK, (e) => console.log(e))
  64. layer.addOverlay(billboard)
  65. })
  66. console.log('add point time: ' + (new Date().getTime() - start) / 1000)
  67. }
  68. function removeAll() {
  69. layer.clear()
  70. }
  71. </script>
  72. </body>
  73. </html>