MapConductorRasterebene
Geben Sie eine URL-Vorlage für XYZ-Kacheln an, um beliebige Kachelsets über die Karte zu legen. Externe Kacheln wie die des Geospatial Information Authority of Japan können direkt verwendet werden.
01 · Verwendung
Übergeben Sie einfach eine URL-Vorlage an die Quelle. Transparenz und Zoombereich werden auf Seitenebene gesteuert.
val rasterLayerState = RasterLayerState(
id = "gsi-raster",
source = RasterLayerSource.UrlTemplate(
template = "https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
tileSize = 256,
minZoom = 5,
maxZoom = 15,
),
opacity = 0.75f,
)
MapLibreMapView(state = mapState) {
RasterLayer(rasterLayerState)
}@StateObject private var layerState = RasterLayerState(
source: .urlTemplate(
template: "https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",
tileSize: 256,
minZoom: 5,
maxZoom: 15
),
opacity: 0.75,
id: "gsi-raster"
)
MapLibreMapView(state: mapState) {
RasterLayer(state: layerState)
}import { RasterLayerSource, createRasterLayerState } from '@mapconductor/js-sdk-core';
import { RasterLayer } from '@mapconductor/js-sdk-react';
const state = useMemo(() => createRasterLayerState({
id: 'gsi-raster',
source: RasterLayerSource.UrlTemplate({
template: 'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
tileSize: 256,
minZoom: 5,
maxZoom: 15,
attributionRules: [...GSI_RELIEF_ATTRIBUTION_RULES],
}),
opacity,
}), [opacity]);
<RasterLayer state={state} />02 · Wichtige Optionen
03 · Header-Unterstützung
Das Abrufen der Kachel erfolgt über das Map-SDK des jeweiligen Anbieters. Ob es eine Möglichkeit zum Umschreiben von Anfragen gibt, unterscheidet sich je nach SDK. Bei Anbietern ohne solche Möglichkeit werden die Angaben ignoriert und zur Laufzeit Protokolle ausgegeben. Die folgende Tabelle zeigt das Ergebnis der tatsächlichen Überprüfung der Kachelanforderungen (Native auf echten Geräten, Web im Browser).
Im Web funktioniert `userAgent` bei keinem Anbieter. Das liegt daran, dass Browser das Überschreiben des User-Agents verbieten, und es gibt keine Möglichkeit zur Umgehung auf SDK-Seite. Die Eigenschaft selbst bleibt aus Gründen der Kompatibilität mit React Native erhalten; unter RN wird der Wert an das native SDK weitergegeben und funktioniert tatsächlich. Dies ist eine beabsichtigte Designentscheidung, damit derselbe Code sowohl im Web als auch unter RN ausgeführt werden kann.
Wenn Sie einen Kachelserver verwenden, der Header erfordert, wählen Sie einen unterstützten Anbieter. Bei nicht unterstützten Anbietern können Sie ihn nutzen, wenn das Token als URL-Abfrageparameter übergeben wird.
04 · Beispiel
Beispiel für GSI-Kacheln
Das Beispiel wechselt zwischen Schummerungskarte und Standardkarte und ändert die Transparenz mit einem Schieberegler. Die Quellenangabe wird automatisch über attributionRules umgeschaltet.
var opacity by remember { mutableFloatStateOf(0.75f) }
var relief by remember { mutableStateOf(true) }
val layerState = remember { RasterLayerState(id = "gsi-raster") }
// Both source and opacity can be reassigned; the layer is not rebuilt
LaunchedEffect(relief, opacity) {
layerState.source = RasterLayerSource.UrlTemplate(
template = if (relief) {
"https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png"
} else {
"https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
},
tileSize = 256,
minZoom = 5,
maxZoom = 15,
)
layerState.opacity = opacity
}
MapLibreMapView(state = mapViewState) {
RasterLayer(layerState)
}
Slider(value = opacity, onValueChange = { opacity = it })
Switch(checked = relief, onCheckedChange = { relief = it })