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

这是一个地理数据时空查询可视化UI模板的简单示例，包含CSS和HTML代码。该模板提供了一个基本框架，展示了如何使用HTML和CSS创建查询参数区域和地图区域。

HTML代码:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>地理数据时空查询可视化</h1>
    </div>
    <div class="main">
      <div class="sidebar">
        <h2>查询参数</h2>
        <form>
          <label for="location">地点：</label>
          <input type="text" id="location" name="location" placeholder="输入地点">

          <label for="time">时间范围：</label>
          <input type="date" id="start_time" name="start_time"> - 
          <input type="date" id="end_time" name="end_time">

          <button type="submit">查询</button>
        </form>
      </div>
      <div class="map">
        <!-- 在这里插入地图可视化的代码 -->
      </div>
    </div>
    <div class="footer">
      <p>版权所有 © 2021</p>
    </div>
  </div>
</body>
</html>

CSS代码（保存为style.css文件）：

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
}

.main {
  display: flex;
}

.sidebar {
  flex: 1;
  padding-right: 20px;
}

.sidebar h2 {
  margin-bottom: 10px;
}

.sidebar form {
  margin-bottom: 20px;
}

.map {
  flex: 2;
  border: 1px solid #ccc;
  height: 400px;
}

.footer {
  text-align: center;
  margin-top: 20px;
}

你可以将上述HTML代码保存为一个.html文件，将CSS代码保存为一个.css文件，然后用浏览器打开该.html文件，即可看到一个简单的地理数据时空查询可视化的UI界面。请注意，地图可视化的代码需要根据你使用的地图库或API进行相应的编写。