1. 地图的居中对齐和填充布局
- 地图区域在整个页面中被居中显示，填充整个屏幕的可视区域。这通常是通过 flex布局 或 CSS grid布局 实现的，结合
justify-content: center和align-items: center来水平和垂直居中。 - 地图本身会自动填满可用空间，保持响应性，可能使用了
position: relative配合width: 100%和height: 100vh的设置，以确保地图在浏览器窗口大小变化时仍能适应。
2. 浮动的工具栏和按钮
- 页面左侧和底部的几个按钮（放大镜、回退按钮、层级选择按钮等）是独立浮动的。它们的位置可能是通过 绝对定位（
position: absolute）实现的，以便于将它们固定在地图上某个具体的坐标。 z-index可能用于这些工具栏按钮，以确保它们始终显示在地图之上，而不被地图或其他元素覆盖。
3. 按钮组的相对布局和排列
- 底部的 Esri、BingMap、OSM 按钮看起来是成组显示的，应该是一个水平排列的 flexbox 容器。可能使用了
display: flex和justify-content: space-around或justify-content: center来让按钮均匀分布，且保持在页面底部。 - 它们的位置可能通过
position: absolute或position: fixed与底部对齐（例如bottom: 20px），确保这些按钮在页面滚动时保持固定位置。
4. 顶部菜单的相对和绝对布局
- 顶部菜单（“提交订单”、“开启/关闭Roi”）是悬浮在地图顶部的，通常是使用 绝对定位 或 固定定位（
position: fixed），使其在页面滚动时也保持在视窗顶部不动。 top和left属性可以用来精确控制这些按钮的位置，而z-index则用于确保它们位于地图之上，始终可见。
5. 图标和按钮的对齐
- 左侧一列工具栏图标的排列方式可以通过 垂直 flexbox 布局或 垂直对齐的 CSS 样式 实现，使所有按钮按顺序纵向排列。
- 这些按钮的位置可能是通过
position: fixed或position: absolute实现的，与地图内容相对布局，不会在地图移动时发生变化。
6. z-index 的应用
z-index在此页面中起着重要作用，确保悬浮按钮（如工具栏按钮和底部地图切换按钮）总是显示在地图之上。通常 z-index 值较高的元素会覆盖值较低的元素，确保了用户交互性和可视性。
7. 响应式设计
- 地图本身具有响应性，在不同屏幕尺寸上会自动缩放。可能使用了媒体查询（
@media）或者相对单位（如%或vh/vw）来确保在不同设备和分辨率上都能自适应。
8. CSS 动画效果
- 这些按钮在点击时可能有动画效果，比如放大、缩小或阴影变化，可以通过 CSS transitions 或 animations 实现。例如
transform: scale(1.1)可以用来实现按钮点击后的轻微放大效果。
总结
这个页面布局运用了多种前端布局技术，包括 flexbox、absolute positioning、z-index、relative positioning 和响应式布局等，确保了地图和悬浮工具栏按钮的交互性和可视性。