MapBox Android版开发 4 国际化功能v11

前言

在前文MapBox地图样式v11中,使用StylelocalizeLabels方法本地化地图语言。但Mapbox Standard样式和Mapbox Standard Satellite样式仍显示英文。本文将介绍MapBox国际化功能的使用方法。

遇到的问题

在前文本地化样式时,使用了localizeLabels方法,源码如下:

fun MapboxStyleManager.localizeLabels(locale: Locale, layerIds: List<String>? = null) {
  if (styleURI == "mapbox://styles/mapbox/standard") {
    throw RuntimeException(
      "Mapbox Standard style does not support client-side runtime localization." +
        " Consider using Mapbox internationalization capability instead: https://www.mapbox.com/blog/maps-internationalization-34-languages"
    )
  }
  setMapLanguage(locale, this, layerIds)
}

通过源码可以看出,若尝试切换Mapbox Standard地图语言时,SDK会抛出异常,并给出提示:不支持客户端运行时本地化,考虑使用Mapbox 国际化功能……

Mapbox Standard style does not support client-side runtime localization.

Consider using Mapbox internationalization capability …

那么MapBox推荐的国际化功能是什么?又如何实现Mapbox Standard样式地图语言的切换?从异常给出的链接可以找到答案。

国际化功能

Dynamically Localize Your Maps with Our New Internationalization Capability(2022),摘取部分原文:

  • Mapbox Internationalization Makes Localizing Maps Easy.

  • No more building and maintaining hundreds of styles.

  • With a more finite number of styles, the map loads dynamically and more quickly based on the users device or browser.

  • Rendering is dynamic and fast based on preferences in the device or browser, so users do not need to manually select a language display on the map.

原文给出的方案(V10版)

// Create a settings service instance as PERSISTENT, the 
// language set will be persisted across the application lifecycle.
private val settingsService: SettingsServiceInterface by lazy {
    SettingsServiceFactory.getInstance(SettingsServiceStorageType.PERSISTENT)
}
val locale = context.getResources().getConfiguration().locale
// set language in bcp-47 tag
val language = locale.language().toLanguageTag();
settingsService.set(MapboxCommonSettings.LANGUAGE, Value(language))

// set worldview
val worldView = "US"
settingsService.set(MapboxCommonSettings.WORLDVIEW, Value(worldView))

migrate-to-v11

在V11版中SettingsServiceInterface没有定义,参考官网migrate-to-v11中的说明:

The interface SettingsServiceInterface has been removed in favor of class SettingsService. SettingsServiceFactory.getInstance(...) now returns the SettingsService class.

适用于V11版的代码

// Create a settings service instance as PERSISTENT,
// the language set will be persisted across the application lifecycle.
private val settingsService: SettingsService by lazy {
    SettingsServiceFactory.getInstance(SettingsServiceStorageType.PERSISTENT)
}
val locale = context.resources.configuration.locales[0]
// set language in bcp-47 tag
val language = locale.toLanguageTag()
settingsService.set(MapboxCommonSettings.LANGUAGE, Value(language))

// set worldview
val worldView = "CN"
settingsService.set(MapboxCommonSettings.WORLDVIEW, Value(worldView))
// worldview: CN (China), IN (India), JP (Japan), US (United States)

示例

MapStyle类

修改Style的本地化示例代码

package com.example.mapdemo

import android.content.Context
import com.mapbox.bindgen.Value
import com.mapbox.common.MapboxCommonSettings
import com.mapbox.common.SettingsService
import com.mapbox.common.SettingsServiceFactory
import com.mapbox.common.SettingsServiceStorageType
import com.mapbox.maps.MapboxMap
import com.mapbox.maps.Style
import com.mapbox.maps.extension.localization.localizeLabels
import java.util.Locale

class MapStyle(map: MapboxMap) {
    private var map = map

    // Create a settings service instance as PERSISTENT,
    // the language set will be persisted across the application lifecycle.
    private val settingsService: SettingsService by lazy {
        SettingsServiceFactory.getInstance(SettingsServiceStorageType.PERSISTENT)
    }

    fun changeStyle(context: Context, style: String) {
        map.loadStyle(style) {
            if (style != Style.STANDARD && style != Style.STANDARD_SATELLITE) {
                it.localizeLabels(Locale.CHINESE)
            } else {
                val locale = context.resources.configuration.locales[0]
                // set language in bcp-47 tag
                val language = locale.toLanguageTag()
                settingsService.set(MapboxCommonSettings.LANGUAGE, Value(language))

                val worldView = "CN"
                settingsService.set(MapboxCommonSettings.WORLDVIEW, Value(worldView))
            }
        }
    }
}

运行效果图

3D基础3D影像
在这里插入图片描述在这里插入图片描述
  • 24
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 和 Mapbox 是两个非常流行的工具,用于构建用户界面和提供强大的地图功能。Vue 是一个轻量级的前端框架,以其组件化开发和易于上手的特点受到开发者喜爱。Mapbox 则是一个提供了丰富的地图服务、地图样式和交互功能的平台。 当你将 Vue 与 Mapbox 结合使用时,可以实现以下几个关键点: 1. 安装依赖:首先,你需要在 Vue 项目中安装 `@vuegis/vue-mapbox-gl` 或者直接使用 Mapbox GL JS(原生库),这是官方推荐的 Vue 组件化解决方案。 2. 创建地图组件:创建一个 Vue 组件,例如 `Map.vue`,引入 Mapbox GL JS,并设置初始化地图的方法,包括设置中心位置、比例尺、地图样式等。 ```html <template> <div ref="map"></div> </template> <script> import { mapboxgl, Map } from '@vuegis/vue-mapbox-gl' export default { components: { MapboxGL: mapboxgl.Map, }, mounted() { this.createMap() }, methods: { createMap() { this.$refs.map .el .style = 'width: 100%; height: 400px;'; // 设置样式 const map = new Map(this.$refs.map, { center: [51.505, -0.09], // 地图中心点 zoom: 13, // 初始缩放级别 style: 'mapbox://styles/mapbox/streets-v11', // 使用预设样式 }); }, }, } </script> ``` 3. 动态数据绑定:Vue 的响应式系统使得地图可以根据数据变化动态调整,比如根据用户的输入改变地图视图或添加标记。 4. 图层和交互:Mapbox 提供了各种图层(如矢量图层、影像图层等)和交互元素(如点击事件、鼠标悬停事件),可以在 Vue 中轻松使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值