地理数据时空查询可视化UI模板 - 可拖动时间和空间查询窗口 - 常规

<html>
<head>
  <title>地理数据时空查询可视化UI模板 - 可拖动时间和空间查询窗口</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      width: 100%;
      height: 600px;
      background-color: #f2f2f2;
    }
    #timeQueryWindow, #spaceQueryWindow {
      position: absolute;
      top: 20px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    #timeQueryWindow {
      left: 20px;
    }
    #spaceQueryWindow {
      right: 20px;
    }
    #timeQueryWindow input[type='date'] {
      margin-bottom: 10px;
    }
    #spaceQueryWindow #drawButton {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div id='map'></div>
  <div id='timeQueryWindow'>
    <h3>时间查询</h3>
    <label for='startDate'>起始时间：</label>
    <input type='date' id='startDate'>
    <label for='endDate'>终止时间：</label>
    <input type='date' id='endDate'>
  </div>
  <div id='spaceQueryWindow'>
    <h3>空间查询</h3>
    <p>在地图上绘制多边形后进行查询</p>
    <button id='drawButton'>开始绘制</button>
  </div>
  <script>
    // 在这里添加地图和查询功能的JavaScript代码
  </script>
</body>
</html>
<p>这是一个简单的模板，你可以根据实际需求进行自定义和扩展。</p>