前回の説明では、地図上でマーカーを設定して緯度経度を収集する方法を紹介しました。今回からは、収集した複数のエンティティの位置情報に対して、一度にマーカーを表示する方法について説明します。
具体的には以下の2点を説明します：
- 複数のマーカーを地図上に表示する方法
- マーカーに詳細情報を表示するタグの実装方法
以下に示すprocedureは、データセットから取得したデータを元に地図上にマーカーを配置します。
procedure TMarkerMapFrame.DisplayAllMarkers;
var
mrk: TCCuniGUIAMap.TMarker;
begin
with UniMainModule do
begin
query.Close;
query.SQL.Text := 'SELECT * FROM your_table';
query.Open;
query.First;
while not query.EOF do
begin
mrk := AddMarker(query.FieldByName('LATITUDE').AsFloat,
query.FieldByName('LONGITUDE').AsFloat,
query.FieldByName('ENTITY_NAME').AsString);
if (query.FieldByName('LATITUDE').AsString <> '') and
(query.FieldByName('LONGITUDE').AsString <> '') then
begin
mrk.CustomParams.Values['entity'] := query.FieldByName('ENTITY_NAME').AsString;
end;
query.Next;
end;
end;
// 地図のビューを調整し、全マーカーが最適なエリアに表示されるようにします
CCuniGUIAMap1.AdjustMapView(True);
end;
このprocedureは、データソースからエンティティの位置データを取得し、AddMarkerメソッドを呼び出して地図上に配置します。最後にAdjustMapViewを呼び出すことで、全マーカーを一括で最適なビュー位置に調整します。
次に、マーカーに詳細情報を表示するタグの実装方法を説明します。
1. Panelを用いた実装方法
この方法では、UniPanelコンポーネントを用いて詳細情報を表示します。UniPanelのメリットは、可视化デザイナーで自由にレイアウトを設計できることです。
Panelの位置を計算する際のアルゴリズムは以下のようになります：
procedure SetPanelPosition(const AMarker: TCCuniGUIAMap.TMarker);
begin
CCuniGUIAMap1.LngLatToContainer(AMarker.Position,
procedure(AResult: TPixel)
begin
var panel := DetailPanel;
panel.Top := Round(AResult.Y) - panel.Height - 40;
panel.Left := Round(AResult.X) - Round(panel.Width / 2) + 10;
panel.Visible := True;
end);
end;
このアルゴリズムは、マーカーの位置を基準にPanelの表示位置を計算します。
2. Textを用いた実装方法
この方法では、地図のTextプロパティを用いて詳細情報を表示します。Textオブジェクトのメリットは、地図と完全に統合できることです。
Textオブジェクトを作成する際のCSSスタイルは以下のようになります：
procedure InitializeDetailText;
var
txt: TText;
begin
txt := CCuniGUIAMap1.Texts.Add;
with txt.Options do
begin
Anchor := 'center';
Cursor := 'pointer';
Offset.Y := -105;
if CCuniGUIAMap1.ApiVersion = '2.0' then
Offset.Y := -38;
ExtData := 'DETAIL';
Style := '{'
+ '"padding":"15px 25px"'
+ ',"border-radius":".35rem"'
+ ',"background-color":"rgba(30,159,255,0.8)"'
+ ',"border-width":0'
+ ',"box-shadow":"0 2px 6px 0 rgba(0,0,0,.5)"'
+ ',"text-align":"left"'
+ ',"font-size":"10px"'
+ ',"color":"white"'
+ ',"line-height":"20px"' + '}';
end;
end;
この設定は、マーカー上に詳細情報を表示するタグの外観を定義します。タグの表示や非表示は以下のイベントハンドラーで制御します：
procedure TMarkerMapFrame.OnMarkerClick(const sender: TObject;
const marker: TCCuniGUIAMap.TMarker;
const lngLat: TLngLat;
const params: TUniStrings);
var
detail: string;
begin
// 名称タグを隠す
CCuniGUIAMap1.Texts.Items[0].Hide;
// 詳細情報の作成
detail := marker.CustomParams.Values['NAME'] + '</br>' +
marker.CustomParams.Values['DETAIL1'] + '</br>' +
marker.CustomParams.Values['DETAIL2'] + '</br>' +
marker.CustomParams.Values['DETAIL3'] + '</br>' +
marker.CustomParams.Values['DETAIL4'];
// 詳細情報の表示
var detailText := CCuniGUIAMap1.Texts.Items[1];
detailText.Show;
detailText.SetPosition(marker.Position);
detailText.SetText(detail);
end;
procedure TMarkerMapFrame.OnMarkerMouseOut(const sender: TObject;
const marker: TCCuniGUIAMap.TMarker;
const lngLat: TLngLat;
const params: TUniStrings);
begin
// 詳細タグを隠す
CCuniGUIAMap1.Texts.Items[1].Hide;
end;
この実装方法は、500個以下のマーカー表示に最適です。大量のマーカーを表示する場合には、TLabelMarkerを使用することをおすすめします。