MapConductorरेस्टर लेयर
XYZ टाइल के URL टेम्पलेट निर्दिष्ट करके, किसी भी टाइल सेट को मानचित्र पर ओवरले करता है। भौगोलिक सर्वेक्षण टाइल आदि बाहरी टाइल को यथावत उपयोग किया जा सकता है।
01 · उपयोग
स्रोत में URL टेम्पलेट पास करना ही काफी है। पारदर्शिता और ज़ूम रेंज लेयर के तरफ से नियंत्रित होते हैं।
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 · मुख्य विकल्प
03 · हेडर की संगतता
टाइल प्राप्त करने का काम प्रत्येक प्रदाता के मानचित्र SDK द्वारा किया जाता है, और अनुरोध को बदलने का कोई तरीका है या नहीं, यह SDK पर निर्भर है। जिन प्रदाताओं के पास यह तरीका नहीं है, वहां निर्दिष्ट किया गया मान अनदेखा किया जाता है और रनटाइम पर लॉग आता है। नीचे दी गई तालिका वास्तव में टाइल अनुरोध प्राप्त करके पुष्टि किए गए परिणाम हैं (नेटिव के लिए वास्तविक डिवाइस, Web के लिए ब्राउज़र)।
Web में userAgent किसी भी प्रदाता पर काम नहीं करता। ऐसा इसलिए है क्योंकि ब्राउज़र User-Agent को ओवरराइड करने की अनुमति नहीं देता, और SDK की तरफ से इसे बायपास करने का कोई तरीका नहीं है। स्वयं प्रॉपर्टी को React Native के लिए रखा गया है, जहां RN में यह मान नेटिव SDK को पास होता है और वास्तव में काम करता है। यह एक ही कोड को Web और RN दोनों पर चलाने के लिए एक जानबूझकर किया गया डिज़ाइन है।
यदि आप हेडर आवश्यक वाले टाइल सर्वर का उपयोग कर रहे हैं, तो कृपया एक समर्थित प्रदाता चुनें। गैर-समर्थित प्रदाताओं के लिए भी, यदि URL के क्वेरी पैरामीटर में टोकन शामिल करने की विधि है, तो आप इसका उपयोग कर सकते हैं।
04 · सैंपल
भौगोलिक सर्वेक्षण संस्थान टाइल का उदाहरण
सैंपल में राहत मानचित्र और मानक मानचित्र के बीच स्विच किया जाता है और स्लाइडर के साथ पारदर्शिता बदली जाती है। स्रोत नोटेशन 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 })