MapConductorCapa ráster
Especifique una plantilla de URL de mosaicos XYZ para superponer cualquier conjunto de mosaicos en el mapa. Puede usar mosaicos externos, como los mosaicos GSI, tal como están.
01 · Uso
Simplemente pase una plantilla de URL a la fuente. La transparencia y el rango de zoom se controlan en el lado de la capa.
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 · Opciones principales
03 · Compatibilidad de encabezados
La obtención de mosaicos la realiza el SDK de mapas de cada proveedor; la posibilidad de reescribir solicitudes varía según el SDK. En los proveedores que no disponen de esta opción, las especificaciones se ignoran y se registran mensajes durante el tiempo de ejecución. La tabla siguiente muestra los resultados de verificar las solicitudes de mosaicos (nativo en dispositivos reales, web en el navegador).
En la web, `userAgent` no funciona en ningún proveedor. Esto se debe a que los navegadores prohíben sobrescribir el User-Agent y el SDK no puede evitarlo. La propiedad en sí se mantiene por compatibilidad con React Native; en RN el valor se pasa al SDK nativo y realmente funciona. Este es un diseño intencional para permitir que el mismo código se ejecute tanto en la web como en RN.
Si utiliza un servidor de mosaicos que requiere encabezados, seleccione un proveedor compatible. Incluso con proveedores no compatibles, se puede utilizar si el token se incluye como un parámetro de consulta en la URL.
04 · Ejemplo
Ejemplo de mosaicos GSI
El ejemplo alterna entre el mapa de sombreado y el mapa estándar, y cambia la opacidad con un control deslizante. La atribución se cambia automáticamente mediante attributionRules.
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 })