12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>React 大数据可视化</title>
- <link rel="stylesheet" href="index.css" />
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
- <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
- <script type="text/javascript"
- src="//api.map.baidu.com/api?type=webgl&v=4.0&ak=ILQH1WYMHbSlqFNViqca6j62Ga7bSOzW"></script>
- <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
- <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
- </head>
- <body>
- <div id="root"></div>
- <script src="index.js"></script>
- </body>
- <style>
- .drawing-panel {
- z-index: 999;
- position: absolute;
- top: 0.5rem;
- margin-left: 0.5rem;
- padding-left: 0;
- border-radius: .25rem;
- height: 47px;
- box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
- }
- .bmap-btn {
- border-right: 1px solid #d2d2d2;
- float: left;
- width: 64px;
- height: 100%;
- background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
- cursor: pointer;
- }
- .drawing-panel .bmap-marker {
- background-position: -65px 0;
- }
- .drawing-panel .bmap-polyline {
- background-position: -195px 0;
- }
- .drawing-panel .bmap-rectangle {
- background-position: -325px 0;
- }
- .drawing-panel .bmap-polygon {
- background-position: -260px 0;
- }
- .drawing-panel .bmap-circle {
- background-position: -130px 0;
- }
- </style>
- </html>
|