地理数据时空查询可视化UI模板：时间和空间查询示例

以下是一个简单的地理数据时空查询可视化的UI模板的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>地理数据时空查询可视化</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
    <div class='container'>
        <div class='toolbar'>
            <div class='time-query'>
                <h3>时间查询</h3>
                <label for='start-time'>起始时间:</label>
                <input type='datetime-local' id='start-time'>
                <br>
                <label for='end-time'>终止时间:</label>
                <input type='datetime-local' id='end-time'>
                <br>
                <button id='time-query-btn'>查询</button>
            </div>
            <div class='spatial-query'>
                <h3>空间查询</h3>
                <button id='draw-polygon-btn'>绘制多边形</button>
            </div>
        </div>
        <div id='map'></div>
    </div>
    <script src='script.js'></script>
</body>
</html>

CSS代码（style.css）：

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
}

.toolbar {
    padding: 20px;
    background-color: #f0f0f0;
    width: 300px;
    border-right: 1px solid #ccc;
}

.time-query, .spatial-query {
    margin-bottom: 20px;
}

#map {
    flex: 1;
}

在上述示例中，使用了一个容器（container）来包含工具栏（toolbar）和地图（map）。工具栏包括时间查询（time-query）和空间查询（spatial-query）两个部分。时间查询部分包括起始时间和终止时间的输入框，以及一个查询按钮。空间查询部分包括一个绘制多边形的按钮。地图部分使用一个div元素（id为map）占据剩余的空间。

你可以根据需要进一步添加样式和功能，比如使用JavaScript实现绘制多边形的功能，以及在时间查询按钮被点击时执行查询操作等。