Skip to main content

データソースとレイヤ

背景​

試してサンプルコードいくつか書いてみるまでイメージが湧いていなかったが、
考え方がわかったように思うので、まとめ。

概要​

  • 「データソース」で 座標を定義
  • 「レイヤ」で その座標を使ってどう表示するかを記載する

※ Annotation との使い分けは「複数ピンを描画したい場合はこっち」で良さそうに思う

データソース​

種類データの用意しかたコード的には
GeoJSONSourceコードで動的に作成する.data(.featureCollection(<Featureの配列>))
VectorSourceMapbox Studio であらかじめ作成する.url("mapbox://<TilesetのID>")

GeoJSONSource は、GeoJSON を公開した外部 URL でも取得可能だが、省略

レイヤ​

#種類Annotation でいうと
1CircleLayerCircleAnnotation
2LineLayerPolylineAnnotation
3SymbolLayerSymbolAnnotation
4FillLayer-
5ClippingLayer (ない)-
6-MapViewAnnoation
横道：「#5」のような操作をやるには..（Google Maps で見るような、該当地域だけハイライトしたものを描画したい）

こんな GeoJSON を用意すれば良いらしい

json
...
"type": "Polygon",
"coordinates": [
[  [-180, -85], [180, -85], [180, 85], [-180, 85], [-180, -85] ],  // 外枠（世界全体）
[  [139.626, 35.663], [139.630, 35.656], [139.637, 35.660], .. ],  // 穴（ハイライト部分）→ 時計回りと逆に書く必要あり
],
...

サンプル​

VectorSource 版​

swift
VectorSource(id: "parks")
    .url("mapbox://takaaki024.99uywdyx")

CircleLayer(id: "parksPoint", source: "parks")
    .sourceLayer(parksTilesetLayerId)
    .circleRadius(7)
    .circleColor(UIColor.red)
    .circleStrokeColor(UIColor.white)
    .circleStrokeWidth(2)

GeoJSONSource 版​

swift
let features = waypoints.map { wp in
    Feature(geometry: .point(Point(wp.coord)))
}
GeoJSONSource(id: "waypoints")
    .data(.featureCollection(FeatureCollection(features: features)))

CircleLayer(id: "waypointsPin", source: "waypoints")
    .circleRadius(3)
    .circleColor(UIColor.blue)
Last updated on