Mapbox で 路線を表示/ハイライト サンプル

やりたいこと

路線データを読み込んで、指定した路線をハイライトしたい

前提

Mapbox Studio で国交省から得られる 鉄道路線データ ( N02-20_RailroadSection ) を Tilesets として読み込んでおく

https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-2020.html

→ で、 takaaki024.76nc2sae という名前で登録されたとする

サンプルコード

swift

import SwiftUI
import MapboxMaps

struct MapboxView: View {
	@State private var highlightedRailwayNames = [
		"京王電鉄 京王線",
		"小田急電鉄 小田原線",
	]

	var body: some View {
		let center = CLLocationCoordinate2D(latitude: 35.6598, longitude: 139.702389)
		let camera = Viewport.camera(center: center, zoom: 13, bearing: 0, pitch: 0)

		Map(initialViewport: camera) {
			VectorSource(id: "railwaysSource")
				.url("mapbox://takaaki024.76nc2sae")

			LineLayer(id: "railwaysSource", source: "railwaysSource")
				.sourceLayer("N02-20_RailroadSection-ce1z6n")
				.lineColor(
					Exp(.switchCase) {
						Exp(.inExpression) {
							Exp(.concat) {
								Exp(.get) { "N02_004" }
								Exp(.literal) { " " }
								Exp(.get) { "N02_003" }
							}
							highlightedRailwayNames.map { $0 }
						}
						UIColor.red
						UIColor.lightGray
					}
				)
				.lineWidth(3)

		}
		.ignoresSafeArea()
	}
}