MapConductorเลเยอร์แรสเตอร์
ระบุเทมเพลต URL ของไทล์ XYZ เพื่อวางซ้อนชุดไทล์ใดๆ บนแผนที่ สามารถใช้ไทล์ภายนอก เช่น ไทล์ GSI ได้โดยตรง
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 สำหรับผู้ให้บริการที่ไม่มีวิธีดังกล่าว การระบุจะถูกละเว้นและจะมีการแสดงบันทึกในขณะทำงาน ตารางด้านล่างแสดงผลลัพธ์จากการตรวจสอบคำขอไทล์จริง (เนทีฟบนอุปกรณ์จริง เว็บบนเบราว์เซอร์)
บนเว็บ `userAgent` จะไม่ทำงานกับผู้ให้บริการใดๆ เนื่องจากเบราว์เซอร์ห้ามการเขียนทับ User-Agent และ SDK ไม่สามารถหลีกเลี่ยงได้ คุณสมบัตินี้ยังคงไว้เพื่อ React Native และบน RN ค่าจะถูกส่งไปยัง native SDK และทำงานได้จริง นี่เป็นการออกแบบโดยตั้งใจเพื่อให้โค้ดชุดเดียวทำงานได้ทั้งบนเว็บและ RN
หากคุณใช้เซิร์ฟเวอร์ไทล์ที่จำเป็นต้องมีส่วนหัว โปรดเลือกผู้ให้บริการที่รองรับ สำหรับผู้ให้บริการที่ไม่รองรับ คุณสามารถใช้งานได้หากส่งโทเค็นผ่านพารามิเตอร์การค้นหาใน URL
04 · ตัวอย่าง
ตัวอย่างไทล์ GSI
ตัวอย่างสลับระหว่างแผนที่เงาและแผนที่มาตรฐาน และเปลี่ยนความโปร่งใสด้วยสไลเดอร์ การระบุแหล่งที่มาจะเปลี่ยนโดยอัตโนมัติผ่าน 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 })