[wf9a5m75]

概要

既定マーカーアイコンに labelPosition を追加し、ラベルをピンの横・上・下に置けるようにしました。あわせて、タップしたときに「指の下に描かれているマーカー」を選ぶようにしました。

labelPosition

CSS の background-position と同じ書き方です（例: "right center"）。横は left / center / right、縦は top / center / bottom で、順序は問いません。片方だけ書いた場合、もう一方は center になります。

• left / right: ラベルをピンの外側に置きます。縦はピンの上端・頭の中心・先端のどれかに揃えます。
• center 列の top / bottom: ラベルをピンの上・下の外側に置きます。
• "center center"（既定）: ラベルをピンの頭に重ねます。従来と同じ表示です。

ラベルを片側に置くと、ビットマップはその側にだけ伸びます。そのため anchor（ピン先端の位置）は、固定の (0.5, 1) ではなくレイアウトから計算します。infoAnchor は、指定値をピン本体に対する割合として扱います。

タップ判定

1. タップ位置にアイコン（ラベル込み）が描かれているマーカーを優先します。重なっている場合は手前（画面上で下）のものを選びます。近くに別のマーカーの先端があっても同じです。
2. どのマーカーにも当たっていなければ、許容範囲内でアンカーが一番近いものを選びます。

候補は「先端が一番近い 1 つ」ではなく、タップ位置の周り（256px）から集めます。追加した部品はすべて @internal（ドライバー実装点）で、アプリ向けの公開 API には載りません。

• pickMarkerHit / preferMarkerHit / pickMarkerIndex / markerSearchBounds / MARKER_HIT_SEARCH_RADIUS_PX
• markerIconExtentPx: 当たり判定と吹き出しで、アイコンの実寸を使うための部品です。
• MarkerTileRenderer.findHit: タイル化マーカーの判定に、「真下にあったか」の区別を付けて返します。

android-sdk-core / ios-sdk-core にも、同じ規則で同じ変更を入れています（別 PR）。

確認（develop 上）

• npm run build と npm test は 14 件すべて成功しました（DefaultIconLabelPosition.test.mjs / MarkerHitPick.test.mjs を追加）。
• API ダンプは develop 上で出し直しました。今回の追加分のほかに、develop のソースから既に無くなっていた resolveCameraPosition の記述も消えています（ベースラインが以前からずれていた分）。
• develop の .gitignore は *.mjs を無視するので、追加したテストは強制追加しています。

マージ順

これがコアです。react-for-* と js-sdk-react の PR はこの PR に依存するので、先にこちらをマージしてください。

この PR に依存する PR

• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-arcgis#3
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-azuremaps#4
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-longdo#5
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-mapbox#5
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-maplibre#12
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-mappls#5
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-maptiler#6
• Pick the marker drawn under the tap, label included, and size the info bubble by the icon's real extent react-for-tomtom#5
• Size the info bubble by the icon's real extent react-for-cesium#3
• Size the info bubble by the icon's real extent react-for-googlemaps#4
• Size the info bubble by the icon's real extent react-for-here#3
• Size the info bubble by the icon's real extent react-for-leaflet#3
• Size the info bubble by the icon's real extent react-for-mapkit#3
• Size the info bubble by the icon's real extent react-for-openlayers#3
• Pass labelPosition through the React Native bridge js-sdk-react#3
• Depend on MapConductor 1.3.1 like the other bridges reactnative-for-maplibre#2
• Add a marker label position sample page react-sdk#19