如何让MapLibre GL在全屏模式下切换为可交互状态

MapLibre GL 初始化时传入的interactive: false本质是默认关闭所有地图交互处理器，不需要销毁重建地图实例，通过监听全屏状态变化动态启停交互处理器即可实现需求，全程不会丢失已添加的Marker、控件、图层资源。

• 保留现有初始化代码中interactive: false的配置，无需修改初始化参数
• 为地图容器绑定fullscreenchange事件监听，判断当前全屏状态
• 进入全屏时启用所有内置交互处理器，退出全屏时恢复禁用状态即可

完整修改代码 #

在你原有添加完FullscreenControl的代码后，追加对应逻辑即可：

const _map = new MapGL({
        container: elementName,
        style: this.maplibreGlDataFromJsonService.getMapStyleConstants(),
        center: [_lon, _lat],
        zoom: 9,
        interactive: false,
        transformRequest: (url: string, resourceType: any) => {
          return {
            url: url,
            headers: {
              'Authorization': 'Bearer ' + this.authService.accessToken,
              'mode': 'no-cors'
            }
          }
        }

      });
      let marker = new Marker()
        .setLngLat([_lon, _lat])
        .addTo(_map);

      var navigationBtns = new NavigationControl({showCompass: false, showZoom: false, visualizePitch: true});
      _map.addControl(navigationBtns, 'top-left');

      _map.addControl(new FullscreenControl({container: document.querySelector('.' + elementName)}));

      // 追加全屏交互控制逻辑
      const mapContainer = document.querySelector('.' + elementName);
      mapContainer.addEventListener('fullscreenchange', () => {
        const isInFullscreen = document.fullscreenElement === mapContainer;
        // 所有内置交互处理器列表
        const handlerList = [
          'dragPan', 'scrollZoom', 'boxZoom', 'dragRotate',
          'keyboard', 'doubleClickZoom', 'touchZoomRotate', 'touchPitch'
        ];
        handlerList.forEach(handlerName => {
          isInFullscreen 
            ? _map[handlerName].enable() 
            : _map[handlerName].disable();
        })
      });

注意事项 #

如果你后续为地图添加了其他交互能力（比如图形绘制、距离测量等第三方插件），只需要在上述fullscreenchange回调中对应调用插件的启用/禁用方法，即可同步适配全屏/非全屏的交互规则。
如果需要兼容极老旧浏览器版本，可以补充webkitfullscreenchange、mozfullscreenchange等带前缀的事件监听，现代浏览器已全部支持标准fullscreenchange事件，无需额外适配。

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