地理数据时空查询UI模板：可视化绘制多边形、时间范围选择

以下是一个简单的地理数据时空查询可视化的UI模板的CSS和HTML示例:\n\nCSS代码:\ncss\nbody {\n font-family: Arial, sans-serif;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\n.query-window {\n position: absolute;\n top: 50px;\n left: 50px;\n width: 250px;\n background-color: #f1f1f1;\n border: 1px solid #ccc;\n padding: 10px;\n}\n\n.time-query {\n margin-bottom: 20px;\n}\n\n.time-query label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n.time-query input {\n width: 100%;\n padding: 5px;\n border: 1px solid #ccc;\n}\n\n.space-query {\n margin-bottom: 20px;\n}\n\n.space-query label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n.space-query .map {\n width: 100%;\n height: 300px;\n border: 1px solid #ccc;\n}\n\n.space-query .map-drawing {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n.button {\n background-color: #4CAF50;\n color: white;\n padding: 8px 12px;\n border: none;\n cursor: pointer;\n}\n\n.button:hover {\n background-color: #45a049;\n}\n\n\nHTML代码:\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n <div class="container">\n <div class="query-window">\n <div class="time-query">\n <label for="start-time">起始时间:</label>\n <input type="text" id="start-time" name="start-time">\n <label for="end-time">终止时间:</label>\n <input type="text" id="end-time" name="end-time">\n </div>\n <div class="space-query">\n <label for="map">空间查询:</label>\n <div class="map">\n <div class="map-drawing"></div>\n </div>\n </div>\n <button class="button">查询</button>\n </div>\n </div>\n</body>\n</html>\n\n\n请注意，这只是一个简单的示例，可能需要根据实际需求进行进一步的设计和调整。