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

以下是一个简单的地理数据时空查询可视化的UI模板的CSS、HTML和JS代码示例：

#map {
  width: 100%;
  height: 600px;
}

#time-query {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#space-query {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

#results {
  margin-top: 250px;
  padding: 10px;
}

#results ul {
  list-style-type: none;
  padding-left: 0;
}

#results li {
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <title>地理数据时空查询可视化</title>
  <link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
  <div id='map'></div>

  <div id='time-query'>
    <h3>时间查询</h3>
    <label for='start-time'>起始时间:</label>
    <input type='date' id='start-time'>
    <label for='end-time'>终止时间:</label>
    <input type='date' id='end-time'>
    <button id='time-query-btn'>查询</button>
  </div>

  <div id='space-query'>
    <h3>空间查询</h3>
    <p>在地图上绘制一个多边形进行查询</p>
    <button id='space-query-btn'>开始绘制</button>
  </div>

  <div id='results'>
    <h3>查询结果</h3>
    <ul id='results-list'></ul>
  </div>

  <script src='script.js'></script>
</body>
</html>

// 初始化地图
function initMap() {
  // 在此处使用地图API初始化地图
}

// 时间查询按钮点击事件
document.getElementById('time-query-btn').addEventListener('click', function() {
  var startTime = document.getElementById('start-time').value;
  var endTime = document.getElementById('end-time').value;

  // 在此处进行时间查询操作

  // 展示查询结果
  showResults(['Result 1', 'Result 2', 'Result 3']);
});

// 空间查询按钮点击事件
document.getElementById('space-query-btn').addEventListener('click', function() {
  // 在地图上启用绘制多边形功能

  // 绘制完成后进行空间查询操作

  // 展示查询结果
  showResults(['Result 4', 'Result 5', 'Result 6']);
});

// 展示查询结果
function showResults(results) {
  var resultsList = document.getElementById('results-list');
  resultsList.innerHTML = '';

  results.forEach(function(result) {
    var li = document.createElement('li');
    li.textContent = result;
    resultsList.appendChild(li);
  });
}

// 页面加载完成后初始化地图
window.addEventListener('load', function() {
  initMap();
});

请注意，上述代码中的地图部分需要使用地图API来进行实际的地图初始化和绘制多边形操作。你需要根据你使用的具体地图API的文档来修改相应的代码。这里只提供了一个简单的模板，你可以根据自己的需求进行进一步的修改和定制。