index.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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" />
  6. <title>React 大数据可视化</title>
  7. <link rel="stylesheet" href="index.css" />
  8. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  9. <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
  10. <script type="text/javascript"
  11. src="//api.map.baidu.com/api?type=webgl&v=4.0&ak=ILQH1WYMHbSlqFNViqca6j62Ga7bSOzW"></script>
  12. <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
  13. <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  14. </head>
  15. <body>
  16. <div id="root"></div>
  17. <script src="index.js"></script>
  18. </body>
  19. <style>
  20. .drawing-panel {
  21. z-index: 999;
  22. position: absolute;
  23. top: 0.5rem;
  24. margin-left: 0.5rem;
  25. padding-left: 0;
  26. border-radius: .25rem;
  27. height: 47px;
  28. box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  29. }
  30. .bmap-btn {
  31. border-right: 1px solid #d2d2d2;
  32. float: left;
  33. width: 64px;
  34. height: 100%;
  35. background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
  36. cursor: pointer;
  37. }
  38. .drawing-panel .bmap-marker {
  39. background-position: -65px 0;
  40. }
  41. .drawing-panel .bmap-polyline {
  42. background-position: -195px 0;
  43. }
  44. .drawing-panel .bmap-rectangle {
  45. background-position: -325px 0;
  46. }
  47. .drawing-panel .bmap-polygon {
  48. background-position: -260px 0;
  49. }
  50. .drawing-panel .bmap-circle {
  51. background-position: -130px 0;
  52. }
  53. </style>
  54. </html>