Compose Mapbox 禁用比例尺：两种方法

2024-12-26 13:39:29

禁用 Mapbox 地图比例尺 (Android Jetpack Compose)

Mapbox Android SDK 在地图上默认显示一个比例尺，这个比例尺有助于用户理解地图上的距离。不过，在某些应用场景中，可能需要隐藏它。本文讨论如何在使用 Jetpack Compose 的 Mapbox 地图组件中禁用这个比例尺。

问题分析

问题集中在如何在使用 Mapbox SDK 的 Android Jetpack Compose 实现中去除地图上默认的比例尺显示。查看 Mapbox SDK 的文档，并没有直接提供方法或属性用于显式关闭比例尺，这会让部分开发者困扰。经过分析，可以确认：Mapbox 比例尺是地图 UI 的一部分，需要通过对地图视图的设置来进行调整。

解决方案

针对这个问题，主要有以下两种解决方法：

方法一：通过 style 移除比例尺组件

此方法是通过移除地图样式中比例尺的定义来禁用显示。由于地图样式的 JSON 中包含了各种 UI 组件（如比例尺、指南针、logo等），通过修改样式可以直接影响这些组件的显示与隐藏。

操作步骤:

获取当前的地图样式 : 从 MapboxMap 组件获取 mapView，然后通过 getStyle() 函数得到当前的地图样式对象。
创建新样式 JSON : 构建新的样式 JSON，确保其中不包含比例尺组件的定义。可以创建一个基于原始样式并移除相应图层定义的新 JSON 字符串。
设置新的样式 : 通过setStyle 方法应用这个新的样式。

代码示例：

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import com.mapbox.maps.MapInitOptions
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Style
import com.mapbox.maps.extension.compose.MapboxMap
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState
import com.mapbox.maps.extension.compose.MapEffect
import org.json.JSONObject

@Composable
fun MapViewActivity() {
   val mapViewportState = rememberMapViewportState()
     MapboxMap(
        Modifier.fillMaxSize(),
        mapViewportState = mapViewportState
    ) {
         MapEffect(Unit) { mapView ->
             val currentStyle = mapView.getStyle()
             if(currentStyle != null){
                 LaunchedEffect(Unit){
                    val styleJsonString = currentStyle.styleSource
                    val newStyleJson = JSONObject(styleJsonString)
                    // 遍历 style json，删除带有 scale 字样的 layer 节点
                    val layers = newStyleJson.getJSONArray("layers")
                     var indexToDelete = -1
                    for(i in 0 until layers.length()){
                         val layer = layers.getJSONObject(i)
                         val id  = layer.optString("id","").lowercase()
                         if(id.contains("scale")){
                             indexToDelete = i;
                             break
                         }
                    }
                     if(indexToDelete >= 0){
                        layers.remove(indexToDelete)
                         // 将删除了layer节点的json转为字符串 设置给mapbox
                         mapView.setStyle(Style.Builder().fromJson(newStyleJson.toString()))
                     }

                 }

            }


         }
   }
}

方法二：隐藏 View 覆盖显示区域

此方法是另一种策略，创建一个覆盖在地图上的透明或半透明的 View，将地图比例尺覆盖。通过在 Compose 中实现一个覆盖层，利用其层级关系将比例尺隐藏。这种方法比第一种方法直接覆盖地图比例尺的区域更快捷。

操作步骤:

定位比例尺: 需要大致知晓比例尺组件在地图中的位置和大小（通常位于地图底部，宽度适中）。
创建覆盖View: 使用 Compose 的 Box 或 FrameLayout 这样的布局组件，创建一个半透明的 Box 或其他的View，定位在比例尺所在区域上方，利用zIndex改变叠加层级。
调整透明度 : 可以调整覆盖层的透明度以保证效果，例如将透明度设为半透明可以保留背景部分可见。

代码示例:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import com.mapbox.maps.extension.compose.MapboxMap
import com.mapbox.maps.extension.compose.animation.viewport.rememberMapViewportState

@Composable
fun MapViewActivity() {
  val mapViewportState = rememberMapViewportState()
   Box(Modifier.fillMaxSize()){
        MapboxMap(
            Modifier.fillMaxSize(),
           mapViewportState = mapViewportState,

        )

       Box(
           Modifier
               .zIndex(1000f)  // 确保覆盖层在地图之上
               .offset(y = (-45).dp)  // 调整偏移以精确覆盖比例尺 (注意： 需要根据实际的样式，设备屏幕，调整y轴offset值，以覆盖住比例尺)
                .size(width = 250.dp, height = 45.dp)   // 根据比例尺调整宽度和高度，调整为能够覆盖整个比例尺宽度的高度
                .background(Color.Transparent),
       )

    }


}