MapConductorドキュメント / 基本 / Raster Layer
ラスターレイヤー
XYZ タイルのURLテンプレートを指定して、任意のタイルセットを地図に重ねます。地理院タイルなどの外部タイルをそのまま使えます。
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · 使い方
ソースにURLテンプレートを渡すだけです。透明度やズーム範囲はレイヤー側で制御します。
RasterLayerScreen.kt · Jetpack Compose
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)
}RasterLayerView.swift · SwiftUI
@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)
}RasterLayerPage.tsx · React
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 · 主なオプション
Option
Default
説明
template
—
{z}/{x}/{y} を含むタイルのURLテンプレート。
tileSize
512
タイルの1辺のピクセル数。
minZoom / maxZoom
なし
レイヤーを表示するズーム範囲。未指定なら全ズームで表示します。
attributionRules
[]
ズームや範囲に応じた出典表記のルール。source に指定します。
opacity
1.0
レイヤー全体の不透明度（レイヤー側の指定）。
visible
true
表示・非表示の切り替え。
zIndex
0
他のレイヤーとの重なり順。
userAgent
MapConductor/…
タイル取得時の User-Agent。対応状況はプロバイダによります（下表）。
extraHeaders
なし
タイル取得時に付ける追加ヘッダ。認証トークンなど。対応状況はプロバイダによります（下表）。
03 · ヘッダの対応状況
タイルを取りに行くのは各プロバイダの地図SDKで、リクエストを書き換える口があるかどうかはSDKごとに違います。口が無いプロバイダでは指定は無視され、実行時にログが出ます。下表はタイル要求を実際に受け取って確認した結果です（ネイティブは実機、Webはブラウザ）。
Webでは userAgent はどのプロバイダでも効きません。ブラウザが User-Agent の上書きを禁じているためで、SDK側で回避する方法はありません。プロパティ自体はReact Nativeのために残してあり、RNではネイティブSDKへ値が渡って実際に効きます。同じコードをWebとRNの両方で動かせるようにするための意図的な設計です。
Provider
iOS
Android
Web(extraHeaders)
備考
MapLibre
✓
✓
✓
iOS は MLNNetworkConfiguration、Android は OkHttp クライアントの差し替え、Web は maplibre-gl の transformRequest 経由。いずれもタイル配信ホスト宛のリクエストにだけ載ります。
MapTiler
✓
—
✓
iOS は MapLibre と同じ仕組み。Android の MapTiler SDK は WebView 上で動くため、ネイティブ側からヘッダを差し替えられません。
MapKit
✓
—
—
iOS 専用のプロバイダです。
HERE
✓
✓
—
iOS はヘッダ指定があるときだけローカルプロキシ経由になります（1ホップ増えます）。
Google Maps
userAgent
✓
—
Android は自前でタイルを取得するため両方使えます。iOS の GMSURLTileLayer は userAgent しか公開しておらず、extraHeaders は無視されます。
Mapbox
—
—
✓
iOS / Android のSDKにはリクエストを書き換える公開APIがありません。Web の mapbox-gl には transformRequest があるため、Webだけ対応しています。
ArcGIS
—
—
—
同上。
TomTom
—
—
—
同上。
Longdo
—
—
—
同上。
Leaflet
—
—
✓
Web専用。ヘッダ指定があるときだけ fetch でタイルを取り、blob に差し替えます。
OpenLayers
—
—
✓
Web専用。同上（tileLoadFunction を差し替え）。
Azure Maps
—
—
✓
Web専用。transformRequest 経由。
Cesium
—
—
✓（未計測）
Web専用。headers を持つ Resource を渡す実装ですが、サンプルアプリ側の別の不具合で実測できていません。
ヘッダが必須のタイルサーバを使う場合は、対応しているプロバイダを選んでください。非対応のプロバイダでも、URLのクエリパラメータにトークンを載せる方式なら利用できます。
04 · サンプル
地理院タイルの例
サンプルでは陰影起伏図と標準地図を切り替え、透明度をスライダーで変更しています。出典表記は attributionRules で自動的に切り替わります。
動画で見せる実装 · Android + MapLibreKotlin · Jetpack Compose
var opacity by remember { mutableFloatStateOf(0.75f) }
var relief by remember { mutableStateOf(true) }
val layerState = remember { RasterLayerState(id = "gsi-raster") }
// source も opacity も後から差し替えられる。レイヤーは作り直されない
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 })動画 未撮影外部のタイルサーバを重ね、ズームに合わせてタイルが差し替わっていく様子。