Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

cluster_clustering_image.html 1.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. const generatePosition = (num) => {
  15. let list = []
  16. let images = [
  17. '../assets/icon/camera.png',
  18. '../assets/icon/camera_1.png',
  19. '../assets/icon/camera_2.png',
  20. ]
  21. for (let i = 0; i < num; i++) {
  22. let lng = 120.38105869 + Math.random() * 0.5
  23. let lat = 31.10115627 + Math.random() * 0.5
  24. list.push({
  25. lng,
  26. lat,
  27. attr: {
  28. id: DC.Util.uuid(),
  29. style: {
  30. image: images[Math.floor(Math.random() * images.length)],
  31. },
  32. },
  33. })
  34. }
  35. return list
  36. }
  37. DC.config.baseUrl = '../libs/dc-sdk/resources/'
  38. let viewer = new DC.Viewer('viewer-container')
  39. let baseLayer = DC.ImageryLayerFactory.createImageryLayer(
  40. DC.ImageryType.AMAP
  41. )
  42. viewer.addBaseLayer(baseLayer)
  43. let layer = new DC.ClusterLayer('layer', {
  44. style: 'cluster',
  45. })
  46. layer.setPoints(generatePosition(10000))
  47. viewer.addLayer(layer)
  48. layer.on(DC.MouseEventType.CLICK, (e) => {
  49. console.log(e.overlay.attr)
  50. })
  51. viewer.flyToPosition(
  52. '120.62244801448453,31.358576663788927,92653.79773798586,0,-90,0'
  53. )
  54. </script>
  55. </body>
  56. </html>