如何使用MapBox避免地图加载前出现黑屏闪烁？

Question

当我从DrawerLayout中点击时，我正在加载Mapbox到我的片段中。

  @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.map_fragment, container, false);


    }

  @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        bindUI(getView());        mapView = view.findViewById(R.id.mapView);

        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(map -> {
            mapboxMap = map;

            setUpMap();
        });

    }

 @Override
    public void onStart() {
        super.onStart();
        mapView.onStart();

    }

    @Override
    public void onStop() {
        super.onStop();
        mapView.onStop();

    }


    @Override
    public void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
        mapView.onPause();
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        mapView.onDestroy();

    }

    @Override
    public void onSaveInstanceState(@NonNull Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

这是我在片段中使用Mapbox加载地图的代码。每当我从导航抽屉中改变片段时，会出现一闪而过的黑屏，然后地图被加载。

如果我加载其他片段而不是地图片段，则完全正常工作。

提前致谢。

- Pragya Mendiratta

---

这是由于GL渲染表面的初始化而发生的。目前我想不到任何解决方法，但您可以关注此链接https://github.com/mapbox/mapbox-gl-native/issues/10990以获取解决方案。 - Łukasz Paczos

有一个技巧可以做到这一点，那就是使用TextureView作为渲染表面，并将背景设置为透明。 - Tobrun

应用程序：mapbox_renderTextureMode - hamid Mahmoodi

Answer 1

看起来原生不可能，但你可以按照 mapBox 的文档进行解决。

请参考 此文档：解决带有黑色背景的光栅图像问题。

黑色背景出现的原因：出现的黑色背景是光栅图像中不包含任何数据的部分。通常，光栅图像是由像素组成的矩形网格。当您处理的数据不是矩形时，网格内存在不包含任何数据的像素。这些像素被表示为NoData值，并代表数据的缺失。上传到Mapbox Studio的GeoTIFF以JPEG格式显示，以节省空间并使地图加载更快。由于JPEG无法显示透明度，NoData值会呈现为黑色。

在Mapbox Studio中无法更改NoData值的外观，但有两种策略可以在Mapbox Studio之外解决此问题。首先，您可以使用Mapbox GL JS检索PNG而不是JPEG。如果这样做不起作用，您可以使用Rasterio编辑原始图像。

- sugaith

---

应用程序：mapbox_renderTextureMode - hamid Mahmoodi

Answer 2

您可以在 Mapbox 地图上放置一个带有“地图正在加载...”的 TextView，并在 onMapReady 后隐藏它，例如：

@Override
public void onMapReady(MapboxMap mapboxMap) {
    mapLoadingOverview.postDelayed(new Runnable() {
        public void run() {
            mapLoadingOverview.setVisibility(View.GONE);
        }
    }, 1000); 
}

XML

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapboxMapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="53.873900"
        mapbox:mapbox_cameraTargetLng="10.683876"
        mapbox:mapbox_cameraZoom="15"
        mapbox:mapbox_styleUrl="@string/mapbox_style_light" />

    <TextView
        android:id="@+id/mapLoadingOverview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/subwhite"
        android:text="@string/mapOverlayText"
        android:gravity="center"
        android:textColor="@color/maincolor"
        android:textSize="@dimen/mapOverlayTextSize"
        android:visibility="visible" />
</FrameLayout>

- P-Zenker