如何在Mapbox地图顶部放置不阻挡交互的绝对定位矩形

需要在Mapbox地图容器上添加相对容器绝对定位的固定矩形，当前直接叠加DOM元素的实现会导致矩形区域阻挡地图缩放、拖拽等交互。
原有实现代码：

<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {  top: 0; bottom: 0; width: 500px; height: 400px; position: relative; }
#container {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}
</style>
</head>
<body>
<div id="map">
<div id="container">
     <div style="width:300px;height:200px;border:1px solid #000;">test</div>
   </div> 
<script>
    mapboxgl.accessToken = 'XXX';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
})
</script>
</div>
</body>
</html>

注：原有代码未给地图容器设置position: relative，会导致绝对定位的矩形相对body偏移，已在上述代码中补全。

方案1：CSS事件穿透（改动最小，优先使用） #

给叠加的固定定位容器添加pointer-events: none属性，让鼠标事件直接穿透该元素落到下方地图上，完全不影响地图缩放、拖拽操作。
修改后的#container样式代码：

#container {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 新增该行即可实现事件穿透 */
}

如果矩形内部存在按钮、输入框等需要响应鼠标交互的元素，给对应子元素单独设置pointer-events: auto就能恢复其交互能力，不会影响其他区域的事件穿透。

方案2：Mapbox自定义图层绘制（无额外DOM元素） #

如果不想通过叠加DOM实现，可以用Mapbox内置的自定义图层直接在地图画布上绘制固定位置矩形，这种方式天然不会阻挡地图交互。
地图加载完成后添加如下代码即可：

map.on('load', () => {
  map.addLayer({
    id: 'fixed-center-rect',
    type: 'custom',
    render: function () {
      const canvas = map.getCanvas()
      const ctx = canvas.getContext('2d')
      const rectW = 300, rectH = 200
      const startX = (canvas.width - rectW) / 2
      const startY = (canvas.height - rectH) / 2
      ctx.save()
      ctx.strokeStyle = '#000'
      ctx.lineWidth = 1
      ctx.strokeRect(startX, startY, rectW, rectH)
      ctx.restore()
      map.triggerRepaint()
    }
  })
})

两种方案都能实现和参考示例一致的固定居中矩形效果，方案1代码改动量最小，性能开销最低，绝大多数场景选这个就够。

内容的提问来源于stack exchange，提问作者kabouter