地理数据时空查询可视化UI模板：时间和空间查询功能实现

<!DOCTYPE html>
<html>
<head>
    <title>地理数据时空查询可视化UI模板</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="time-query">
            <h3>时间查询</h3>
            <label for="start-time">起始时间:</label>
            <input type="text" id="start-time" name="start-time">
<pre><code>        &lt;label for=&quot;end-time&quot;&gt;终止时间:&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;end-time&quot; name=&quot;end-time&quot;&gt;
    &lt;/div&gt;

    &lt;div class=&quot;space-query&quot;&gt;
        &lt;h3&gt;空间查询&lt;/h3&gt;
        &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
        &lt;button id=&quot;draw-polygon&quot;&gt;绘制多边形&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
</code></pre>
</body>
</html>
<p>/* style.css */
.container {
display: flex;
justify-content: space-between;
padding: 20px;
}</p>
<p>.time-query, .space-query {
width: 45%;
background-color: #f2f2f2;
padding: 10px;
}</p>
<p>#map {
width: 100%;
height: 300px;
background-color: #ccc;
}</p>
<p>button {
margin-top: 10px;
}</p>