【SwiftUI】MapStyleについて調べた（iOS17）

# はじめに

# 本記事のベースコード
```swift
import SwiftUI
import MapKit

struct ContentView: View {
    // 東京駅の座標
    @State private var position: MapCameraPosition = .region(.init(
        center: .init(latitude: 35.681236, longitude: 139.767125),
        span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
    ))

    var body: some View {
        Map(position: $position)
            .mapStyle( /* ここにスタイルを指定 */ )
    }
}
```

# スタイル
|`.standard`|`.imagery`|`.hybrid`|
|-|-|-|
|![simulator_screenshot_CEE0EE75-286D-4EDA-B830-91D6230C090B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b283fa2d-7fe9-eb59-b9c7-b76b2e52f226.png)|![Simulator Screenshot - iPhone 15 - 2023-11-27 at 21.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/631eeaab-b17c-92e3-56a8-20dd04836d1b.png)|![simulator_screenshot_70F2695E-C573-41AD-B433-331CBD552975.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/03a6bf73-6e07-75a0-6e94-cab73e603b70.png)|

### `.standard`
```swift
.mapStyle(.standard(elevation: , emphasis: , pointsOfInterest:, showsTraffic: ))
```

- `elevation`: マップの標高のレンダリング方法を指定する
- `emphasis`: マップの特徴を強調する方法を制御する
- `pointsOfInterest`: 地図上に表示される[PointOfInterestCategories](https://developer.apple.com/documentation/mapkit/pointofinterestcategories)を指定する
- `showsTraffic`: マップにトラフィックを表示するかどうかを指定する

### `.imagery`
```swift
.mapStyle(.imagery(elevation: ))
```

- `elevation`: マップの標高のレンダリング方法を指定する

### `.hybrid`
```swift
.mapStyle(.hybrid(elevation: , pointsOfInterest: , showsTraffic: ))
```

- `elevation`: マップの標高のレンダリング方法を指定する
- `pointsOfInterest`: 地図上に表示される[PointOfInterestCategories](https://developer.apple.com/documentation/mapkit/pointofinterestcategories)を指定する
- `showsTraffic`: マップにトラフィックを表示するかどうかを指定する

## elevationについて
standardだと違いがわかりませんでした
imageryだとこんな感じの違いがある
|`flat`|`realistic`|
|-|-|
|![simulator_screenshot_823AF141-D039-4286-9D44-B4DFCC3B87CC.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1e613f84-9c1c-29ac-7ed2-f9326d834acd.png)|![simulator_screenshot_BD5F6441-DCF1-4FB0-99BD-EC8D6EB26097.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/38bcb1eb-d550-3fa9-14a9-d3a7f6e49d6b.png)|

## emphasisについて
ちょっと色が薄くなった
|`automatic`|`muted`|
|-|-|
|![simulator_screenshot_0A1C567D-A0A1-45E7-AEEC-DB266BF125FF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6da47f56-fb12-c8a7-1366-7e56f10a9f3c.png)|![simulator_screenshot_EB00EB31-BE11-42BF-A3A7-C704EF77CEC4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1a31c48a-6653-a8e7-f972-3e16d9700baf.png)|

## pointsOfInterestについて
建物のマークが消えてますね
|`all`|`excludingAll`|
|-|-|
|![simulator_screenshot_0A1C567D-A0A1-45E7-AEEC-DB266BF125FF.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/6da47f56-fb12-c8a7-1366-7e56f10a9f3c.png)|![simulator_screenshot_19BBCE0D-406C-4725-99E9-0FD2BF40E114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1a03984b-b7a0-146d-29cf-90360e7bd9fd.png)|

## showsTrafficについて
デフォルトは`false`です
|`false`|`true`|
|-|-|
|![simulator_screenshot_4755303D-6421-4451-91C2-390368619786.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/66d41780-8153-c5c5-6ffe-c2a45a577cd5.png)|![simulator_screenshot_14F31306-6AB6-429D-9FDA-A3F39C55BFB8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/53af814f-e71d-bda1-d046-45405fc91902.png)|

# おわり
iOS17からMapKitがめっちゃ便利になったので活用してアプリ作ってみたいです

# 公式ドキュメント
https://developer.apple.com/documentation/mapkit/mapstyle