Mapbox RasterLayout中ImageSource对齐：旋转位图后出现缝隙如何解决

问题根源 #

你提前对位图执行旋转操作时，Bitmap.createBitmap 生成的旋转后位图会自动裁剪多余的透明边缘，导致实际有效图像尺寸小于你绑定的 LatLngQuad 范围，因此瓦片拼接时会出现缝隙。提前旋转位图本身是不必要的操作，完全可以通过Mapbox原生能力实现旋转效果，避免图像尺寸变化。

可行解决方案 #

方案1（最推荐）：使用RasterLayer原生旋转属性，不修改原始位图 #

Mapbox的RasterLayer本身支持旋转配置，你不需要提前处理位图，直接用原始未旋转的位图绑定原有的轴对齐LatLngQuad，再给RasterLayer设置旋转属性即可，不会出现缝隙也不会有变形。

方案2：调整LatLngQuad顶点适配旋转 #

如果不想用图层旋转属性，你可以将原有LatLngBounds的四个角点绕瓦片中心点旋转对应角度，生成旋转后的LatLngQuad，再绑定原始未旋转的位图，Mapbox会自动将图像适配到旋转后的四边形范围内，同样不会产生缝隙。

方案3（不推荐）：旋转后扩大绑定范围 #

如果坚持要提前旋转位图，你需要计算旋转后位图的宽高增量，将原有LatLngBounds向外扩展对应比例，抵消旋转后位图的透明边距影响，保证旋转后的图像刚好填满绑定范围。

优化后代码示例（基于方案1修改） #

for (MMapTile mapTile : offlineMap.mapTiles) {
    try {
        final MMapTile tile = realm.copyFromRealm(mapTile);
        final LatLngBounds bounds = new LatLngBounds.Builder()
                .include(new LatLng(tile.south, tile.west))
                .include(new LatLng(tile.north, tile.east)).build();
        LatLng latLngOne = new LatLng(bounds.getNorthWest());
        LatLng latLngTwo = new LatLng(bounds.getNorthEast());
        LatLng latLngThree = new LatLng(bounds.getSouthEast());
        LatLng latLngFour = new LatLng(bounds.getSouthWest());
        LatLngQuad latLngQuad = new LatLngQuad(latLngOne, latLngTwo, latLngThree, latLngFour);

        Glide.with(activity)
                .asBitmap()
                .load(tile.local)
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                        fitBounds(activity, mapboxMap, bounds);
                        // 移除手动旋转位图逻辑，直接用原始位图创建ImageSource
                        ImageSource imageSource = new ImageSource(tile.id, latLngQuad, resource);
                        mapboxMap.getStyle().addSource(imageSource);
                        // 移除多余的addImage调用，RasterLayer不需要单独添加图片资源
                        RasterLayer rasterLayer = new RasterLayer(tile.id, tile.id);
                        // 给RasterLayer设置旋转属性，角度和你之前的旋转值保持一致
                        float rotateAngle = tile.rotation == null ? 0 : -tile.rotation;
                        rasterLayer.setProperties(PropertyFactory.rasterRotate(rotateAngle));
                        mapboxMap.getStyle().addLayer(rasterLayer);
                        tileIds.add(tile.id);
                    }
                });
    } catch (Exception e) {
        Log.e(TAG, e.getMessage());
    }
}

效果参考 #

• 预选待下载瓦片界面：
  
• 原有方案旋转后出现缝隙的效果：
  

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