MapBox：全屏时图例不起作用

Question

我在地图中有一个图例，当地图未全屏时工作正常，但当地图全屏时图例不显示。

重现

重现该行为的步骤：

打开地图，看到图例存在并且工作正常
点击全屏图标
图例不存在
再次单击全屏图标以移除全屏，现在图例出现并且工作正常

预期行为

图例在全屏时应该可以正常工作。

截图

正常屏幕，工作正常：

全屏，不显示图例：

其他上下文

codesandbox https://codesandbox.io/s/ecstatic-wave-c3qmg. You should open the link https://c3qmg.csb.app/ 上的代码示例在另一个页面上可以看到全屏图标。

代码摘录：

<template>
  <!-- MapBox map -->
  <MglMap
    ref="customMap"
    :mapStyle="map.mapStyle"
    :zoom="map.zoom"
    :center="map.center"
    :attributionControl="false"
    @mousemove="mouseMoved"
    @click="mapClick"
  >
    <MglFullscreenControl position="top-left" />
    <MglNavigationControl position="top-left" />
    <MglScaleControl position="bottom-left" />

    <!-- Custom html legend, using the feature selected-->
    <MapLegend :feature="selectedFeature" />

    <div
      v-for="geoJsonLayer in getGeoJsonLayers.mapLayers"
      :key="geoJsonLayer.id"
    >
      <!-- Fill geojson -->
      <MglGeojsonLayer
        :sourceId="geoJsonLayer.sourceId"
        :source="geoJsonLayer.source"
        :layerId="geoJsonLayer.layerId"
        :layer="geoJsonLayer.layer"
      />

      <!-- Source is not needed but the source id is needed :) when you are using an already defined source above -->
      <!-- Outline geojson -->
      <MglGeojsonLayer
        :sourceId="`${geoJsonLayer.outlineLayerId}-source`"
        :layerId="geoJsonLayer.outlineLayerId"
        :layer="geoJsonLayer.outlineLayer"
      />
    </div>
  </MglMap>
</template>

安装的节点包：

├── @highcharts/map-collection@1.1.3
├── @vue/cli-plugin-babel@4.2.3
├── @vue/cli-plugin-eslint@4.2.3
├── @vue/cli-service@4.2.3
├── axios@0.19.2
├── babel-eslint@10.1.0
├── bootstrap-vue@2.21.2
├── bootstrap@4.6.0
├── core-js@3.9.1
├── d3-drag@2.0.0
├── d3-force@2.1.1
├── d3@6.6.1
├── eslint-plugin-vue@6.2.2
├── eslint@6.8.0
├── highcharts-vue@1.3.5
├── highcharts@8.2.2
├── leaflet.heat@0.2.0
├── leaflet@1.7.1
├── mapbox-gl@0.53.1
├── moment-timezone@0.5.33
├── proj4@2.7.2
├── qs@6.10.1
├── vue-axios@2.1.5
├── vue-i18n@8.24.2
├── vue-mapbox@0.4.1
├── vue-router@3.5.1
├── vue-template-compiler@2.6.12
├── vue@2.6.12
└── vuex@3.6.2

Answer 1

默认情况下，Mapbox GL JS fullscreen control 仅使地图容器本身全屏显示。屏幕上的任何其他内容都将不可见。

因此您需要将容器元素作为 container 参数传递给 Vue-Mapbox 的 MglFullScreenControl，如下所示：

  <div id="mycontainer">
    <MglMap
      :accessToken="accessToken"
      :mapStyle="mapStyle"
      :zoom="zoom"
      :center="center"
      ref="map"
      class="default-map-xl"
    >
      <MglFullscreenControl position="top-left" :container="containerElement"/>
      <MapBoxLegend :selectedFeature="selectedFeature" />
    </MglMap>

可能有更好的方法来执行此操作，但您可以在安装组件后将该元素设置为数据属性。

  data() {
    return {
      //...
      containerElement: null
    };
  },  
  mounted() {
    this.containerElement = document.getElementById('mycontainer')
  }

我分叉了你的代码沙箱 here。

MapBox：全屏时图例不起作用

MapBox: Legend not working when full screen

mapbox

vue.js

mapbox-gl

mapbox-gl-js