MapConductorKartendesign (Kacheln) wechseln
Das Aussehen der Karte wird allein durch mapDesignType bestimmt. Wählen Sie einen für den Anbieter vorbereiteten Preset oder geben Sie eine Style-JSON- und eine Tile-URL an, um ein eigenes Design zu definieren. Das Wechseln erfordert nur die Zuweisung an die Eigenschaft; die Karte muss nicht neu erstellt werden.
01 · Design-Typ
Jedes Design eines Anbienders implementiert MapDesignTypeInterface (unter iOS MapDesignTypeProtocol). Wenn Sie nur die drei gemeinsamen Elemente beachten, ist die Handhabung gleich, auch wenn sich der Anbieter ändert.
Wert zur Identifizierung des Designs. Ein nativer Wert des Anbieters (wie die mapType-Konstante von Google) oder eine Zeichenfolge.
Der tatsächliche Wert, der an die Karten-Engine des Anbieters übergeben wird. Enthält die URL des Styles-JSON oder Kacheldefinitionen.
Regeln zum Umschalten der Quellenangabe je nach Zoomstufe und Anzeigebereich. Erforderlich bei der Verwendung eigener Kacheln.
02 · Presets
In den Paketen der einzelnen Anbieter sind die für diesen Anbieter verfügbaren Standarddesigns als Konstanten enthalten. Die Beispiel-App verwendet diese Liste direkt als Auswahlmöglichkeiten.
iOS · React
React: MapboxDesign
Auf React: Streets · Outdoors · Light · Dark · SatelliteStreets, dazu Style-JSON aus der Familie OsmBright / MapTiler
iOS / React: ArcGISMapDesign
React: TomTomDesign
React hat zusätzlich StandardLight / Dark · DrivingLight / Dark · MonoLight / Dark
React
React
React
React
Es werden nur Unterschiede zwischen den Plattformen angemerkt. Zeilen ohne Anmerkung haben denselben Typnamen und denselben Konstantennamen für Presets auf allen drei Plattformen.
03 · Wechseln
Weisen Sie mapDesignType des Zustandsobjekts der Kartenansicht einen Wert zu. Da der Zustand überwacht wird, ändert sich das Aussehen der Karte zum Zeitpunkt der Zuweisung.
// state ist MapViewStateInterface<*>; vor der Zuweisung auf den Anbietertyp einengen
when (state) {
is GoogleMapViewStateInterface ->
state.mapDesignType = GoogleMapDesign.Satellite
is MapLibreViewStateInterface ->
state.mapDesignType = MapLibreDesign.OsmBrightJa
is MapTilerViewStateInterface ->
state.mapDesignType = MapTilerDesign.Toner
}// Das Anfangsdesign wird beim Erzeugen des State übergeben
@StateObject private var mapLibreState = MapLibreViewState(
mapDesignType: MapLibreDesign.DemoTiles,
cameraPosition: viewModel.initCameraPosition
)
// Der Wechsel ist nur eine Zuweisung an eine @Published-Property
mapLibreState.mapDesignType = MapLibreDesign.OsmBrightJaconst [mapViewState, setMapViewState] =
useState<MapViewStateInterface<MapDesignTypeInterface<unknown>> | null>(null);
const handleDesignChange = (designId: string) => {
const option = mapDesignOptions.find(item => item.design.id === designId);
if (!mapViewState || !option) return;
mapViewState.mapDesignType = option.design;
};04 · Ein benutzerdefiniertes Design definieren
Der Typ der Presets ist direkt als Konstruktor verfügbar. Wenn Sie eine ID und eine URL für die Style-JSON (Vektor) oder eine Tile-URL-Vorlage (Raster) übergeben, können Sie eigene Styles oder GSI-Tiles wie Presets verwenden.
// MapLibreDesign ist eine data class: Übergeben Sie eine Style-JSON-URL und Sie haben Ihr eigenes Design
val GsiPale =
MapLibreDesign(
id = "gsi-pale",
styleJsonURL = "https://example.com/styles/gsi-pale/style.json",
attributionRules =
listOf(
AttributionRule(attribution = "GSI-Kacheln"),
AttributionRule(attribution = "GEBCO", minZoom = 5, maxZoom = 8),
),
)private val mapLibreDesigns =
listOf(
MapDesignOption(label = "OsmBright", design = MapLibreDesign.OsmBright),
MapDesignOption(label = "GSI Pale", design = GsiPale),
)// Umhüllt die native mapType-Konstante unverändert und ergänzt nur die Quellenangabe
val NormalWithNotice =
GoogleMapDesign.Custom(
id = MAP_TYPE_NORMAL,
attributionRules = listOf(AttributionRule(attribution = "Eigene Daten 2026")),
)Bei Anbietern, bei denen die Kartenart durch native Konstanten bestimmt wird (z. B. Google Maps), verwenden Sie GoogleMapDesign.Custom und übergeben eine Konstante an id, um nur die Quellenangabe auszutauschen. MapTiler, Mapbox, HERE usw. verfügen ebenfalls über einen Konstruktor derselben Form.
// public init(id:styleJsonURL:attributionRules:) ist der Einstieg für ein eigenes Design
let gsiPale = MapLibreDesign(
id: "gsi-pale",
styleJsonURL: "https://example.com/styles/gsi-pale/style.json",
attributionRules: [
AttributionRule(attribution: "GSI-Kacheln"),
AttributionRule(attribution: "GEBCO", minZoom: 5, maxZoom: 8),
]
)private let mapLibreDesigns = [
MapDesignOption(label: "DemoTiles", design: MapLibreDesign.DemoTiles),
MapDesignOption(label: "GSI Pale", design: gsiPale),
]
// Beim Anwenden auf den Anbietertyp casten
if let design = option.design as? MapLibreDesign {
mapLibreState.mapDesignType = design
}Da es sich um eine Struktur handelt, definieren Sie sie mit let und teilen sie überall. Da MapDesignOption im ViewModel design: Any enthält, grenzen wir beim Anwenden mit as? auf den Typ des Anbieters ein.
const GSI_STANDARD_DESIGN = new LeafletDesign({
id: 'gsi-standard',
tileUrl: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
tileOptions: { minZoom: 5, maxZoom: 18, tileSize: 256 },
attributionRules: GSI_STANDARD_ATTRIBUTION_RULES,
});
export const LEAFLET_DESIGNS: MapDesignOption[] = [
{ label: 'OpenStreetMap', design: LeafletDesign.OpenStreetMap },
{ label: 'GSI Standard', design: GSI_STANDARD_DESIGN },
{ label: 'None', design: LeafletDesign.None },
];// new MapLibreDesign(id, styleJsonURL, attributionRules?)
const GSI_PALE = new MapLibreDesign(
'gsi-pale',
'https://example.com/styles/gsi-pale/style.json',
[{ attribution: GSI_ATTRIBUTION }],
);
export const MAPLIBRE_DESIGNS: MapDesignOption[] = [
{ label: 'OsmBrightJa', design: MapLibreDesign.OsmBrightJa },
{ label: 'GSI Pale', design: GSI_PALE },
];Leaflet wird mit Raster-Tiles definiert, MapLibre mit Style-JSON. Da die Metadaten des Designs im selben Pak liegen wie die schweren Laufzeit-SDKs der Anbieter, werden die Beispiele dynamisch importiert, um die Chunks zu trennen.
05 · Hinweis auf die Quelle (attributionRules)
Wenn Sie eigene Tiles verwenden, geben Sie die Namensbedingungen des Tile-Anbieters als Regeln an. Nur die erforderlichen Hinweise werden basierend auf Zoom und Anzeigebereich der Kamera automatisch ausgewählt.
06 · Beispiel-App
Alle 3 Plattformen enthalten eine UI zum Umschalten des Designs. Der Aufbau der UI ist auf jeder Plattform eine geradlinige Implementierung, nur die Zuweisungslogik ist gemeinsam.
val mapViewState = rememberMapLibreMapViewState(
mapDesign = MapLibreDesign.DemoTiles,
cameraPosition = MapCameraPosition(
position = GeoPoint.fromLatLong(21.382314, -157.933097),
zoom = 12.0,
),
)
val designs = listOf(
"Demo" to MapLibreDesign.DemoTiles,
"OSM Bright" to MapLibreDesign.OsmBrightJa,
"Toner" to MapLibreDesign.MapTilerTonerJa,
)
MapLibreMapView(state = mapViewState, modifier = Modifier.weight(1f))
Row {
designs.forEach { (label, design) ->
// Just an assignment. The map is not rebuilt, so the camera stays where it is
Button(onClick = { mapViewState.mapDesignType = design }) { Text(label) }
}
}